javascript - Mapbox-GL setStyle 移除图层

Question

我正在使用 Mapbox-GL 构建 map 网络应用程序。它有很多很酷的功能。我已经按照 Mapbox website 上的示例设置了切换 basemap (即卫星、地形等)的按钮。 .

我遇到的问题是，当我更改样式时，它会删除作为图层加载的多边形并重新加载 map 。我根据用户查询从 Mongo 数据库加载多边形作为图层。我希望能够更改 basemap 并保留这些图层。

有没有办法在不重新加载 map 或至少不删除图层的情况下更改样式？

这是我的切换器代码，它与示例相同，但我为自定义样式添加了一个条件:

 var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');

    function switchLayer(layer) {
        var layerId = layer.target.id;
        if (layerId === 'outdoors') {
            map.setStyle('/outdoors-v8.json');
        } else {
        map.setStyle('mapbox://styles/mapbox/' + layerId + '-v8');
        }
    }

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchLayer;
    }

Answer 1

这里有一个例子来证明:http://bl.ocks.org/tristen/0c0ed34e210a04e89984

与像 Leaflet 这样的 map 绘制库不同，Mapbox GL JS 没有“ basemap ”与“其他图层”的概念。所有图层都是同一实体的一部分:样式。因此，您需要保留数据层的某些状态，并在每次更改时调用其 source/addLayer。