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

Posted 2023-02-16

【中文标题】如何为 geoJson 图层设置 zIndex 图层顺序？

【英文标题】：How to set the zIndex layer order for geoJson layers?

【发布时间】：2017-02-07 14:44:13

【问题描述】：

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

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

有什么想法吗？

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