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

Question

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

我已经在这里搜索了解决方案，但大多数都是关于瓷砖图层或地图窗格的（我认为只适用于另一个版本的leaflet 1.0）。

我想能够切换线条并将它们始终置于点下方（多边形与折线下方相同）。

我猜我必须做一些关于setZIndex或bringToFront()的操作，但我不确定从哪里开始。

任何帮助将不胜感激。谢谢。

- Alex G.

Answer 1

简单的解决方案是使用 Leaflet 1.0，它为您提供了 map.createPane("paneName") 功能。因此，您可以创建像“polygonsPane”、“linesPane”和“pointsPane”这样的面板，并使用它们的 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() 和/或 bringToBack() 将它们重新排序到您需要的任何顺序。

您可能会对这种情况感兴趣: https://gis.stackexchange.com/questions/166252/geojson-layer-order-in-leaflet-0-7-5/167904#167904

- ghybs

---

欢迎，我很高兴你达成了目标！ :-) 请注意，Stack Overflow 社区感谢他人的方式也包括接受帮助你的答案。这也告诉社区你的问题已经解决。 - ghybs

好的，已经接受了！抱歉，这是我的第一篇帖子，所以我并不是很清楚该怎么做。 - Alex G.