时间戳

首页 > 解决方案 > Leaflet 和 MarkerCluster - 当前打开弹出窗口时不执行聚类？

javascript - Leaflet 和 MarkerCluster - 当前打开弹出窗口时不执行聚类？

问题描述

我有一个 Leaflet + MarkerCluster 应用程序，它在地图上有一些标记和一些逻辑，可以在打开与标记关联的弹出窗口时（单击标记）将图像叠加层添加到地图。我用来bindPopup()向标记添加弹出窗口。

markers.on('popupopen', function (e) {

    var b = e.layer.boundary;

    if (b) {

    //take some parameters for the overlay from an array that is passed as a
    //property of the marker

    var image = b[0];
    var LatStart = b[1];
    var LngStart = b[2];
    var LatEnd = b[3];
    var LngEnd = b[4];

//doOverlay() creates the overlay
var overlay = doOverlay(image,LatStart,LngStart,LatEnd,LngEnd);

//add the overlay to the map
map.addLayer(overlay);

//make the overlay widely-accessible as a window property
window.overlay = overlay;

}

doOverlay() 包含一些创建 ImageOverlay 的基本逻辑：

function doOverlay(image,LatStart,LngStart,LatEnd,LngEnd) {

  var bounds = new L.LatLngBounds (

  new L.LatLng(LatStart,LngStart),
  new L.LatLng(LatEnd,LngEnd));

var overlay = new L.ImageOverlay(image,
  bounds, {  
  pane: 'general'
});

    return overlay
}

但是，因为我使用 MarkerCluster 对集群中的标记进行分组，如果用户单击标记，获取弹出窗口并创建叠加层，然后他们缩小，就会发生集群，标记被集群，弹出窗口消失（但不会生成 popupclose 事件），我们最终会在地图上出现无法删除的重影图像覆盖。

在正常情况下，当用户关闭弹出窗口（或单击地图上的其他位置或另一个标记）时，会生成一个“popupclose”事件，我会删除图像层：

markers.on('popupclose', removeOverlay);

function removeOverlay() {

  if (window.overlay) {

  map.removeLayer(overlay);
  window.overlay=null;

  }

目前，我被迫监听每个“动画结束”事件（当地图上任何位置由 MarkerCluster 控制的集群发生任何变化时），然后删除图层并关闭弹出窗口，这是一种非常糟糕的方法，因为用户准备好缩放设置后，必须再次单击标记：

markers.on('animationend', function (e) {

    removeOverlay();

    map.closePopup();

});

标签： javascriptleafletleaflet.markercluster

解决方案

如果您希望您的标记及其弹出窗口保留在地图上并且不再由 MarkerClusterGroup 处理，那么一个简单的解决方案是在标记单击时将其从该组中删除（并将其直接添加到地图 + 打开弹出窗口）。

然后当弹出窗口关闭时，将标记重新添加到您的 MarkerClusterGroup 中（首先将其从地图中删除；如果它应该是可见的，Marker Cluster 会将其添加回来）。

至于丢失的“popupclose”事件，这确实可能是向 Leaflet.markercluster 或 Leaflet 报告的问题。

推荐阅读