如何在添加新标记和图层之前清除所有标记和图层的传单地图？

Posted 2023-02-16

【中文标题】如何在添加新标记和图层之前清除所有标记和图层的传单地图？

【英文标题】：How to clear leaflet map of all markers and layers before adding new ones?

【发布时间】：2015-04-22 14:08:15

【问题描述】：

我有闲置代码：

map: function (events) 
    var arrayOfLatLngs = [];
    var _this = this;

    // setup a marker group
    var markers = L.markerClusterGroup();

    events.forEach(function (event) 
        // setup the bounds
        arrayOfLatLngs.push(event.location);

        // create the marker
        var marker = L.marker([event.location.lat, event.location.lng]);

        marker.bindPopup(View(event));

        // add marker
        markers.addLayer(marker);
    );

    // add the group to the map
    // for more see https://github.com/Leaflet/Leaflet.markercluster
    this.map.addLayer(markers);

    var bounds = new L.LatLngBounds(arrayOfLatLngs);
    this.map.fitBounds(bounds);
    this.map.invalidateSize();

我最初调用此函数，它会将所有events 添加到带有标记和集群的地图中。

在某个起泡点，我通过了一些其他事件，地图将放大到新事件，但旧事件仍在地图上。

我尝试了this.map.removeLayer(markers); 和其他一些东西，但我无法让旧标记消失

有什么想法吗？

【参考方案1】：

如果您想删除组中的所有当前图层（标记），您可以使用L.markerClusterGroup() 的clearLayers 方法。您的参考名为markers，因此您需要致电：

markers.clearLayers();

【讨论】：

你刚刚救了我的命。

我倾向于将我的地图图层添加到 'var editableLayers = new L.FeatureGroup()' 所以我使用此代码 'this.editableLayers.clearLayers()' 来清除我绘制的形状地图。

使用这种方法可以清除添加到markerClusterGroup 的所有标记。如果您想保留标记以供以后使用，由于性能问题，最好使用map.removeLayer(markers)从地图中删除集群组@

【参考方案2】：

您正在丢失标记引用，因为它是用 var 设置的。 请尝试保存对“this”的引用。

mapMarkers: [],
map: function (events) 
    [...]
    events.forEach(function (event) 
        [...]
        // create the marker
        var marker = L.marker([event.location.lat, event.location.lng]);
        [...]
        // Add marker to this.mapMarker for future reference
        this.mapMarkers.push(marker);
    );
    [...]

然后当您需要删除标记时运行：

for(var i = 0; i < this.mapMarkers.length; i++)
    this.map.removeLayer(this.mapMarkers[i]);

或者，您可以将集群保存到“this”，而不是保存对每个标记的每个引用。

【讨论】：

谢谢，markers.clearLayers(); 成功了，但你使用this 有好处，否则我做不到

【参考方案3】：

map._panes.markerPane.remove();

【讨论】：

它只是删除图像！

【参考方案4】：

$(".leaflet-marker-icon").remove();
$(".leaflet-popup").remove();

【讨论】：

对我来说还有一个影子 .leaflet-marker-shadow

【参考方案5】：

您无需保存即可清除所有标记

map.eachLayer((layer) => 
  layer.remove();
);

来自https://leafletjs.com/reference-1.0.3.html#map-event

【讨论】：

这会删除整个地图。

【参考方案6】：

我在这里结合了 beije 和 Prayitno Ashuri 的两个最佳答案。

将标记保存到“this”，以便我们稍后引用它。

this.marker = L.marker([event.location.lat, event.location.lng]);

然后只是删除标记。

this.markers.remove()

【讨论】：

this.marker != this.markers ，也使 this.markers 需要是数组或对象？