Mapbox-GL setStyle 移除图层

Posted

技术标签:

【中文标题】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

【讨论】:

以上是关于Mapbox-GL setStyle 移除图层的主要内容,如果未能解决你的问题,请参考以下文章

如何在 mapbox-gl 中为图层文本字段添加背景颜色

过渡(显式动画)

iOS中动画组、过渡动画

如何实现mapbox-gl的tile源码

ArcGIS 取并集、擦除问题

LayerDrawable 移除一个图层