0

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

Araviz
  • 97
  • 1
  • 6

1 Answers1

1

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

Mike
  • 16,042
  • 2
  • 14
  • 30
  • Could you explain how OL knows whicj style to apply from array styles? – Araviz Jul 17 '22 at 12:00
  • Where can I read about it? – Araviz Jul 17 '22 at 12:07
  • Both elements will be used, but only for geometries which are suitable. Fill and Stroke are never used for Point/MultiPoint geometries. Image is never used for Polygon or LineString. – Mike Jul 17 '22 at 12:23
  • Thank you! You are the best in OL section. Could you check my next question. I lost 8 hours for solving this issue – Araviz Jul 17 '22 at 14:07