Hinzufügen einer markerClusterGroup mit einer anderen Farbe

Question

Ich arbeite an einer Map wo ich Marker in markerClusterGroup anzeigen möchte und jede markerClusterGroup muss eine andere Hintergrundfarbe haben.

if (isChecked) { 
    color_html=$widget.data('colorhtml'); 
    add_contacts(file); 
} 



add_contacts(file){ 
    my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({ 
     iconCreateFunction: function(cluster) { 
      return new L.DivIcon({ 
       html: '<div style="color: white; background: '+color_html+'; border-radius:5px; text-align: center; font-size: 18px; box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color_html+'; display: inline-block; vertical-align:middle;">' + cluster.getChildCount() +'</div>', 
       iconSize: [0,0] 
      }); 
     }, 
    }).addTo(map); 
}   
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]); 

Und ich habe eine Checkliste, wo ich die Dateien zur Anzeige auswählen. Wenn ich die erste Datei überprüfe, wird markerClusterGroup mit der gewählten Hintergrundfarbe angezeigt, und wenn ich die zweite Datei wähle, wird die zweite markerClusterGroup mit einer anderen Hintergrundfarbe angezeigt, aber wenn ich heranzoome oder verkleinere, haben die beiden markerClusterGroup die gleichen Hintergrundfarben (selbe der letzten Farbe gewählt) und wenn ich zum Anfangszoom zurückkehre, habe ich zwei verschiedene Farben. Und wenn ich unterschiedliche Hintergrundfarben in unterschiedlichen Zooms haben möchte, muss ich nach dem Hinzufügen der ersten markerClusterGroup und vor dem Hinzufügen der zweiten markerClusterGroup zu jedem Zoom gehen.

Jemand kann mir helfen, das Problem zu verstehen. Thnx

Answer 1

Die Lösung ist so etwas wie dieses

if (isChecked) { 
color_html=$widget.data('colorhtml'); 
add_contacts(file); 
} 

add_contacts(file){ 
    my_objects["style_"+file]=style="color: white; background: '+color_html+'; border-radius:5px; text-align: center; font-size: 18px; box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color_html+'; display: inline-block; vertical-align:middle;"' 

    my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({ 
    iconCreateFunction: function(cluster) { 
     return new L.DivIcon({ 
      html: '<div '+ my_objects["style_"+file]+'>' + cluster.getChildCount() +'</div>', 
      iconSize: [0,0] 
     }); 
    }, 
}).addTo(map); 
}   
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]); 

Answer 2

setzen Sie auch die Farbe als Parameter an die Funktion hinzufügen könnte:

if (isChecked) { 
    color_html=$widget.data('colorhtml'); 
    add_contacts(file, color); 
} 



add_contacts(file, color){ 
    my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({ 
     iconCreateFunction: function(cluster) { 
      return new L.DivIcon({ 
       html: '<div style="color: white; background: '+color+'; border-radius:5px; text-align: center; font-size: 18px; box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color+'; display: inline-block; vertical-align:middle;">' + cluster.getChildCount() +'</div>', 
       iconSize: [0,0] 
      }); 
     }, 
    }).addTo(map); 
}   
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);