Colore del grappolo del fogliettolo basato sulle icone dentro

Question

Ho dei perni sulla mia mappa dei foglie.js in cui l'immagine è determinata dallo stato dell'oggetto che rappresentano. Ad esempio, gli utenti online e offline - online sono verdi e offline sono rossi. Lo faccio aggiungendo una classe al divicone e quindi controlla le immagini con CSS.

Ora ho aggiunto il miraggio del marker alla mia mappa. Quello che voglio fare è determinare il colore del cluster dal maggioranza di stato 'all'interno del cluster. La mia prima idea è stata quella di fare qualcosa del genere:

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: /* ?? */ });
    }
});

.

Ma sfortunatamente non sono in grado di accedere agli elementi HTML dall'array restituito da getAllChildMarkers.

Qualcuno ha qualche idea su come potrei essere in grado di farlo? O un modo per ottenere l'elemento HTML del PIN?

Grazie

Modifica:

Ecco dove creo i miei perni della mappa (assegnati all'attributo mapPin Model Backbone):

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

.

Ed ecco come cambia la classe dinamicamente:

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

.

Ho pensato che sarei stato in grado di accedere a _icon dal ritorno del getAllChildMarkers come lo faccio sopra, ma non sembra essere lì.

Answer 1

È possibile utilizzare getAllChildMarkers per ottenere tutti i marcatori nel cluster.Una volta che hai un marker, è possibile accedere alla sua classe con marker.options.icon.options.className.È possibile accedere all'HTML con marker.options.icon.options.html

Ecco alcuni codici che utilizzano le funzioni di Inderscore.js per contare il numero di marcatori con ogni classe, trova quello che è più popolare e utilizzare quella classe per il marker del cluster.

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

.