OpenLayers Vue.js 中多边形每个点的样式

Question

我尝试使用 OpenLayers 为我的多边形添加一些样式：

https://openlayers.org/en/latest/examples/draw-and-modify-features.html

但我找不到任何关于：如何为多边形的每个点添加一些样式。

我试图为每个点设置圆圈，但我不知道该怎么做。

如果有人可以帮助我:)

谢谢:)

Answer 1

Openlayers 接受一个图层的数组中的多种样式。

在下面的代码片段中，您可以看到setStyle函数返回一个包含两种样式的数组。一个表示多边形，另一个表示多边形的角，带有返回自定义几何的几何的回调函数(在本例中为多边形的角(

layer.setStyle(feature => {
const styles = [new Style({
fill: new Fill({
color: 'rgba(100, 100, 100, 0.5)'
}),
stroke: new Stroke({
color: 'black',
width: 3
})
}),
// adding style for polygon corners
new Style({
image: new Circle({
radius: 5,
fill: new Fill({
color: 'white'
}),
stroke: new Stroke({
color: 'black',
width: 3
})
}),
// telling openlayers to extract corner geometries for styling purpose 
geometry: (e) => {
const coordinates = e.getGeometry().getCoordinates()[0]
return new MultiPoint(coordinates)
}
})]
return styles
})