代码之家 › 专栏 › 技术社区 › Rohan

如何从地图中删除所有图层和要素?

mapbox leaflet jquery

Rohan · 技术社区 · 9 年前

我正在制作地图,我想删除某个事件地图上的所有功能。要素位于动态打印的多个图层中。

部分代码为:

$.getJSON('distributor-companies', function (data) {
                var layers = [];
                $.each(data, function (i, item) {
                    if (item.geojson != '') {
                        layers[i] = L.mapbox.featureLayer().addTo(map);
                        $.getJSON('/geojson/' + item.geojson, function (data) {
                            layers[i].setGeoJSON(data);
                            // Loop over the added layer
                            layers[i].eachLayer(function (layer) {
                                // Add click event
                                layer.on('click', function (e) {
                                    // Do stuff
                                    map.fitBounds(layers[i].getBounds());
                                });
                            });
                        });
                    }
                });
            });

有没有一种方法可以在某个时间点获取地图上的所有图层并将其删除。

5 回复 | 直到 9 年前

iH8 8 年前

使用 eachLayer 方法 L.Map ,然后调用 removeLayer 方法 五十、地图 在他们每个人身上:

map.eachLayer(function (layer) {
    map.removeLayer(layer);
});

参考文献:

每个图层 : http://leafletjs.com/reference.html#map-eachlayer

删除图层 : http://leafletjs.com/reference.html#map-removelayer

请注意,这将从地图中删除所有图层。这也意味着任何tilelayer等。我认为在您的情况下,最好不要将所有featureLayers添加到地图实例中,而是为它们创建一个组:

// Create group for your layers and add it to the map
var layerGroup = L.layerGroup().addTo(map);

$.getJSON('distributor-companies', function (data) {

    $.each(data, function (i, item) {
        if (item.geojson != '') {
            // Add the new featureLayer to the layerGroup
            var featureLayer = L.mapbox.featureLayer().addTo(layerGroup);
            $.getJSON('/geojson/' + item.geojson, function (data) {
                featureLayer.setGeoJSON(data);
                featureLayer.eachLayer(function (layer) {
                    layer.on('click', function (e) {
                        map.fitBounds(featureLayer.getBounds());
                    });
                });
            });
        }
    });
});

现在您可以拨打 clearLayers 方法 L.LayerGroup 这将清除组中的当前层:

layerGroup.clearLayers();

参考:

五十、图层组 : http://leafletjs.com/reference.html#layergroup

清除图层 : http://leafletjs.com/reference.html#layergroup-clearlayers

sybb 4 年前

您可以使用以下truthy检查来查看它是否是有效的geoJSON对象:

map.eachLayer(function(layer) {
  if (!!layer.toGeoJSON) {
    map.removeLayer(layer);
  }
});

Viraj Amarasinghe 5 年前

在mabox gl绘图库中,有一个函数可以执行此操作。

draw.deleteAll().getAll();

这将删除地图上的所有要素和图层。

do-me 3 年前

基于 iH8 的答案,但如果你想的话,更简洁 删除除平铺层以外的所有层 。只需检查该层是否为平铺层,即检查 _url :

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'

map.eachLayer(function (layer) {
    if (osmUrl != layer._url){map.removeLayer(layer)};
});

Mashpy Rahman 3 年前

我用这个解决了我的问题。我的图层类型为“fill”,图层名称为“source_tiles_1”、“source_tables_2”、“source_tiles_3”

map.getStyle().layers.forEach((layer) => {
       if(layer.id.match(/source_tiles/g)){
          map.removeLayer(layer.id);
          map.removeSource(layer.id);
         }
     });