How to add style to a feature

Question

I use vue3-openlayers and want to add polygons to a vector-source.

This is a part of the template with the vector-layer and the source-vector.

<ol-vector-layer>
    <ol-source-vector ref="source"></ol-source-vector>
</ol-vector-layer>

The script-section:

Feature = inject("ol-feature");
Geom = inject("ol-geom");
source = ref(null);

mounted() {
    const coords = [[11.5647931, 47.2522687], [11.5649255, 47.2522687], [11.5649254, 47.2521789]];
    const geometry = new this.Geom.Polygon([coords]);
    const feature = new this.Feature({
        geometry: geometry,
    });
    this.source.source.addFeature(feature);
}

How can I add a stroke width and a fill color to the feature?

Answer 1

After you create a feature, you can set the style on the feature. For instance:

  const coords = [[11.5647931, 47.2522687], [11.5649255, 47.2522687], [11.5649254, 47.2521789]];
    const geometry = new this.Geom.Polygon([coords]);
    const feature = new this.Feature({
        geometry: geometry,
    });
    feature.setStyle(myNewStyle); // This can be a single style object, an array of styles, or a functio
    this.source.source.addFeature(feature);

More about that you can read here: https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html#setStyle