Question

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

首先我创建我的clusterGroups然后添加一些标记。我创建了两个组但是我只显示了第一个＆＃34; cluster＆＃34;我想编辑这个图标如果他的一个孩子也属于这个小组＆＃34; ClusterBatterieFaible＆＃34;。

我的代码有效，但并不是我想要的：在函数iconCreateFunction中，我想计算＆＃34; ClusterBatterieFaible＆＃34;的标记，但我不知道如何将其作为a参数。有什么建议吗？

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）。这将打破他们的集群，因为他们会混淆＆＃34;关于标记属于哪个群集。

相反，你可以简单地使用一个标记数组，或者你要添加标记的L.LayerGroup（但不要将它添加到地图中！），对于你想要测试的组（＆＃34） ; batteryNotOk＆＃34;如果我的理解是正确的）。并且只将剩余的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 loop：

    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);

标记集群传单：动态修改图标

2 个答案: