javascript - 如何更改Leaflet中的多边形 Pane (自定义 Pane )

Question

我想出了如何使用 the Working with Map Panes tutorial 在自定义 Pane 中创建多边形和 this Stack Overflow question及其相关的 Fiddle .

创建多边形后我可以将其切换到不同的(自定义) Pane 吗？

我在自定义 Pane 中创建一个多边形，如下所示:

// create custom pane
mymap.createPane('polygonView');
var polygonViewPane = mymap.getPane('polygonView');
polygonViewPane.style.zIndex = 300;
// with custom renderer 
var myrenderer = L.svg({
  pane: polygonViewPane
});

// create polygon in a custom pane (note the `renderer:myrenderer` or `pane:polygonViewPane` both work)
var myPoly = L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
], {
  fillOpacity: 1,
  pane: polygonViewPane
}).addTo(mymap);

看起来我应该能够使用以下内容切换 Pane :

// changes pane in options.pane, but appearance on the map is same
myPoly.setStyle({pane: polygonViewPaneTop});     
// also does not work (command fails without output in console?)
myPoly.setStyle({renderer: myrenderer2}); 

但是这些都不起作用。我可以使用 polygonViewPane.style.zIndex = 800; 切换整个 Pane 的 zIndex ，但我通常会在主 Pane 上有多个多边形，并且我只想将一个多边形放在所有图层的前面。

https://jsfiddle.net/kbkxf220/

<小时/> 编辑:更新了 Fiddle，合并了 IvanSanchez 的答案: https://jsfiddle.net/kbkxf220/3/

// THIS WORKS; polygon switches pane and `myPoly.options.pane` shows new pane.
myPoly.removeFrom(mymap);
myPoly.setStyle({pane: polygonViewPaneTop, renderer: myrenderer2}); 
myPoly.addTo(mymap);

请注意，您需要切换renderer让多边形在 map View 上切换 Pane (请参阅检查元素)并切换 pane对于 myPoly.options.pane正确显示新 Pane 。

Answer 1

不，Leaflet 不允许动态更改 Pane 。

从 map 中删除图层，更改其选项，然后重新添加。

如果您的问题是将线/多边形放在彼此之上，请记住您可以 call bringToFront()在他们身上。