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

【问题标题】：How to set the zIndex layer order for geoJson layers?如何为 geoJson 图层设置 zIndex 图层顺序？
【发布时间】：2017-02-07 14:44:13
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

标签： leaflet z-index mapbox geojson

【解决方案1】：

对于矢量几何图形无法做到这一点。

zIndex 是 HTMLElements 的属性，矢量几何图形（线和多边形）被渲染为 SVG 元素，或以编程方式渲染为 <canvas> 绘制调用。这两种方法没有zIndex 的概念，所以唯一有效的是将元素推到SVG 组的顶部（或底部）或<canvas> 绘制序列。

另外，提醒L.GeoJSON 只是L.LayerGroup 的一种特定类型，在您的情况下包含L.Polygon 的实例。此外，如果您阅读Leaflet's documentation about the setZIndex() method on L.LayerGroup：

在该组中包含的每一层上调用 setZIndex，传递 z-index。

那么，L.Polygons 有 setZIndex() 方法吗？不，所以在他们的包含组中调用它没有任何作用。不过，它将对该组中包含的任何L.GridLayers 产生影响。

回到你的问题：

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

看起来您正在寻找的东西是地图窗格。请阅读map panes tutorial。

【讨论】：

【解决方案2】：

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

创建panes:var myPane = map.createPane("myPaneName")
如有必要，设置窗格元素的类/z-index：myPane.style.zIndex = 450（参考z-index values of built-in panes）
创建图层时，指定其目标pane 选项：L.rectangle(corners, { pane: "myPaneName" })
通过L.geoJSON 工厂构建时，您可以使用onEachFeature 选项循环遍历您的功能，以克隆具有指定目标pane 的层。

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

【讨论】：

【解决方案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) 正在工作

【讨论】：