CODEWITHSUNDEEP
openlayersopenlayers-6
Araviz
Araviz

Reputation: 117

How to apply styles for polygon vertexes OpenLayers?

I have tried this code:

this.vector = new VectorLayer({
  source: this.source,
  zIndex: 400,
  style: new Style({
    fill: new Fill({
      color: "rgba(255, 255, 255, 0.6)",
    }),
    stroke: new Stroke({
      color: "#000",
      width: 2,
    }),
    image: new Circle({
      radius: 7,
      fill: new Fill({ color: "black" }),
      stroke: new Stroke({
        color: [255, 0, 0],
        width: 2,
      }),
    }),
  }),
});

But this section does not work for me:

image: new Circle({
          radius: 7,
          fill: new Fill({ color: "black" }),
          stroke: new Stroke({
            color: [255, 0, 0],
            width: 2,
          }),
        });

As result I want to style a points on the vertex of polygon

Upvotes: 0

Views: 182

Answers (1)

Mike
Mike

Reputation: 17932

The Circle style needs to be in a separate style object in an array, and have a geometry function which returns the vertexes as a MultiPoint

style: [
  new Style({
    fill: new Fill({
      color: "rgba(255, 255, 255, 0.6)",
    }),
    stroke: new Stroke({
      color: "#000",
      width: 2,
    }),
  }),
  new Style({
    image: new Circle({
      radius: 7,
      fill: new Fill({ color: "black" }),
      stroke: new Stroke({
        color: [255, 0, 0],
        width: 2,
      }),
    }),
    geometry: function (feature) {
      // return the coordinates of the first ring of the polygon
      const coordinates = feature.getGeometry().getCoordinates()[0];
      return new MultiPoint(coordinates);
    },
  }),
],

see also https://openlayers.org/en/latest/examples/polygon-styles.html

Upvotes: 1

Related Questions