传单叠加顺序（点、线和多边形）

Question

我正在使用 Leaflet.StyledLayerControl 插件并希望设置我的图层，以便始终将多边形推到后面，多边形上方的线和线上方的点。

我在这里搜索了解决方案，但大多数是指 tilelayers 或地图窗格（我认为它们只适用于另一个版本的 leaflet 1.0）。

我希望能够打开和关闭线并让它们始终低于点（与折线下方的多边形相同）。

我想我必须用 setZIndex 或 bringToFront() 做点什么，但我不确定从哪里开始。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

真正的简单解决方案是使用 Leaflet 1.0，它为您提供 map.createPane("paneName") functionality. So you create like "polygonsPane", "linesPane" and "pointsPane", that you specify to each of your vector / shape layers using their pane 选项。

设置后，您可以将它们添加到地图或从地图中删除它们，并且它们将始终插入到指定的窗格中，因此尊重窗格的顺序。

// Create necessary panes in correct order (i.e. "bottom-most" first).
map.createPane("polygonsPane");
map.createPane("linesPane");
map.createPane("pointsPane");

L.polygon([/* coords */], { pane: "polygonsPane" }).addTo(map);
L.polyline([/* coords */], { pane: "linesPane" }).addTo(map);
L.circleMarker([/* coords */], { pane: "pointsPane" }).addTo(map);

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

使用 Leaflet 0.7，您知道所有矢量图层都是同一 SVG 容器的一部分，在添加到地图时被附加，因此它们出现在所有先前添加的矢量之上.然后你必须使用 bringToFront() and/or bringToBack() 将它们重新排序到你需要的任何顺序。

您可能对 post 那个案例感兴趣：https://gis.stackexchange.com/questions/166252/geojson-layer-order-in-leaflet-0-7-5/167904#167904

传单叠加顺序（点、线和多边形）

Leaflet overlay order (points, lines, and polygons)

javascript

overlay

layer

panes

leaflet