Leaflet Overlay-Reihenfolge (Punkte, Linien und Polygone)

Question

Ich arbeite mit dem Leaflet.StyledLayerControl Plugin und möchte meine Ebenen so einstellen, dass Polygone immer nach hinten geschoben werden, Linien über den Polygonen und Punkte über den Linien.

Ich habe hier nach Lösungen gesucht, aber die meisten beziehen sich auf Fliesenleger oder Kartenscheiben (die ich denke nur mit einer anderen Version von Prospekt 1.0 arbeiten).

Ich möchte Linien ein- und ausschalten und sie immer unter Punkten haben (gleich mit Polygonen unter Polylinien).

Ich vermute, ich muss etwas mit setZIndex oder bringToFront() tun, aber ich bin mir nicht sicher, wo ich anfangen soll.

Jede Hilfe wäre willkommen. Vielen Dank.

Answer 1

Die einfache Lösung ist wirklich zu verwenden Leaflet 1.0, die Sie mit map.createPane("paneName") Funktionalität bietet. Sie erstellen also wie "polygonsPane", "linesPane" und "pointsPane", die Sie mit der Option pane für jeden Ihrer Vektor-/Shape-Layer angeben.

Einmal festgelegt, können Sie sie zu/von map hinzufügen/entfernen, und sie werden immer in den angegebenen Bereich eingefügt, daher die Reihenfolge des Bereichs respektieren.

// Create necessary panes in correct order (i.e. "bottom-most" first). 
map.createPane("polygonsPane"); 
map.createPane("linesPane"); 
map.createPane("pointsPane"); 

L.polygon([/* coords */], { pane: "polygonsPane" }).addTo(map); 
L.polyline([/* coords */], { pane: "linesPane" }).addTo(map); 
L.circleMarker([/* coords */], { pane: "pointsPane" }).addTo(map); 

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

Mit Prospekt 0,7, Sie wissen, dass alle Vektorebene Teil der gleichen SVG Container sind, angehängt wird, wenn zur Karte hinzugefügt, damit sie an der Spitze aller zuvor hinzugefügt erscheinen Vektoren. Dann müssen Sie und/oder bringToBack() verwenden, um sie in der von Ihnen gewünschten Reihenfolge neu zu sortieren.

Sie könnten für diesen Fall in diesem Posten interessiert sein: https://gis.stackexchange.com/questions/166252/geojson-layer-order-in-leaflet-0-7-5/167904#167904