Faltblatt-Clusterfarbe basierend auf Symbolen im Inneren

Question

Ich habe Stecknadeln auf meinem Flugblatt.js-Karte, bei der das Bild durch den Status des Objekts bestimmt wird, das sie darstellen.Zum Beispiel Online- und Offline-Benutzer - online sind grün und offline sind rot.Dazu füge ich dem divIcon eine Klasse hinzu und steuere dann die Bilder mit CSS.

Ich habe meiner Karte jetzt Marker-Clustering hinzugefügt.Was ich tun möchte, ist die Farbe des Clusters durch die zu bestimmen Mehrheit status' innerhalb des Clusters.Meine erste Idee war, so etwas zu tun:

this.markers = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        // Use this somehow to filter through and look at the pin elements
        console.log(cluster.getAllChildMarkers());

        return new L.DivIcon({ html: /* ?? */ });
    }
});

Leider kann ich nicht auf die HTML-Elemente aus dem zurückgegebenen Array zugreifen getAllChildMarkers.

Hat jemand eine Idee, wie ich das machen könnte?Oder eine Möglichkeit, das HTML-Element des Pins zu erhalten?

Danke

BEARBEITEN:

Hier erstelle ich meine Kartenstifte (die meinen Backbone-Modellen zugewiesen sind mapPin Attribut):

that.mapPins.org = L.divIcon({
className: 'org-div-icon',
    html: "<div class='org-status "+ org.getGroupStatus() +"'></div>",
    iconSize: [35, 35],
    iconAnchor: [18, 17]
});

Und so ändere ich die Klasse dynamisch:

$(model.get('mapPin')._icon).find('.org-status').attr('class', 'org-status ' + model.getGroupStatus());

Ich dachte, dass ich zugreifen könnte _icon von der Rückkehr von getAllChildMarkers wie ich oben, aber es scheint nicht da zu sein.

Answer 1

Sie können verwenden getAllChildMarkers um alle Marker im Cluster zu erhalten.Sobald Sie einen Marker haben, können Sie mit auf seine Klasse zugreifen marker.options.icon.options.className.Sie können auf den HTML-Code zugreifen mit marker.options.icon.options.html

Hier ist ein Code, der Unterstriche verwendet.js funktioniert, um die Anzahl der Marker für jede Klasse zu zählen, den beliebtesten zu finden und diese Klasse für den Cluster-Marker zu verwenden.

var markers = L.markerClusterGroup({
  iconCreateFunction: function (cluster) {
    var childMarkers = cluster.getAllChildMarkers();
    // count how many there are of each class
    var counts = _.countBy(childMarkers, function(marker) {
      // class at icon level
      //return marker.options.icon.options.className;
      // class inside html
      return $(marker.options.icon.options.html).attr('class');
    });
    // get the class with the highest count
    var maxClass = _.invert(counts)[_.max(counts)];
    // use this class in the cluster marker
    return L.divIcon({ html: cluster.getChildCount(), className: maxClass });
  },
});