Leaflet Markercluster:免于聚类的标记 [英] Leaflet Markercluster: Exempt marker from clustering

问题描述

缩小时如何让带有打开的弹出窗口的标记崩溃成簇?

How can one exampt a marker with open popup from collapsing into a cluster when zooming out?

我正在使用>传单和<在<中设置的a href ="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js" rel ="nofollow noreferrer" title ="markercluster"> markercluster a href ="https://jsfiddle.net/sghL4z96/38/" rel ="nofollow noreferrer" title =本示例">本示例:

I am using leaflet and markercluster as set up in this example:

HTML:

<div id="map"></div>

CSS:

html,
body {
  height: 100%;
}

#map {
  height: 100%;
}

JS:

const map = L.map('map', {
    zoom: 5,
    center: [0,0],
    maxZoom: 18
});
const clustered = L.markerClusterGroup();
map.addLayer(clustered);

const m1 = L.marker(L.latLng(0,0));
m1.addTo(clustered);
m1.bindPopup('one');

const m2 = L.marker(L.latLng(0,1));
m2.addTo(clustered);
m2.bindPopup('two');

const m3 = L.marker(L.latLng(1,0));
m3.addTo(clustered);
m3.bindPopup('three');

只要标记的弹出窗口是打开的，我想暂时将标记免于崩溃成簇.对于该示例，这意味着:

I would like to temporarily exempt a marker from collapsing into a cluster as long as its popup is open. For the example, this would mean:

1. 放大直到看到各个标记.

1. Zoom in until you see the individual markers.

单击一个以打开一个弹出窗口.

Click one to open a popup.

再次放大.

弹出"标记以及打开的弹出窗口应可见.其余标记应折叠.

The "popped up" marker should be visible, together with the open popup. The remaining markers should collapse.

1. 关闭弹出窗口后，标记应消失在群集中.

我试图将标记暂时移到 popupopen (和 popupclose )上的地图上(但又移回)，但这不起作用:

I've tried to temporarily move the marker to the map (and back) on popupopen (and popupclose), but this does not work:

map.on('popupopen', function(e) {
    const m = e.popup._source;
    clustered.removeLayer(m);
    map.addLayer(m);
});
map.on('popupclose', function(e) {
    let m = e.popup._source;
    map.removeLayer(m);
    clustered.addLayer(m);
});

有什么想法吗?

推荐答案

第一次尝试不起作用的直接原因是，当您尝试从集群中删除标记 m 时 MarkerClusterGroup(MCG)( clustered.removeLayer(m))，它会关闭Marker弹出窗口，从而触发地图"popupclose" 事件，该事件随后会重新-将标记添加到MCG中.

The immediate reason why your first attempt does not work, is that when you try removing your Marker m from your clustered MarkerClusterGroup (MCG) (clustered.removeLayer(m)), it closes the Marker popup, hence fires the map "popupclose" event, which in turn re-adds your Marker into your MCG.

这很容易解释为什么您的第二次尝试(在您的答案中)有效的原因:您现在在另一个MCG上而不是在地图上监听"popupclose" 事件，因此，当您从初始MCG，它不会在其他MCG上触发事件.

This easily explains why your 2nd attempt (in your answer) works: you now listen to the "popupclose" event on another MCG instead of on the map, therefore when your remove the Marker from the initial MCG, it does not fire the event on that other MCG.

以 Layer Group 替换另一个MCG的事实并没有工作仅仅是因为后者不处理事件委托，与功能组.因此，您可以简单地将要素组用作其他组，以确保您的标记将永远无法聚类.

The fact that replacing the other MCG by a Layer Group does not work is simply because the latter does not handle event delegation, on the contrary of a Feature Group. Therefore you could simply use a Feature Group as your other Group, in order to make sure your Markers will never be able to cluster.

更新的JSFiddle: https://jsfiddle.net/sghL4z96/69/

Updated JSFiddle: https://jsfiddle.net/sghL4z96/69/

这篇关于Leaflet Markercluster:免于聚类的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！