使用 Marker Cluster 插件时突出显示 Leaflet 地图项

Question

我在 AngularJS 应用程序上使用 Leaflet 和 Marker Cluster 插件。

在选择地图的项目时，我需要突出显示它。因为我使用的是 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取消设置该层的类 - 它只是未定义。

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

哦，我的地图项保存为新的 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. 标记从群集中检索或添加到群集时的移动可能会打扰用户