Benutzerdefinierte Bestellung / Z-Index von Symbolen in der Faltblatt-Ebene

Ich habe eine einzelne Ebene (Punkte) mit einer Reihe von Markern. Jeder Punkt hat ein Attribut, das regelmäßig aktualisiert wird. Ich verstehe, dass Leaflet die Ebenen so sortiert, dass diejenigen mit niedrigerem Breitengrad aus ästhetischen Gründen oben liegen, aber ich möchte sie so neu anordnen, dass in Bereichen der Clusterbildung diejenigen mit höheren Werten im Attribut oben liegen. Gibt es eine Möglichkeit, dies zu tun, ohne jeden Marker / Punkt in eine einzelne Ebene aufteilen zu müssen und die Zeichenreihenfolge auf diese Weise zu erzwingen?

Bis jemand eine bessere Lösung findet, hier was ich tun würde ...

Wie Sie bemerkt haben, verwendet die Broschüre die Pixelposition, um zIndex festzulegen (in Marker.js).

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

Ich schlage vor, die Broschüre zIndex mit setZIndexOffset () rückgängig zu machen.

Angenommen, Sie möchten zIndex = 100 setzen, würden Sie tun

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

Es gibt eine kleine Panne: Sie müssen dies jedes Mal tun, wenn die Karte gezoomt wird :(

Hier ist ein JSFiddle-Beispiel (kommentieren Sie den Code in adjustZindex (), um den Unterschied zu sehen).

Die aktuelle Version der Broschüre (Stand Anfang 2017) verfügt über eine zIndexOffset-Eigenschaft mit dem Standardwert = 0, mit der der Z-Index eines Markers angepasst werden kann. http://leafletjs.com/reference.html#marker-zindexoffset Funktioniert gut mit Zoomen und allem.

Dieses Plugin macht den Trick: 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);

Benutzen:

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

Die forceZIndex-Deklaration stellt sicher, dass ZIndex immer über aMarker.options.forceZIndex festgelegt wird

Aktualisieren Sie es irgendwo, um den ZIndex-Wert zu erzwingen

aMarker.setForceZIndex(<New Value>)

Oder setzen SieForceZIndex (null) auf den automatischen zIndex-Status:

aMarker.setForceZIndex(null);

Wenn am Ende des Tages keine forceZIndex-Option deklariert ist, funktioniert Marker mit normalem Verhalten.

Die einzigen derzeit verfügbaren Lösungen sind hackig und können in Zukunft nicht mehr funktionieren, wenn sie sich dafür entscheiden, etwas anderes als pos.yden Code zu verwenden oder ihn stark umzugestalten .

Hier ist eine weitere einfache Hacky-Lösung, die einfacher zu verwenden ist und nicht bei jedem Zoomwechsel aktualisiert werden muss. Es macht das zIndexOffsetreflektieren das tatsächliche 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();
};

Wenn Sie zIndex auf 100 setzen möchten, verwenden Sie einfach:

marker.setZIndexOffset(100);