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

Question

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

bringToFront()

，但不符合我的要求。我想根据属性动态设置 zIndex。

Leaflet 有方法

setZIndex()

，但这显然不适用于 geoJson 层： https://jsfiddle.net/jw2srhwn/

有什么想法吗？

Answer 1

无法对矢量几何进行操作。

zIndex

是

HTMLElement

的属性，矢量几何图形（线和多边形）被渲染为 SVG 元素，或以编程方式渲染为

<canvas>

绘制调用。这两种方法没有

zIndex

的概念，因此唯一有效的是将元素推送到 SVG 组的顶部（或底部）或

<canvas>

绘制序列。

另外，请记住

L.GeoJSON

只是

L.LayerGroup

的特定类型，在您的情况下包含

L.Polygon

的实例。此外，如果您阅读 Leaflet 关于

setZIndex()

 上的 

L.LayerGroup 方法的文档：

在该组中包含的每个图层上调用

setZIndex

，并传递 z 索引。

那么，

L.Polygon

有

setZIndex()

方法吗？不。所以在它们的包含组中调用它没有任何作用。不过，它会对该组中包含的任何

L.GridLayer

产生影响。

回到你的问题：

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

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

Answer 2

这是在 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

   选项循环遍历您的功能，以克隆具有指定目标

   pane

   的图层。

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

Answer 3

对于正在搜索Z-Index的人们

所有路径图层（因此除了标记之外的所有图层）都没有 z 索引，因为 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)

  正在工作