标记簇传单：动态修改图标

Question

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

首先我创建了我的 clusterGroups，然后我添加了一些标记。我创建了两个组，但我只显示第一个 "cluster"，如果他的 children 中的一个也属于组 "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

Bienvenue sur SO !

避免将您的标记添加到多个 MarkerClusterGroups (MCG)。这将打破他们的集群，因为他们将 "confused" 关于标记属于哪个集群。

相反，您可以简单地使用一个标记数组，或一个 L.LayerGroup，您可以在其中添加您的标记（但不要将其添加到地图中！），用于您要测试的组（"batteryNotOk" 如果我的理解是正确的话）。并仅将剩余的 MCG 添加到地图中。

要测试给定的标记是否包含在数组中，只需使用 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)
    });
}

Answer 2

好的，感谢您的回答，使用数组是个好主意！我不得不对其进行一些自定义，因为我使用 geoJson 来创建我的标记。

我不是 javascript 专家，但我的代码可以正常工作。这是我的完整代码，供任何需要的人使用。

var lowBatt = [];
var cluster = L.markerClusterGroup({
    iconCreateFunction: function (cluster) {
        var iconClass = "marker-cluster marker-cluster-small";
        var markers = cluster.getAllChildMarkers();

        for (var i = 0; i < markers.length; i += 1) {
            if (lowBatt.indexOf(markers[i]) >= 0) {
                iconClass = "marker-cluster marker-cluster-large";
                break;
            }
        }

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

For 循环：

    coords = geojsonFeature.geometry.coordinates;
    var temp = coords[1];
    coords[1]=coords[0];
    coords[0]=temp;

    var m = L.marker(coords, {icon: lowBattIconE});
    L.geoJson(geojsonFeature, {
        pointToLayer: function (feature, latlng) {
            return m.bindPopup("blabla");}
    }).addTo(cluster).addTo(group);
    lowBatt.push(m);

标记簇传单：动态修改图标

Marker cluster leaflet : dynamically modify icon

javascript

maps

leaflet

markerclusterer

markers