How to rotate marker or feature with OpenLayers?

Question

I managed to add markers as Feature objects in a Vector layer. I can simply move the markers to its new locations by using Feature.setGeometry() method.

Next thing is to change the marker's direction or bearing, as you will. The direction is calculated based on previous location and new location of the marker. How can I rotate the marker? I can't find the right way to do it. OpenLayers documentation is a bit overwhelming to me and I can't find an example also.

This is in short the code I have right now:

// create a marker
let marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([4.333959, 52.060110]))
});

// add it to the markersLayer
markersLayer.getSource().addFeature(marker);

// set marker to a new position
marker.setGeometry(new ol.geom.Point(ol.proj.fromLonLat(loc)));

// rotate marker to x degrees
// but don't know how to do it :(
marker.???

So how can I rotate the marker? What's the best practice solution? The marker has a small arrow image always pointing to the north.

Answer 1

its pretty simple you can use styles to set the rotation. I used it in following manner setting styles of icon with rotation property and pass bearing info into it.

let styles = [
                new Style({
                  image:
                    new Icon({
                      anchor: [0.5, 24],
                      anchorXUnits: 'fraction',
                      anchorYUnits: 'pixels',
                      src: `assets/images/SVG/truck-moving-solid.svg`,
                      scale: 0.65,
                      rotation: feature.bearing
                    }),
                }),
              ]