Color del grupo de folletos según los iconos del interior

Question

Tengo pines en mi mapa leaflet.js donde la imagen está determinada por el estado del objeto que representan.Por ejemplo, usuarios en línea y fuera de línea: los que están en línea son verdes y los que están fuera de línea son rojos.Hago esto agregando una clase al divIcon y luego controlo las imágenes con CSS.

Ahora agregué agrupación de marcadores a mi mapa.Lo que quiero hacer es determinar el color del grupo por el mayoría de estatus' dentro del cluster.Mi primera idea fue hacer algo como esto:

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

Pero desafortunadamente no puedo acceder a los elementos HTML de la matriz devuelta por getAllChildMarkers.

¿Alguien tiene alguna idea sobre cómo podría hacer esto?¿O una forma de obtener el elemento HTML del pin?

Gracias

EDITAR:

Aquí es donde creo mis pines de mapa (asignados a los pines de mi modelo de red troncal). mapPin atributo):

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

Y así es como cambio la clase dinámicamente:

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

Pensé que podría acceder _icon del regreso de getAllChildMarkers como hago arriba, pero no parece estar allí.

Answer 1

Puede usar getAllChildMarkers para obtener todos los marcadores en el clúster.Una vez que tenga un marcador, puede acceder a su clase con marker.options.icon.options.className.Puede acceder al HTML con marker.options.icon.options.html

Aquí hay algún código que utiliza funciones de underscore.js para contar la cantidad de marcadores con cada clase, encuentre el que sea más popular, y use esa clase para el marcador de clúster.

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