javascript - 如何使 MarkerClusters 使用 Pane

Question

假设我们有以下 map :

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

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

当缩小时，我希望红色标记簇组位于黄色标记簇组的顶部(较高的 z 索引)。

我创建了 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(如果有)，或者使用默认 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/