Color del grupo de folletos según los iconos del interior
-
22-12-2019 - |
Pregunta
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í.
Solución
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 });
},
});