Mapbox-GL setStyle删除图层

Question

我正在使用Mapbox-GL构建一个映射Web应用程序.它有很多很酷的功能.我按照Mapbox网站上的示例设置按钮来切换基本地图(即卫星,地形等).

我遇到的问题是,当我更改样式时,它会删除作为图层加载的多边形并重新加载地图.我从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的例子

与Leaftlet等映射库不同,Mapbox GL JS没有"底图"与"其他图层"的概念.所有图层都是同一实体的一部分:风格.因此,您需要保留数据层的某些状态,并在每次更改时调用其source/addLayer.

Answer 2

也许我迟到了，但只是为了记录：

• style.load 不是公共 API 的一部分
• 用于map.on('styledata')监控风格变化

请参考：

• https://github.com/mapbox/mapbox-gl-js/issues/6210
• https://github.com/mapbox/mapbox-gl-js/issues/3970#issuecomment-275722197