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;
    }

- Gold Masta

Answer 1

这里有一个例子展示了这个问题: http://bl.ocks.org/tristen/0c0ed34e210a04e89984

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

- tristen

---

太棒了！感谢@tristen的帮助。我本来希望你可以更换地图底图，但是Mapbox-GL有点不同。我用了你的例子作为灵感。基本上，我必须将加载的数据保存到一个变量中，并使用map.on('style.load' ...函数重新加载它。这样做效果很好。 - Gold Masta

感谢@tristen提供的示例和解释。 - bkowshik

感谢@tristen。有没有关于如何处理来自切片服务器（例如localhost/{z}/{x}/{y}.pbf）的矢量切片的提示？虽然可以将GeoJSON存储在变量中，但如果您有大量数据并且只想显示当前边界框的矢量切片，则不确定如何保留相同的数据... - jondelmil

@jondelmil 听起来是一个不同的问题？请参考 https://www.mapbox.com/mapbox-gl-js/example/third-party/ 了解如何将第三方矢量数据添加到地图中。这个示例仅演示了使用 setStyle 更换基础图层的方法。 - tristen

@paolov，“mapboxgl.accessToken”下的令牌已被处理。通过复制代码并提供您自己的访问令牌，示例应该可以正常工作！ - tristen

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

- Yumin Gui

---

这是2020年任何人的正确答案。 - jclark754

然而，'styledata'会多次触发，而'style.load'只会触发一次。是的，使用非公共特性并不理想，但在期望行为为单次触发的情况下，它可以工作（目前）。 - Stonetip

Answer 3

其他答案建议使用 map.on('styledata')，但它不能可靠触发，并且相关的 isStyleLoaded 不准确。

看起来目前我们只能使用 style.load。

- Mark d