Question

我在城市地图上有大约1000个标记。它们与markercluster聚集在一起。在地图下面有一个（过滤的）列表。如果单击列表元素，地图应显示并突出显示列表元素的标记。

问题是，我应该如何从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个点之外还有其他方法。

Answer 1

如果您还没有找到解决方案，可能会对clusterGroup.zoomToShowLayer(marker, callback)方法感兴趣。

它将根据需要平移和缩放地图，直到给定的标记可见，可能会对群集组进行捕捉。

行为与您实施的行为略有不同，因为它不从组中“提取”标记，只是调整地图视图，直到群集组自然地分割标记并且给定标记变得可见。

从标记群集层弹出标记

1 个答案: