Colore del grappolo del fogliettolo basato sulle icone dentro
-
22-12-2019 - |
Domanda
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
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ì.
Soluzione
È 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 });
},
});
.