Wie wird die zIndex-Layer-Reihenfolge für geoJson-Layer festgelegt?

Question

Ich möchte, dass bestimmte Ebenen immer übereinander liegen, egal in welcher Reihenfolge sie zur Karte hinzugefügt werden. Ich kenne bringToFront(), aber es entspricht nicht meinen Anforderungen. Ich möchte den zIndex dynamisch basierend auf Eigenschaften festlegen.

Prospekt hat die Methode setZIndex(), aber das funktioniert offenbar nicht für GeoJSON Schichten: https://jsfiddle.net/jw2srhwn/

Irgendwelche Ideen?

Answer 1

Für Vektorgeometrien nicht möglich.

zIndex ist eine Eigenschaft von HTMLElement s, und Vektorgeometrien (Linien und Polygone) werden als SVG-Elemente gerendert, oder programmatisch als <canvas> Zeichenaufrufe. Diese beiden Methoden haben kein Konzept von zIndex, so dass das einzige, was funktioniert, ist, Elemente nach oben (oder unten) der SVG-Gruppe oder <canvas> Zeichnungsfolge zu schieben.

Auch daran erinnern, dass L.GeoJSON ist nur eine bestimmte Art von L.LayerGroup, in Ihrem Fall mit Instanzen von L.Polygon. wenn Sie Des Weiteren beachten Sie Leaflet's documentation about the setZIndex() method on L.LayerGroup:

fordert setZIndex auf jeder Ebene in dieser Gruppe enthalten sind, vorbei an den Z-Index.

Also, haben L.Polygon s eine setZIndex() Methode? Nein. Also das in ihrer Gruppe zu nennen, tut nichts. Es wird jedoch Auswirkungen auf alle in dieser Gruppe enthaltenen L.GridLayer s haben.

kommen, um Ihr Problem zurück:

Ich möchte bestimmte Schichten haben, immer von anderen oben zu sein, egal in welcher Reihenfolge sie auf die Karte hinzugefügt werden.

Sieht aus, als ob das, was Sie suchen, Kartenfenster ist. Lesen Sie die map panes tutorial.

Answer 2

Dies ist einer der Gründe für die Implementierung benutzerdefinierter "Bereiche" in Leaflet 1.0 (im Vergleich zu Versionen 0.x).

1. erstellen panes: var myPane = map.createPane("myPaneName")
2. , falls erforderlich, die Klasse/z-Index des Elements Scheibe: myPane.style.zIndex = 450 (siehe z-index values of built-in panes)
3. Wenn Ihre Schichten zu schaffen, deren Ziel pane Option angeben: L.rectangle(corners, { pane: "myPaneName" })
4. Beim Erstellen über die Fabrik L.geoJSON können Sie Ihre Funktionen mit der Option durchlaufen, um Ihre Layer mit dem angegebenen Ziel pane zu klonen.

Demo: https://jsfiddle.net/3v7hd2vx/90/