I use this code to draw polygons. How to set style for all vertexes including cutouts?
This is my attempt to style the vertex points:
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()];
};
}
And styles for drawing object:
const draw = new Draw({
source: source,
type: 'Polygon',
style: getStyleFunction(),
});
Similar to https://stackoverflow.com/a/73011556/10118270 you will need a geometry function to produce MultiPoint to style the vertices. Instead of just the first ring if you want the vertices of all rings replace feature.getGeometry().getCoordinates()[0]
with feature.getGeometry().getCoordinates().flat()
https://codesandbox.io/s/draw-and-modify-features-forked-p41i2u?file=/main.js