javascript - 标记簇传单 : dynamically modify icon

Question

我正在使用 Leaflet 和标记集群插件，我想动态修改子组件所在集群的图标。

首先，我创建 clusterGroups，然后添加一些标记。我创建了两个组，但仅显示第一个“集群”，并且如果他的一个 child 也属于“ClusterBatterieFaible”组，我想编辑此图标。

我的代码可以工作，但不想要我想要的:在函数 iconCreateFunction 中，我想计算“ClusterBatterieFaible”的标记，但我不知道如何将其作为参数发送。有什么建议吗？

var ClusterBatterieFaible = L.markerClusterGroup({    });

var cluster = L.markerClusterGroup({
iconCreateFunction: function (cluster) {
    var childCount = cluster.getChildCount();
    if (childCount > 1){
        var c = ' marker-cluster-large';
    }
    else {
        var c = ' marker-cluster-small';
    }
    return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
}

});

For loop
  if batteryOk :    
     L.marker(latlng, {icon: mainIconE}).bindPopup("blabla");}   }).addTo(cluster)

  if batteryNotOk : 
     L.marker(latlng, {icon: mainIconE}).bindPopup("blabla");}   }).addTo(ClusterBatterieFaible).addTo(cluster)

Answer 1

欢迎您!

不要将标记添加到多个 MarkerClusterGroup (MCG)。这会破坏它们的簇，因为它们会对标记属于哪个簇感到“困惑”。

相反，您可以简单地使用标记数组，或 L.LayerGroup您可以在其中添加标记(但不要将其添加到 map 中!)，用于您想要测试的组(“batteryNotOk”，如果我的理解是正确的)。并仅将剩余的 MCG 添加到 map 中。

要测试给定标记是否包含在数组中，只需使用 myArray.indexOf(marker) >= 0。

要测试给定标记是否已添加到图层组中，只需使用myLayerGroup.hasLayer(marker)

所以你的iconCreateFunction会是这样的:

function (cluster) {
    var markers = clusters.getAllChildMarkers(),
        iconClass = "allBatteriesOk";

    for (var i = 0; i < markers.length; i += 1) {
        if (myArray.indexOf(markers[i]) >= 0) {
            iconClass = "atLeastOneBatteryNotOk";
            break;
        }
    }

    return L.divIcon({
        html: '<div><span>' + childCount + '</span></div>',
        className: iconClass,
        iconSize: new L.Point(40, 40)
    });
}