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

Question

我希望某些图层总是在其他图层之上，无论以哪种顺序添加到地图中。我知道有 bringToFront() 方法，但它不符合我的要求。我希望可以基于属性动态设置zIndex。

Leaflet 有 setZIndex() 方法，但似乎不适用于 geoJson 图层：https://jsfiddle.net/jw2srhwn/

有什么想法吗？

- bob

Answer 1

对于矢量几何图形无法完成。

zIndex是HTMLElement的属性，而矢量几何图形（线和多边形）被呈现为SVG元素，或通过<canvas>绘制调用进行编程。这两种方法都没有zIndex的概念，因此唯一有效的方法是将元素推到SVG组或<canvas>绘制序列的顶部（或底部）。

另外，请注意L.GeoJSON只是L.LayerGroup的特定类型，在您的情况下包含L.Polygon实例。此外，如果您阅读Leaflet关于L.LayerGroup上的setZIndex()方法的文档：

在此组中包含的每个图层上调用setZIndex，传递z-index。

那么，L.Polygon是否有setZIndex()方法？没有。因此，在其所属组中调用该方法不起作用。但它会影响该组中包含的任何L.GridLayer。

回到您的问题：

我希望某些图层始终位于其他图层的顶部，无论它们以何种顺序添加到地图中。

看起来您要找的是地图窗格。请阅读地图窗格教程。

- IvanSanchez

Answer 2

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

1. 创建panes：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选项循环遍历功能以克隆具有指定目标pane的图层。

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

- ghybs

Answer 3

对于正在寻找有关Z-Index的人

所有路径图层（除了标记以外的所有图层）都没有z-index，因为svg图层有一个固定的顺序。第一个元素先绘制。因此最后一个元素被绘制在顶部。 @IvanSanchez很好地解释了为什么zIndex不起作用。

您可以使用layer.bringToBack()或layer.bringToFront()来控制顺序。

通过这段代码，您将拥有更多控制图层顺序的选项。

L.Path.include({
    getZIndex: function() {
        var node = this._path;
        var index = 0;
        while ( (node = node.previousElementSibling) ) {
            index++;
        }
        return index;
    },
    setZIndex: function(idx) {
        var obj1 = this._path;
        var parent = obj1.parentNode;
        if(parent.childNodes.length < idx){
            idx = parent.childNodes.length-1;
        }
        var obj2 = parent.childNodes[idx];
        if(obj2 === undefined || obj2 === null){
            return;
        }
        var next2 = obj2.nextSibling;
        if (next2 === obj1) {
            parent.insertBefore(obj1, obj2);
        } else {
            parent.insertBefore(obj2, obj1);
            if (next2) {
                parent.insertBefore(obj1, next2);
            } else {
                parent.appendChild(obj1);
            }
        }
    },
    oneUp: function(){
        this.setZIndex(this.getZIndex()+1)
    },
    oneDown: function(){
        this.setZIndex(this.getZIndex()-1)
    }
});

接下来您可以调用

• polygon.oneUp()：向上移动一个层级
• polygon.oneDown()：向下移动一个层级
• polygon.setZIndex(2)：设置该对象的层级为第二层
• polygon.getZIndex()：获取该对象的层级
• 现在layergroup.setZIndex(2)也可正常工作了

- Falke Design