Mapbox-GL setStyle删除图层 [英] Mapbox-GL setStyle removes layers

问题描述

我正在使用Mapbox-GL构建一个映射Web应用程序.它具有很多很酷的功能.我已经按照

I'm building a mapping web application using Mapbox-GL. It has a lot of cool features. I've set up the buttons to switch base maps (ie. satellite, terrain, etc) following the example on the Mapbox website.

我遇到的问题是，当我更改样式时，它将删除作为图层加载的多边形并重新加载地图.我根据用户查询从Mongo数据库中将多边形作为图层加载.我希望能够更改基本地图并保留这些图层.

The problem that I am having is that when I change the style it removes my polygons that are loaded as layers and reloads the map. I load in polygons from a Mongo database as layers based on user queries. I want to be able to change the base map and keep those layers.

有没有一种方法可以更改样式而不重新加载地图，或者至少不放置图层?

Is there a way to change the style without reloading the map, or at least not droping the layers?

这是我的切换器代码，与示例相同，但是我添加了自定义样式的条件:

Here is my code for the switcher, its the same as the example but I added a condition for a custom style:

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

推荐答案

以下是一个演示该示例的示例: http: //bl.ocks.org/tristen/0c0ed34e210a04e89984

Here's an example demonstrating that: http://bl.ocks.org/tristen/0c0ed34e210a04e89984

与Leaftlet这样的映射库不同，Mapbox GL JS没有底图"和其他层"的概念.所有图层都属于同一实体:样式.因此，您需要保留数据层的某些状态，并在每次更改时调用它的source/addLayer.

Unlike a mapping library like Leaftlet, Mapbox GL JS doesn't have a concept of "basemap" vs "other layers." All layers are part of the same entity: the style. So you need to keep some state of the data layer around and call its source/addLayer on each change.

这篇关于Mapbox-GL setStyle删除图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！