javascript - 如何使 MarkerClusters 使用 Pane

Question

假设我们有以下 map :

https://jsfiddle.net/fcumj09w/5/

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

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

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

我尝试过的:

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

我只能使 Pane 与单个标记一起工作:

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

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

Answer 1

注意:这个功能是now available作为clusterPane选项。自版本 1.1.0 添加.

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

---

虽然Layer Groups在 Leaflet 中(包括来自 Leaflet.markercluster 插件的 MarkerClusterGroup)继承自 Layer基类，它确实提供了 pane选项，添加到它们的任何子层仍然使用它们自己指定的 pane，如果有的话，或者使用默认的(即 overlayPane)。

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

在 MarkerClusterGroup 的情况下，后者甚至使用 L.MarkerCluster 类自己生成标记，它表示单个标记的集群。

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

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

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/