Dépliant de groupe de marqueurs: modifier dynamiquement l'icône

Question

J'utilise Leaflet et le plugin de cluster de marqueurs et je souhaite modifier dynamiquement l'icône du cluster à partir duquel se trouve l'enfant.

D'abord je crée mes clusterGroups puis j'ajoute des marqueurs. Je crée deux groupes mais je n'affiche que le premier "cluster" et je veux éditer cette icône si l'un de ses enfants appartient également au groupe "ClusterBatterieFaible".

Mon code fonctionne mais ne veut pas Je veux: dans la fonction iconCreateFunction je veux compter les marqueurs de "ClusterBatterieFaible", mais je ne sais pas comment l'envoyer en paramètre. Une suggestion?

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! Abstenez-vous d'ajouter vos marqueurs à plusieurs groupes MarkerClusterGroup (MCG). Cela casserait leurs groupes car ils seraient "confus" à propos de la grappe à laquelle appartiennent les marqueurs. Au lieu de cela, vous pouvez simplement utiliser un tableau de marqueurs, ou un L.LayerGroup dans lequel vous ajoutez vos marqueurs (mais ne l'ajoutez pas à la carte!), Pour le groupe que vous voulez tester ("batteryNotOk" si je comprends bien est correct). Et ajoutez seulement le MCG restant à la carte.

Pour tester si un marqueur donné est contenu dans un tableau, utilisez simplement myArray.indexOf(marker) >= 0.

Pour tester si un marqueur donné a été ajouté dans un groupe de calques, utilisez simplement myLayerGroup.hasLayer(marker)

Ainsi, votre iconCreateFunction serait quelque chose comme:

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

Ok merci pour la réponse, bonne idée d'utiliser des tableaux ! J'ai dû le personnaliser un peu car j'utilise geoJson pour créer mes marqueurs. Je ne suis pas un expert javascript mais mon code fonctionne. Voici mon code complet pour quiconque en a besoin.

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

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