单张叠加顺序(点,线和多边形)

时间:2016-07-26 20:27:07

标签: javascript leaflet overlay layer panes

我正在使用Leaflet.StyledLayerControl插件,并希望设置我的图层,以便多边形总是被推到后面,多边形上方的线条和线条上方的点。

我在这里搜索过解决方案,但大多数都是指tilelayers或map panes(我认为只能使用另一个版本的leaflet 1.0)。

我希望能够打开和关闭线条并使它们始终位于点之下(与折线下方的多边形相同)。

我猜我必须对setZIndexbringToFront()做点什么,但我不知道从哪里开始。

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

1 个答案:

答案 0 :(得分:3)

简单的解决方案是使用 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