如何使 MarkerClusters 使用窗格

Question

假设我们有以下地图：

在上面的示例中，我们有 2 个标记集群组（clustRed 和 clustYellow）和这些组之外的单个标记。

我希望红色标记集群组在缩小时位于黄色标记集群组的顶部（更高的 z-index）。

我已经创建了 3 个自定义窗格以将每个集群组附加到不同的窗格，但窗格似乎不适用于集群组（或者我没有找到使它们工作的方法）。

我尝试了什么：

var clustRed = L.markerClusterGroup({pane:'hilevel'});
var clustYellow = L.markerClusterGroup({pane:'lowlevel'});

我只能使窗格与单个标记一起工作：

L.circleMarker([45,5],{pane:"midlevel"}).addTo(map);

如何让 Leaflet.markercluster 使用我指定的 pane？

Answer 1

注：此功能为now available as clusterPane option. Added since version 1.1.0。

var clustRed = L.markerClusterGroup({clusterPane: 'hilevel'});

尽管有Layer Groups in Leaflet (including the MarkerClusterGroup from Leaflet.markercluster plugin) inherit from the Layer base class, which indeed provide the pane选项，任何添加到它们的子层仍然使用它们自己指定的pane，如果有的话，或者使用默认的（即overlayPane）。

仍未决定是否应更改该行为（参见 Leaflet issue #4279）。

在 MarkerClusterGroup 的情况下，后者甚至实际上 自己生成 标记，使用 L.MarkerCluster class，代表一组个人标记。

根据您的描述，您希望将那些生成的标记插入到特定的窗格中。

在那种情况下，您可以非常简单地覆盖 L.MarkerCluster class 的 initialize 方法，以便它使用您想要的任何 pane。在您的情况下，您会阅读 MarkerClusterGroup 的选项 pane member:

L.MarkerCluster.include({
  initialize: function(group, zoom, a, b) {

    var latLng = a ? (a._cLatLng || a.getLatLng()) : new L.LatLng(0, 0),
      options = {
        icon: this
      },
      pane = group.options.pane; // Read the MarkerClusterGroup's pane, if any.

    // If a pane is specified, add it to the MarkerCluster's options.
    if (pane) {
      options.pane = pane;
    }

    L.Marker.prototype.initialize.call(this, latLng, options);

    // Remaining code is unchanged compared to original method.
    this._group = group;
    this._zoom = zoom;
    this._markers = [];
    this._childClusters = [];
    this._childCount = 0;
    this._iconNeedsUpdate = true;
    this._boundsNeedUpdate = true;
    this._bounds = new L.LatLngBounds();
    if (a) {
      this._addChild(a);
    }
    if (b) {
      this._addChild(b);
    }
  }
});

修补后，生成的标记簇将使用您在实例化 MarkerClusterGroup 时指定的 pane，如您的问题所示：

var clustRed = L.markerClusterGroup({pane:'hilevel'});
var clustYellow = L.markerClusterGroup({pane:'lowlevel'});

已更新 JSFiddle：https://jsfiddle.net/fcumj09w/9/

如何使 MarkerClusters 使用窗格

How to make MarkerClusters use panes

javascript

z-index

panes

leaflet

leaflet.markercluster