Mapbox-GL setStyle 移除图层

Posted 2023-02-16

【中文标题】Mapbox-GL setStyle 移除图层

【英文标题】：Mapbox-GL setStyle removes layers

【发布时间】：2016-07-10 04:22:44

【问题描述】：

我正在使用 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;
    

【参考方案1】：

这是一个示例：http://bl.ocks.org/tristen/0c0ed34e210a04e89984

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

【讨论】：

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

感谢@tristen 的示例和解释。

谢谢@tristen。有关如何对来自切片服务器（例如 localhost/z/x/y.pbf）的矢量切片执行此操作的任何提示？ geojson 可以存储在变量中，但是如果您有很多数据并且只想显示当前边界框的矢量切片，我不确定如何保留相同的数据...

@jondelmil 听起来像是一个不同的问题？请参阅mapbox.com/mapbox-gl-js/example/third-party 将第三方矢量数据添加到地图。此示例演示的唯一内容是使用 setStyle 交换基础层。

@paolov mapboxgl.accessToken 下的令牌已被处理。该示例应该通过复制代码并提供您自己的访问令牌来工作！

【参考方案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

【讨论】：

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

【参考方案3】：

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

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