0

I need to create and rotate a static image layer in openlayers 6.

The creation of static image is working using url and imageExtent and i can see the image inside the map.

new ImageLayer({
        source: new Static({
          url,
          imageExtent: [ minX, minY, maxX, maxY] })

Now, I need to rotate this image.

I decided to use Turfjs

So i did this code that rotate using transformRotate from Turfjs:

 const poly = bboxPolygon([minX, minY, maxX, maxY])

  const rotatedPoly = transformRotate(poly, -extent.rotation, {})



  const leftBottom = JSON.parse(JSON.stringify(rotatedPoly.geometry.coordinates[0][0]))
  const rightBottom = JSON.parse(JSON.stringify(rotatedPoly.geometry.coordinates[0][1]))
  const rightTop = JSON.parse(JSON.stringify(rotatedPoly.geometry.coordinates[0][2]))
  const leftTop = JSON.parse(JSON.stringify(rotatedPoly.geometry.coordinates[0][3]))

  const bounds = [leftBottom, leftTop, rightTop, rightBottom]

  return new ImageLayer({
    source: new Static({
      url,
      imageExtent: bounds
    })
  })

The last block code is not working, i see nothing inside the map.

My coordinates are in 'EPSG:4326'

Any idea please ?.

Any solution that may be help even without Turfjs ?

karlos
  • 807
  • 1
  • 8
  • 38

1 Answers1

0

Have a look at the ol-ext extension and the ol.source.GeoImage.

See it in action: https://viglino.github.io/ol-ext/examples/layer/map.geoimage.html

Viglino Jean-Marc
  • 1,371
  • 8
  • 6