[Vuejs]-Vue3-Openlayers: Change Feature color according to properties on the fly from template

by

0👍

you can add overrideStyleFunction prop to style like that

 <ol-style :overrideStyleFunction="overrideStyleFunction">
            <ol-style-stroke color="red" :width="2"></ol-style-stroke>
            <ol-style-fill color="rgba(255,255,255,0.1)"></ol-style-fill>

            <ol-style-circle :radius="20">
                <ol-style-stroke color="black" :width="15" :lineDash="[]" lineCap="butt"></ol-style-stroke>
                <ol-style-fill color="black"></ol-style-fill>
            </ol-style-circle>

            <ol-style-text>
                <ol-style-fill color="white"></ol-style-fill>
            </ol-style-text>
        </ol-style>

In script :

   const overrideStyleFunction = (feature, style) => {

       let properties= feature.get('bla bla bla');  //from extra data in properties of the feature
       if(properties == "....") // change the style
           style.getImage().getFill().setColor("red");
    
    }

Leave a comment