in Programmierung

zIndex für Polyline in Leaflet (Workaround)

Ich stand vor einem kleinen mittelprächtigen Dilemma. Ich wollte drei Polyline-Layer auf der z-Achse geordnet anzeigen. Leider unterstützt Leaflet für Polylines keinen zIndex. (Näheres dazu hier.). Einzig werden die Methoden [cci lang=’javascript‘].bringToBack()[/cci] und [cci lang=’javascript‘].bringToFront()[/cci] angeboten, welche die Linie entweder auf der z-Achse ganz nach unten oder ganz nach oben verschiebt. Leider wirkt die Funktion nur im Moment der Layererstellung. Erstelle ich einen Layer später, wird der einfach über alle vorhandenen Objekte gemalt.

Wir haben also Layer A, B und C. A soll immer über B und B immer über C gemalt werden. Wie setzen wir es am dümmsten um?

Meine Lösung: Am Ende der Layererzeugung von Layer C wird gefragt, ob Layer B aktiv ist. Falls nein, wird gefragt, ob Layer A aktiv ist. Wird eines bejaht, wird der entsprechende Layer gelöscht und neu aufgebaut.

[cce lang=’javascript‘]
// Ende der Layererzeugung von Layer C
if(map.hasLayer(B)) {
map.removeLayer(B).addLayer(B);
}
else if(map.hasLayer(A)) {
map.removeLayer(A).addLayer(A);
}
[/cce]

Am Ende der Layererzeugung von Layer B wird das selbe, aber nur für Layer A gemacht.

Vorteil: Die Layer werden immer in der gewünschten Reihenfolge erzeugt.

Nachteil: Bei größeren Layern kommt es zu langen Ladezeiten und strapaziert die Nervendie CPU des Nutzers. Man sollte also immer abwägen, ob es sinnvoll ist und ob die Daten schnell genug gerendert werden können.