打开图层ol.interaction.Draw笔划样式

Question

我有这个jsfiddle，它能够在地图上绘制多边形，效果非常好。我想不出的是如何设计。绘制交互。

目前，我有一条虚线表示用户已经绘制的多边形部分，另一条虚线连接第一个绘制点和最后一个绘制点。

当我写风格时，它似乎影响了两行。

我需要的是一条连接用户已经绘制的点的黑色虚线，而连接最后一个绘制点和第一个绘制点的线没有线(完全透明(。

这是我当前的风格对象：

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

我试过添加各种颜色和样式，但似乎无法实现。

有人遇到这个问题并找到解决办法吗？

Answer 1

好吧，我已经破解了这个，我必须深入库的源代码才能弄清楚，所以我要在这里发布答案，希望它能在未来帮助其他人，所以这里是：

作为源代码，我可以看到，当使用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;
};

希望这能有所帮助🤓