刪除傳單markercluster中的項目

Question

我有兩個函數可以將標記加載到我的地圖中。 （這兩個函數被稱爲上調用Ajax的成功）

第一功能是這樣的：

function loadEpsMarkers(data) { 
        for (var i = 0; i < data.length; i++) { 
         var plateNo = data[i].PLATE_NUMBER; 
         var permitNo = data[i].PERMITINFOID; 
         var inventoryId = data[i].INVENTORY_ID; 
         var icon = epsiconR; 
         if (data[i].INVENTORY_STATUS === 'Complete') { 
          icon = epsiconC; 
         } 
         var popup = '<h5>EPS</h5>' + 'Plate:' + plateNo + '<br/>' + 
          ' Permit: <a class=\'link\' data-inventoryId="' + inventoryId + '" href=' + url + '>' + permitNo + '</a>' + 
          '<p style=\"color:blue\">' + '' + '<a class=\'link\' href=' + url + '>' + 
          'Import' + '</a>' + '<br/>' + '<a class=\'link\' href=' + url + '>' + 
          'Duplicate' + '</a>' + '<br/>' + '<a class=\'link\' href=' + url + '>' + 
          'Removed' + '</a>' + '<br/>' + '</p>'; 

         var m = L.marker([data[i].REF_LATITUDE, data[i].REF_LONGITUDE], { icon: icon, draggable: 'true' }) 
              .bindPopup(popup); 
         markerClusters.addLayer(m); 

    } 
         map.addLayer(markerClusters); 
        map.invalidateSize(false); 
} 

第二個功能是相同的，除了數據是不同的。 這工作得很好，我得到了預期的聚集標記。

現在我有一個按鈕，當我點擊這個按鈕時，它應該從第一次調用中隱藏標記。

簡單的方法是刪除圖層，然後重做第二個調用。但這似乎是這樣做的一種低效率的方式。

如果我有4個這樣的數據調用並且我想切換來自每個調用的標記，這會變得更加複雜。

我已經試過這樣的事情還有：

$('#dvEpsOnlyMarkers').click(function() { 
      markerClusters.removeLayer(m); 
     }); 

但是，這是行不通的。關於如何使這項工作的任何想法？

在此先感謝

Answer 1

一個實現你的描述很簡單的方法是引用存儲每組陣列的標記，並操縱這些陣列添加/刪除層爲MCG：

var markersCall1 = [], 
    markersCall2 = [], 
    markersCall3 = [], 
    markersCall4 = []; 

function loadEpsMarkersX(data) { // Replace X by 1...4 
    for (var i = 0; i < data.length; i++) { 
     // Convert data... 

     var m = L.marker(/* latLng, options, popup... */); 

     markersCallX.push(m); // Replace X by 1...4 
    } 

    // Actually add to MarkerClusterGroup. 
    // Replace X by 1...4 
    markerClusters.addLayers(markersCallX); // note the addLayers with "s". 
} 


$('#dvEpsOnlyMarkersX').click(function (event) { // Replace X by 1...4 
    // Assuming it is a checkbox, you can use it to toggle. 
    if (this.checked) { 
     // Replace X by 1...4 
     markerClusters.addLayers(markersCallX); // note the "s". 
    } else { 
     // Replace X by 1...4 
     markerClusters.removeLayers(markersCallX); // note the "s". 
    } 
}); 

當您的批量標記添加/刪除像你的情況下，你可以方便地使用MarkerClusterGroup方法addLayers and removeLayers（尾隨s）與處理標記數組。這些方法比逐個添加/刪除標記效率更高。