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(); |
并清除所有数据。
我们可以使用
1 | var markers = L.markerClusterGroup({disableClusteringAtZoom: 17, spiderfyOnMaxZoom: false, showCoverageOnHover: true, zoomToBoundsOnClick: true }); |