Цвет кластера листовок на основе значков внутри

Question

У меня на карте Leaflet.js есть булавки, изображение которых определяется статусом объекта, который они представляют.Например, онлайн-пользователи и офлайн-пользователи — онлайн — зеленые, а офлайн — красные.Я делаю это, добавляя класс в divIcon, а затем управляя изображениями с помощью CSS.

Теперь я добавил кластеризацию маркеров на свою карту.Я хочу определить цвет кластера по большинство статуса» внутри кластера.Моя первая идея заключалась в том, чтобы сделать что-то вроде этого:

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

Но, к сожалению, я не могу получить доступ к элементам HTML из массива, возвращенного из getAllChildMarkers.

У кого-нибудь есть идеи о том, как я могу это сделать?Или способ получить HTML-элемент булавки?

Спасибо

РЕДАКТИРОВАТЬ:

Здесь я создаю свои метки на карте (назначенные моей базовой модели). mapPin атрибут):

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

И вот как я динамически меняю класс:

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

Я думал, что смогу получить доступ _icon от возвращения getAllChildMarkers как я делал выше, но его там нет.

Answer 1

Вы можете использовать getAllChildMarkers чтобы получить все маркеры в кластере.Если у вас есть маркер, вы можете получить доступ к его классу с помощью marker.options.icon.options.className.Вы можете получить доступ к html с помощью marker.options.icon.options.html

Вот код, который использует функции underscore.js для подсчета количества маркеров каждого класса, поиска наиболее популярного и использования этого класса в качестве маркера кластера.

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