Cor do cluster de folhetos com base nos ícones internos

Question

Tenho pinos no meu mapa leaflet.js onde a imagem é determinada pelo status do objeto que eles estão representando.Por exemplo, usuários online e offline - online são verdes e offline são vermelhos.Faço isso adicionando uma classe ao divIcon e depois controlo as imagens com css.

Agora adicionei agrupamento de marcadores ao meu mapa.O que eu quero fazer é determinar a cor do cluster pelo maioria de status' dentro do cluster.Minha primeira ideia foi fazer algo assim:

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

Mas infelizmente não consigo acessar os elementos HTML do array retornado de getAllChildMarkers.

Alguém tem alguma idéia de como posso fazer isso?Ou uma maneira de obter o elemento HTML do pin?

Obrigado

EDITAR:

Aqui é onde eu crio meus pinos de mapa (atribuídos ao modelo de backbone 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]
});

E aqui está como eu mudo a classe dinamicamente:

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

Achei que conseguiria acessar _icon desde o retorno de getAllChildMarkers como fiz acima, mas não parece estar lá.

Answer 1

Você pode usar getAllChildMarkers para obter todos os marcadores no cluster.Depois de ter um marcador, você pode acessar sua classe com marker.options.icon.options.className.Você pode acessar o html com marker.options.icon.options.html

Aqui está um código que usa funções underscore.js para contar o número de marcadores com cada classe, encontrar aquele que é mais popular e usar essa classe para o marcador de 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 });
  },
});