Как заставить MarkerClusters использовать панели

Question

Допустим, у нас есть следующая карта:

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

В приведенном выше примере у нас есть 2 группы кластеров маркеров (clustRed и clustYellow) и один маркер за пределами этих групп.

Я хочу, чтобы красная группа кластеров маркеров находилась сверху (более высокий z-индекс) желтой группы кластеров маркеров при уменьшении масштаба.

Я создал 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

Примечание: эта функциональность теперь доступна как clusterPane вариант. Добавлено с версии 1.1.0.

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

---

Хотя группы слоев в Leaflet (включая MarkerClusterGroup из плагина https://github.com/Leaflet/Leaflet.markercluster) наследуются от 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/