[英]Openlayers ol.interaction.Draw stroke style
我有这个jsfiddle ,它能够在地图上绘制多边形,效果很好。 我不知道如何设置.Draw交互的样式。
目前,对于用户已经绘制的多边形部分,我有一条虚线,而连接第一个绘制点和最后一个绘制点的另一条虚线。
当我编写样式时,似乎同时影响了这两行。
我需要的是一条黑色虚线连接用户已经绘制的点,并且没有一条线(完全透明)连接最后绘制的点和第一个绘制点的线。
这是我当前的样式对象:
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 3
}),
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
stroke: new ol.style.Stroke({
color: [0, 0, 0, 0.5],
width: 1
}),
radius: 4
})
})
我尝试添加颜色和样式的数组,但似乎无法正常工作。
有没有人遇到这个问题并找到解决方法?
好的,我已经破解了这个问题,我不得不深入研究图书馆的资源来弄清楚它,所以我将在这里发布答案,希望它对以后的其他人有所帮助,所以去:
作为源代码,我看到的是当您使用ol.interaction.Draw
绘制多边形时,使用了多个几何图形。 有底层的Polygon
,这是具有笔触和填充并显示连接线(基于其笔触样式)的位。 有一个LineString
,它显示用户仅绘制的点的线(无填充,无连接线)。 还有一个点,它附加在鼠标指针上。 我在jsfiddle中留下了一个“ console.log()”来展示所有这些。
我已经创建了这个工作的jsfiddle 。 我所做的是,不是直接在ol.interaction.Draw
内部设置样式,而是使用了styleFunction
(请参见下面的代码)。 我按类型检测每个几何,并为其设置特定的样式。
const styleFunction = feature => {
var geometry = feature.getGeometry();
console.log('geometry', geometry.getType());
if (geometry.getType() === 'LineString') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 1)',
width: 3
})
})
];
return styles;
}
if (geometry.getType() === 'Polygon') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 0)',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 102, 0, 0.3)'
})
})
];
return styles;
}
return false;
};
希望这可以帮助🤓
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.