Leaflet多边形部分例如填充与轮廓相对于其他图层的绘制顺序

问题描述

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

例如。 当Layer2的'fill'覆盖在Layer1的'fill'上时，Layer1的'outlines'可以覆盖在Layer2的'fill'上：

需要	正常

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

编辑 这是使用“Falke Design”答案中的演示代码可以创建的示例 - 所以这看起来非常有希望：

编辑 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,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(),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/

,

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

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

//or

layer.setStyle({fillOpacity: 0.5});