Leaflet 与其他图层相关的传单多边形零件（例如填充与轮廓）的绘图顺序

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

前。 当第2层的“填充”绘制在第1层的“填充”上时，第1层的“轮廓”可以绘制在第2层的“填充”上：

渴望的 正常的

---

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

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

//or

layer.setStyle({fillOpacity: 0.5});

---

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

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

//or

layer.setStyle({fillOpacity: 0.5});

---

您还可以在新窗格上创建一个仅具有边框的新图层，该新窗格始终位于普通窗格的顶部：

// 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);

在我用于绘图的示例中：

// 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())
  })
})

---

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

// 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);

在我用于绘图的示例中：

// 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())
  })
})

---

谢谢你的建议，但我们不想使用不透明，因为这样任何潜在的“形状”也会发光。填充需要是实心的，并且只有轮廓应该是可见的，如第一张图片所示……或者使用单独的对象填充和轮廓谢谢你的建议，但是我们不想使用不透明度，因为这样任何底层的“形状”也会发光。填充需要是实心的，只有轮廓应该是可见的，如第一张图片所示……或者使用单独的对象填充和轮廓这看起来很有希望。现在我需要将它应用到我们自己的应用程序中——但是想法很清楚！但基本上有两层需要！是的，但是没有别的办法了这看起来很有希望。现在我需要将它应用到我们自己的应用程序中——但是想法很清楚！但基本上有两层需要！是的，但是没有别的办法