Openlayers - How to rotate the base64 image in openlayers map?

Question

I added the base64 decoded image to openlayer map.(Angular 10, Openlayers v6.4)

var src = "data:image/png;base64,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";
var imageLayer = new ImageLayer({
source: new Static({
  url: src,
  projection: 'EPSG:4326',
  imageExtent: extent,
  imageRotate : 3*Math.PI/180,
  rotation: Math.PI / 6,
}),
 });

 this.map.addLayer(imageLayer)

but that didn't rotate. How can I rotate the base64 image in openlayers? or another method for add the base64 image in openlayers map? I can't transfor ImageLayer to vectorLayer. Help!

Answer 1

You can use ol-ext ol/source/GeoImage to display images on the map.
See example online: https://viglino.github.io/ol-ext/examples/layer/map.geoimage.html