У меня на карте города около 1000 маркеров. Они сгруппированы по маркерному кластеру. Под картой находится (отфильтрованный) список. Если вы щелкнете по элементу списка, карта должна показать и выделить за вас маркер этого элемента списка.
Вопрос в том, как мне вывести только один маркер из слоя markercluster?
Теперь я использую clearLayers () и перебираю все точки и помещаю их - кроме выделенных - в массив, и это будет список для addLayers (). Выделенный значок будет добавлен непосредственно на карту. Так что этот не будет сгруппирован.
showGroup = function (group, highlightId) {
var marker,
list = [],
points = poiDataBase[group],
highlightClass,
highlightIcon;
clusterGroup.clearLayers();
$('.grouplist > li').remove();
if(highlighted) {
map.removeLayer(highlighted);
}
$.each(points, function(k,v) {
if(v.id != highlightId) {
marker = L.marker([v.coord1, v.coord2], {id: v.id})
.bindPopup(v.popup)
.on('click', function() {
map.setView(L.latLng(v.coord1, v.coord2), map.getZoom(), {animate: true, duration: 0.5});
showGroup (group, v.id);
});
list.push(marker);
highlightClass = '';
} else {
highlightIcon = new L.Icon.Default({iconUrl: 'marker-icon-red.png'});
marker = L.marker([v.coord1, v.coord2], {id: v.id, icon: highlightIcon})
.bindPopup(v.popup)
.on('click', function() {
map.setView(L.latLng(v.coord1, v.coord2), map.getZoom(), {animate: true, duration: 0.5});
showGroup (group, v.id);
});
highlighted = marker.addTo(map);
highlighted.openPopup();
highlightClass = ' highlighted';
}
$('<li>')
.text(v.name)
.data({pinid: v.id, coord1: v.coord1, coord2: v.coord2})
.attr({class: 'listitem-' + v.id + highlightClass})
.on('click', function(){
map.setView(L.latLng($(this).data('coord1'), $(this).data('coord2')), map.getZoom(), {animate: true, duration: 0.5});
showGroup(group, $(this).data('pinid'));
})
.appendTo($('.grouplist'));
});
clusterGroup.addLayers(list);
};
Это работает, но итерация требует дополнительного времени, и я надеюсь, что есть другой способ, кроме как касаться 1000 точек в каждом процессе выделения.