How to style vertexes in OpenLayers?

Question

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(),
});

score 1 · Accepted Answer · answered Jul 18 '22 at 12:00

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

How to style vertexes in OpenLayers?

1 Answers1