如何为geoJson图层设置zIndex图层顺序？

Question

我希望某些图层始终位于其他图层之上,无论它们以何种顺序添加到地图中.我知道bringToFront(),但它不符合我的要求.我想根据属性动态设置zIndex.

Leaflet有方法setZIndex(),但这显然不适用于geoJson层:https://jsfiddle.net/jw2srhwn/

有任何想法吗？

Answer 1

这是在 Leaflet 1.0（与版本 0.x 相比）中实现用户定义的“窗格”的原因之一。

1. 创建窗格：var myPane = map.createPane("myPaneName")
2. 如有必要，设置窗格元素的类/z-index：（myPane.style.zIndex = 450参考内置窗格的z-index值）
3. 创建图层时，指定它们的目标pane选项：L.rectangle(corners, { pane: "myPaneName" })
4. 在通过L.geoJSON工厂构建时，您可以循环使用您的功能，并onEachFeature选择使用指定的 target 克隆您的图层pane。

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

Answer 2

无法对矢量几何进行处理.

zIndex是HTMLElements 的属性,向量几何(线和多边形)呈现为SVG元素,或以编程方式呈现为<canvas>绘制调用.这两种方法没有概念zIndex,因此唯一有效的方法是将元素推送到SVG组的顶部(或底部)或<canvas>绘制序列.

另外,提醒这L.GeoJSON只是一个特定类型L.LayerGroup,在您的情况下包含实例L.Polygon.此外,如果您阅读Leaflet关于该setZIndex()方法的文档L.LayerGroup:

调用setZIndex该组中包含的每个层,传递z-index.

那么,L.Polygon有setZIndex()办法吗？不.所以在他们的包含组中调用它什么都不做.但是,它会L.GridLayer对该组中包含的任何内容产生影响.

回到你的问题:

我希望某些图层始终位于其他图层之上,无论它们以何种顺序添加到地图中.

看起来你正在寻找的是地图窗格.请阅读地图窗格教程.