Question

我们说我们有以下地图：

在上面的例子中，我们有2个标记聚类组（clustRed和clustYellow）以及这些组之外的单个标记。

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

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

我尝试了什么：

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

我只能使用单个标记制作窗格：

pane

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

Answer 1

注意：此功能now available为clusterPane选项。自版本1.1.0添加。

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

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

尚未决定是否应更改此行为（请参阅Leaflet issue #4279）。

对于MarkerClusterGroup，后者甚至实际生成标记，使用L.MarkerCluster类，它代表一组单独的标记。

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

在这种情况下，您可以简单地覆盖L.MarkerCluster类的initialize方法，以便它使用您想要的任何pane。在您的情况下，您将阅读MarkerClusterGroup＆＃39;选项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/

如何使MarkerClusters使用窗格

1 个答案: