Question

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

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

有什么想法吗？

Answer 1

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

zIndex是HTMLElement s的属性，矢量几何（线和多边形）呈现为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.Polygon是否有setZIndex()方法？不。所以在他们的包含组中调用它什么都不做。但是，它会对该组中包含的任何L.GridLayer产生影响。

回到你的问题：

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

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

Answer 2

这是实施用户定义的＆＃34;窗格的原因之一。在Leaflet 1.0中（与版本0.x相比）。

创建panes：var myPane = map.createPane("myPaneName")
如有必要，请设置窗格元素的class / 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/

Answer 3

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

由于svg层具有固定顺序，因此所有路径层（因此所有标记除外）都没有z-index。首先绘制第一个元素。因此，最后一个元素被绘制在顶部。 @IvanSanchez很好地描述了为什么zIndex无法正常工作。

您可以使用layer.brintToBack()或layer.brintToFront()控制顺序。

有了该代码，您就有更多的选项来控制图层的顺序。

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)正在工作

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

3 个答案: