与其他层相关的 Leaflet 多边形部分的绘制顺序（例如填充与轮廓）

Question

我们正在构建一个使用 Leaflet 作为地图显示框架的新应用程序。在我们当前的应用程序中，可以提供一个层的特定 'parts' 相对于其他层部分的绘制顺序。

例如。 Layer2的'fill'绘制在Layer1的'fill'之上时，Layer1的'outlines'可以绘制在Layer2的'fill'之上：

Desired	Normal

这个可以在Leaflet中控制吗，我是否必须在Layer2的填充上添加一个额外的图层来绘制Layer1的轮廓。

编辑这是一个可以使用 'Falke Design' 的答案中的演示代码创建的示例 - 所以这看起来很有希望：

编辑 2 基本上提供的答案使用两层（不完全是我想要的），但这段代码将是一个很好的选择。

Answer 1

最简单的方法是降低填充的不透明度，然后透过它看到边框：

L.rectangle(latlng,{fillOpacity: 0.5});

//or

layer.setStyle({fillOpacity: 0.5});

Answer 2

您还可以在新窗格上创建一个只有边框的新层，该层始终位于普通窗格之上：

// create a own pane, that is always on top of the normal drawn shapes
var bordersPane = map.createPane("borders");
bordersPane.style.zIndex = '405';

然后在绘制图层后创建一个仅与新窗格边框的新图层：

  // copy the latlngs of the drawn layer and create a new layer on the pane "borders" with only a storke
  var layer = L.rectangle(e.layer.getLatLngs(),{pane: 'borders', fill: false, color: '#000', interactive: false}).addTo(map);

在我用Leaflet-Geoman绘图的例子中：

// create a own pane, that is always on top of the normal drawn shapes
var bordersPane = map.createPane("borders");
bordersPane.style.zIndex = '405';

// add a stroke and a fill color to the drawing option
map.pm.enableDraw('Rectangle',{pathOptions: {fillOpacity: 1, stroke: true, color: '#000', fillColor: 'green'}})

// layer drawn / created event
map.on('pm:create',(e)=>{
  // change the color of the drawn layer
  e.layer.setStyle({fillColor: 'red'});
  // copy the latlngs of the drawn layer and create a new layer on the pane "borders" with only a storke and is not editable or something (pmIgnore)
  var layer = L.rectangle(e.layer.getLatLngs(),{pane: 'borders', fill: false, color: '#000', interactive: false, pmIgnore: true}).addTo(map);

  // connect the two layers
  layer.refLayer = e.layer;
  e.layer.refLayer = layer;

  // when the drawn layer is changed, change also the border layer
  e.layer.on('pm:edit pm:update pm:drag pm:markerdrag',(e)=>{
    e.layer.refLayer.setLatLngs(e.layer.getLatLngs())
  })
})

https://jsfiddle.net/falkedesign/8owphr26/

与其他层相关的 Leaflet 多边形部分的绘制顺序（例如填充与轮廓）

Drawing order of Leaflet polygon parts (ex. fill vs outlines) in relation to other layers

leaflet

drawing

z-order