从传单标记集群中删除项目

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和removeLayers（带有尾随s）与要处理的标记数组。这些方法比一个一个地添加/删除标记更有效。