关于javascript:无法删除leaflet.js中具有群集的图层

Can't remove layers with clusters in leaflet.js

我正在使用Leaflet集群插件来映射一系列崩溃。当您加载页面时,我会映射所有崩溃(存储在GeoJSON文件中)。我还有一些按钮,它们每年会加载不同的geoJSON文件。

我遇到的问题是removeLayer()并没有真正删除图层。因此,当我重新映射新的GeoJSON文件时,它只是将所有崩溃均叠加在一起。

这是我单击按钮时触发的两个功能。 var标记是在全局名称空间中定义的,如下所示(也许这是问题的一部分)?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var markers = L.markerClusterGroup({spiderfyDistanceMultiplier: 1.3});

//Lay new data on map
function buildMarkers(yearData){
        var crashLayer = new L.geoJson(yearData, {
                onEachFeature: function (feature, layer) {
                    layer.bindPopup(feature.properties.year);
                }
        });
        markers.addLayer(crashLayer);
        map.addLayer(markers);

    }

//Remove ALL data on map        
function removeClusters(){
        map.removeLayer(markers)
    }

//AN example of a button
$("#twelve").click(function(e){
        e.preventDefault();
        $('a').removeClass('selected');
        $(this).addClass('selected');
        removeClusters();
        buildMarkers(twelveCrashes);
    });

只是想通了。

要清除markers变量中的所有数据,我使用了clearLayers()。所以在我的buildMarkers()函数中,我只是将其添加到函数

的第一行中

1
markers.clearLayers();

并清除所有数据。


我们可以使用disableClusteringAtZoom删除群集层,需要指定在哪个标签上可以删除Clustering

1
var markers = L.markerClusterGroup({disableClusteringAtZoom: 17, spiderfyOnMaxZoom: false, showCoverageOnHover: true, zoomToBoundsOnClick: true });