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

Posted 2023-02-16

【中文标题】如何从地图中删除所有图层和要素？

【英文标题】：How to remove all layers and features from map?

【发布时间】：2015-04-23 03:43:45

【问题描述】：

我正在制作地图，我想在某个事件中移除地图中的所有要素。这些特征位于动态绘制的多个图层中。

部分代码为：

$.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());
                                );
                            );
                        );
                    
                );
            );

有没有办法在某个时间点获取地图上的所有图层并删除它们。

【参考方案1】：

循环使用L.Map 的eachLayer 方法添加到地图的所有层，然后在每个层上调用L.Map 的removeLayer 方法：

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

参考文献：

eachLayer:http://leafletjs.com/reference.html#map-eachlayer

removeLayer:http://leafletjs.com/reference.html#map-removelayer

请注意，这会从您的地图中删除所有图层。这也意味着任何 tilelayers 等。我认为在您的情况下，最好不要将所有 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());
                    );
                );
            );
        
    );
);

现在您可以调用L.LayerGroup 的clearLayers 方法，该方法将清除组中的当前层：

layerGroup.clearLayers();

参考：

L.LayerGroup:http://leafletjs.com/reference.html#layergroup

clearLayers:http://leafletjs.com/reference.html#layergroup-clearlayers

【参考方案2】：

您可以使用以下真实检查来查看它是否是有效的 geoJSON 对象：

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

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

【参考方案4】：

在 mabox-gl 绘图库中，有一个函数可以做到这一点。

draw.deleteAll().getAll();

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

【参考方案5】：

我用这个解决了我的问题。我的图层类型是“填充”，图层名称是“source_tiles_1”、“source_tiles_2”、“source_tiles_3”

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