30

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

3 回答 3

27

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

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

于 2016-03-23T03:49:07.983 回答
6

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

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

请参考：

于 2020-03-03T20:25:34.150 回答
1

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

看起来我们现在被卡住style.load了。

于 2021-03-31T15:06:42.130 回答