Leafletレイヤーのアイコンのカスタムの順序/ Z-index

マーカーがたくさんある単一のレイヤー（ポイント）があります。各ポイントには、定期的に更新される属性があります。見た目上の理由から、緯度が低いレイヤーが上になるように、リーフレットでレイヤーを並べ替えますが、クラスタリングの領域では、属性の値が高いレイヤーが上になるように並べ替えたいと思います。各マーカー/ポイントを個別のレイヤーに分割して描画順序をそのように強制せずにこれを行う方法はありますか？

誰かがより良い解決策を見つけるまで、ここで私は何をしますか...

気づいたように、リーフレットはピクセル位置を使用してzIndex（Marker.js内）を設定しています

pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
this._zIndex = pos.y + this.options.zIndexOffset;

私が提案するのは、setZIndexOffset（）を使用してリーフレットzIndexを元に戻すことです

zIndex = 100に設定するとします。

var pos = map.latLngToLayerPoint(marker.getLatLng()).round();
marker.setZIndexOffset(100 - pos.y);

少し不具合があります：マップがズームされるたびにそれを行う必要があります:(

以下はJSFiddleの例です（違いを確認するには、adjustZindex（）のコードにコメントを付けてください）

リーフレットの現在のバージョン（2017年初頭現在）には、マーカーのz-indexを許容するように設定できるデフォルト= 0のzIndexOffsetプロパティがあります。http://leafletjs.com/reference.html#marker-zindexoffset ズームなどで問題なく動作します。

このプラグインはトリックを行います：leaflet.forceZIndex.js

// Force zIndex of Leaflet
(function(global){
  var MarkerMixin = {
    _updateZIndex: function (offset) {
      this._icon.style.zIndex = this.options.forceZIndex ? (this.options.forceZIndex + (this.options.zIndexOffset || 0)) : (this._zIndex + offset);
    },
    setForceZIndex: function(forceZIndex) {
      this.options.forceZIndex = forceZIndex ? forceZIndex : null;
    }
  };
  if (global) global.include(MarkerMixin);
})(L.Marker);

使用するには：

var aMarker = L.marker([lat, lon], {
    icon: icon,
    title: title,
    forceZIndex: <Value> // This is forceZIndex value
})

forceZIndex宣言は、ZIndexが常にaMarker.options.forceZIndexから設定されることを保証します

どこかを更新してZIndex値を強制する

aMarker.setForceZIndex(<New Value>)

またはsetForceZIndex（null）を自動zIndex状態に：

aMarker.setForceZIndex(null);

1日の終わりまでに、forceZIndexオプションが宣言されていない場合、Markerは通常の動作で動作します。

現在利用可能な唯一のソリューションはハックでありpos.y、コード以外のものを使用したり、コードを大幅にリファクタリングしたりする場合、将来は機能しなくなる可能性があります。

これは、使いやすく、ズームが変わるたびに値を更新する必要がない、もう1つのシンプルなハックソリューションです。それはzIndexOffset実際を反映させますzIndex：

L.Marker.prototype.__setPos = L.Marker.prototype._setPos;
L.Marker.prototype._setPos = function ()
{
    L.Marker.prototype.__setPos.apply(this, arguments);
    this._zIndex = this.options.zIndexOffset;
    this._resetZIndex();
};

次に、zIndexを100に設定する場合は、次のように使用します。

marker.setZIndexOffset(100);