如何在OpenLayers样式顶点?

Question

我使用这个代码来绘制多边形。如何为所有顶点包括裁剪设置样式?

这是我尝试样式的顶点点:

function getStyleFunction() {
const white = [255, 255, 255, 1];
const blue = [0, 153, 255, 1];
const width = 3;
const styles = {
Polygon: [
new Style({
fill: new Fill({
color: [255, 255, 255, 0.6],
}),
stroke: new Stroke({
color: blue,
width: width,
}),
}),
],
Point: [
new Style({
image: new CircleStyle({
radius: width * 2,
fill: new Fill({
color: blue,
}),
stroke: new Stroke({
color: white,
width: width / 2,
}),
}),
}),
],
};
return function (feature, resolution) {
return styles[feature.getGeometry().getType()];
};
}

和绘图对象的样式:

const draw = new Draw({
source: source,
type: 'Polygon',
style: getStyleFunction(),
});

Answer 1

与https://stackoverflow.com/a/73011556/10118270类似，您将需要一个几何函数来生成MultiPoint以样式化顶点。如果你想要所有环的顶点不只是第一个环将feature.getGeometry().getCoordinates()[0]替换为feature.getGeometry().getCoordinates().flat()https://codesandbox.io/s/draw-and-modify-features-forked-p41i2u?file=/main.js