Mapbox-GL setStyle 移除图层

Question

我正在使用 Mapbox-GL 构建地图网络应用程序。它有很多很酷的功能。我已经按照 Mapbox website.

上的示例设置了切换底图（即卫星、地形等）的按钮

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

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

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

 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 这样的映射库不同，Mapbox GL JS 没有 "basemap" vs "other layers." 的概念，所有图层都是同一实体的一部分：样式。因此，您需要保留数据层的某些状态并在每次更改时调用其 source/addLayer。

Answer 2

也许我迟到了，但仅作记录：

style.load 不属于 public API
使用map.on('styledata')监控样式变化

请参考：

Answer 3

其他答案表明 map.on('styledata') 是正确的方法。但它 doesn't 可靠地触发，相关的 isStyleLoaded 不准确。

看来我们暂时无法使用 style.load。

Mapbox-GL setStyle 移除图层

Mapbox-GL setStyle removes layers

javascript

mapbox-gl

mapbox-gl-js