Question

我正在使用Mapbox-GL构建地图Web应用程序。它有很多很酷的功能。我按照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

与Leaftlet之类的映射库不同，Mapbox GL JS没有＆＃34; basemap＆＃34;的概念。 vs＆＃34;其他层。＆＃34;所有图层都是同一实体的一部分：风格。因此，您需要保留数据层的某些状态，并在每次更改时调用其source / addLayer。

Answer 2

也许我来晚了，但是为了记录：

style.load不属于公共API
使用map.on('styledata')来监视样式更改

请参考：

Answer 3

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

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

Mapbox-GL setStyle删除图层

3 个答案: