标记集群小册子：动态修改图标

我正在使用Leaflet和标记集群插件，并且想要动态修改子集内部的集群图标。标记集群小册子：动态修改图标

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

来源

2015-11-03 Bameza

Bienvenue sur SO！

避免将您的标记添加到多个MarkerClusterGroups（MCG）。这将打破他们的集群，因为他们将“混淆”标记属于哪个集群。

取而代之，您可以简单地使用一组标记或一个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) 
    }); 
}

来源

2015-11-03 15:52:41 ghybs

好感谢的答案，最好先用数组！我不得不定制它，因为我使用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);

来源

2015-11-04 13:40:54 Bameza

标记集群小册子：动态修改图标

回答

相关问题