Pemesanan kustom / z-indeks ikon di lapisan Leaflet

Saya memiliki satu layer (poin) dengan banyak spidol. Setiap titik memiliki atribut yang diperbarui secara berkala. Saya mengerti dengan Leaflet menyortir lapisan-lapisan sedemikian sehingga lapisan bawah yang berada di atas karena alasan estetika, tetapi saya ingin menyusun ulang lapisan tersebut sehingga di area pengelompokan, lapisan dengan nilai lebih tinggi pada atribut berada di atas. Apakah ada cara untuk melakukan ini tanpa harus membagi masing-masing penanda / titik menjadi lapisan individu dan memaksa urutan menggambar seperti itu?

Sampai seseorang menemukan solusi yang lebih baik, inilah yang akan saya lakukan ...

Seperti yang Anda perhatikan, leaflet menggunakan posisi piksel untuk mengatur zIndex (dalam Marker.js)

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

Apa yang saya sarankan adalah untuk membatalkan leaflet zIndex menggunakan setZIndexOffset ()

Katakanlah Anda ingin mengatur zIndex = 100, Anda akan melakukannya

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

Ada sedikit kesalahan: Anda harus melakukannya setiap kali peta diperbesar :(

Berikut ini adalah contoh JSFiddle (komentar kode di AdjustZindex () untuk melihat perbedaannya)

Versi leaflet saat ini (per awal 2017) memiliki properti zIndexOffset dengan default = 0 yang dapat diatur untuk menghapus indeks-z marker. http://leafletjs.com/reference.html#marker-zindexoffset Berfungsi dengan baik dengan zooming dan everthing.

Plugin ini akan melakukan trik: 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);

Menggunakan:

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

Deklarasi forceZIndex akan memastikan bahwa ZIndex akan selalu ditetapkan dari aMarker.options.forceZIndex

Perbarui di suatu tempat untuk memaksa kembali nilai ZIndex

aMarker.setForceZIndex(<New Value>)

Atau setForceZIndex (null) ke status zIndex otomatis:

aMarker.setForceZIndex(null);

Pada akhir hari, jika tidak ada opsi forceZIndex yang dideklarasikan, Marker akan bekerja dengan perilaku normal.

Satu-satunya solusi yang tersedia saat ini adalah peretasan dan mungkin rusak di masa depan, jika mereka memutuskan untuk menggunakan sesuatu yang lain daripada pos.yatau sangat memperbaiki kode.

Berikut ini adalah solusi peretasan sederhana lainnya yang lebih mudah digunakan dan tidak perlu memperbarui nilai setiap kali zoom diperbesar. Itu membuat zIndexOffsetmencerminkan yang sebenarnya 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();
};

Kemudian jika Anda ingin mengatur zIndex ke 100, cukup gunakan:

marker.setZIndexOffset(100);