2

假设我们有以下地图：

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

在上面的示例中，我们有 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我指定的？

4

1 回答 1

3

注意：此功能现在作为clusterPane选项提供。从1.1.0版开始添加。

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

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

是否应更改该行为仍未确定（请参阅传单问题 #4279）。

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

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

在这种情况下，您可以非常简单地覆盖类的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);
    }
  }
});

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

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

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

于 2017-05-17T19:23:55.467 回答