Выдвинуть маркер из слоя маркера кластера

У меня на карте города около 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 точек в каждом процессе выделения.


person davidzoli    schedule 13.10.2016    source источник


Ответы (1)


Если вы еще не нашли решение, вас может заинтересовать _1 _ метод.

Он будет панорамировать и масштабировать карту по мере необходимости, пока данный маркер не станет видимым, возможно, спайдергинг группы кластеров.

Поведение немного отличается от того, что вы реализовали, поскольку оно не «извлекает» маркер из группы, а просто регулирует вид карты до тех пор, пока группа кластера естественным образом не разделит маркеры и данный маркер не станет видимым.

person ghybs    schedule 11.11.2016