Цвет кластера листовок на основе значков внутри
-
22-12-2019 - |
Вопрос
У меня на карте 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
как я делал выше, но его там нет.
Решение
Вы можете использовать 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 });
},
});