如何設置geoJson圖層的zIndex圖層順序？

Question

我希望某些圖層始終位於其他圖層上，而不管圖層的添加順序如何。 我知道bringToFront()，但它不符合我的要求。我想根據屬性動態設置zIndex。

單張有方法setZIndex()，但這顯然不適合以GeoJSON圖層： https://jsfiddle.net/jw2srhwn/

任何想法？

Answer 1

無法完成矢量幾何圖形。

zIndex是HTMLElement s的屬性，矢量幾何（線和多邊形）呈現爲SVG元素，或以編程方式呈現爲<canvas>繪製調用。這兩種方法沒有zIndex的概念，所以唯一可行的是將元素推送到SVG組的頂部（或底部）或繪製序列。

此外，請注意L.GeoJSON只是一種特定類型的L.LayerGroup，在您的情況下包含L.Polygon的實例。此外，如果你看過Leaflet's documentation about the setZIndex() method on L.LayerGroup：

呼叫setZIndex該組中包含每一個層上，路過的z-index。

那麼，做L.Polygon s有setZIndex()方法嗎？所以，在他們所在的小組中調用它什麼都不會做。不過，它將對該組中包含的任何L.GridLayer產生影響。

再回到你的問題：

我想有一定的層總是在別人的頂部，無論以何種順序將它們添加到地圖中。

看起來你正在尋找的東西是地圖窗格。請閱讀map panes tutorial。

Answer 2

這是在Leaflet 1.0中實現用戶定義的「窗格」（與0.x版本相比）的原因之一。

1. 創建panes：var myPane = map.createPane("myPaneName")
2. 如有必要，設置窗格元素的class/z索引：myPane.style.zIndex = 450（參見z-index values of built-in panes）
3. 在創建圖層，指定其目標pane選項：L.rectangle(corners, { pane: "myPaneName" })
4. 當通過L.geoJSON工廠構建時，可以使用onEachFeature選項循環訪問您的功能，以指定目標pane克隆圖層。

演示：https://jsfiddle.net/3v7hd2vx/90/