与其他层相关的 Leaflet 多边形部分的绘制顺序(例如填充与轮廓)
Drawing order of Leaflet polygon parts (ex. fill vs outlines) in relation to other layers
我们正在构建一个使用 Leaflet 作为地图显示框架的新应用程序。
在我们当前的应用程序中,可以提供一个层的特定 'parts' 相对于其他层部分的绘制顺序。
例如。
Layer2的'fill'绘制在Layer1的'fill'之上时,Layer1的'outlines'可以绘制在Layer2的'fill'之上:
Desired
Normal
这个可以在Leaflet中控制吗,我是否必须在Layer2的填充上添加一个额外的图层来绘制Layer1的轮廓。
编辑
这是一个可以使用 'Falke Design' 的答案中的演示代码创建的示例 - 所以这看起来很有希望:
编辑 2
基本上提供的答案使用两层(不完全是我想要的),但这段代码将是一个很好的选择。
最简单的方法是降低填充的不透明度,然后透过它看到边框:
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);
在我用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())
})
})
我们正在构建一个使用 Leaflet 作为地图显示框架的新应用程序。 在我们当前的应用程序中,可以提供一个层的特定 'parts' 相对于其他层部分的绘制顺序。
例如。 Layer2的'fill'绘制在Layer1的'fill'之上时,Layer1的'outlines'可以绘制在Layer2的'fill'之上:
Desired | Normal |
---|---|
这个可以在Leaflet中控制吗,我是否必须在Layer2的填充上添加一个额外的图层来绘制Layer1的轮廓。
编辑 这是一个可以使用 'Falke Design' 的答案中的演示代码创建的示例 - 所以这看起来很有希望:
编辑 2 基本上提供的答案使用两层(不完全是我想要的),但这段代码将是一个很好的选择。
最简单的方法是降低填充的不透明度,然后透过它看到边框:
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);
在我用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())
})
})