leaflet - 使用 Marker Cluster 插件时突出显示 Leaflet map 项

Question

我在 AngularJS 应用程序上将 Leaflet 与 Marker Cluster 插件一起使用。

在 map 项目上进行选择时，我需要突出显示它。因为我使用的是 divIcons，所以我正在添加或删除类，如果项目不是标记，我还会设置颜色。

为此，我将最后单击的项目保存在内存中，以便在选择下一个项目时，我可以取消突出显示前一个项目并突出显示当前项目。

        // De-highlight previous item
        if (lastClickedLayer) {
            if (lastClickedLayer instanceof L.Marker) {
                lastClickedLayer._icon.classList.remove('marker-highlighted');
            }
            else {
                lastClickedLayer.setStyle({
                    color: (lastClickedLayer.feature.status === 'active') ? '#43A7E0' : '#EB7938'
                });
            }
        }

        // Highlight item on the map
        lastClickedLayer = e.layer;

        if (e.layer instanceof L.Marker) {
            e.layer._icon.classList.add('marker-highlighted');
        }
        else {
            e.layer.setStyle({
                color: '#32C9AC'
            });
        }

如果没有标记聚类，一切都会好起来的!当我缩小并获得一组当前标记(假设我先选择一个标记)然后放大回到该集群时，我选择的标记没有分配“标记突出显示”类。

Also, If I'm at the vey end of zoom-in and clusters are showing spider-webs of markers (or how they're called), when cluster in which is selected marker is closed, I can't seem取消设置该层的类 - 它只是未定义。

我怎样才能解决我的问题？

哦，我的 map 项目被保存为一个新的 L.MarkerClusterGroup()。

Answer 1

您可以尝试在标记被选中时从集群中移除标记...

markerCluster.removeLayer(selectedMarker);
map.addLayer(selectedMarker);

并在取消选择时将其放回集群......

map.removeLayer(selectedMarker);
markerCluster.addLayer(selectedMarker);

你可以看一个例子here显示单选

每次创建标记时，都会添加此点击处理程序......

        m.on('click', function(e) {
            if(selectedMarker != false) {
                map.removeLayer(selectedMarker);
                markerCluster.addLayer(selectedMarker);
                selectedMarker.setIcon(unselectedIcon);
                if(selectedMarker == e.target) {
                    console.log('clear selection');
                    selectedMarker = false;
                }
                else {
                    console.log('change selection');
                    selectedMarker = e.target;
                    selectedMarker.setIcon(selectedIcon);
                    markerCluster.removeLayer(selectedMarker);
                    map.addLayer(selectedMarker);
                }
            }
            else {
                console.log('new selection');
                selectedMarker = e.target;
                selectedMarker.setIcon(selectedIcon);
                markerCluster.removeLayer(selectedMarker);
                map.addLayer(selectedMarker);
            }
        });

但是，我可以看到 2 个缺点:

1. 如果你想要弹出窗口，你必须使用另一个事件
2. 从集群中取出或添加到集群时，标记的移动可能会打扰用户