如何在 openlayers 6.x 中旋转静态图像

Question

我需要在 openlayers 6 中创建和旋转一个静态图像层。

使用 url 和 imageExtent 创建静态图像，我可以在地图中看到图像。

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

现在，我需要旋转这张图片。

我决定使用Turfjs

所以我做了这个使用 Turfjs 中的 transformRotate 旋转的代码：

 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
    })
  })

最后一个块代码不起作用，我在地图内看不到任何东西。

我的坐标在“EPSG:4326”中

有什么想法吗？

任何解决方案即使没有 Turfjs 也可能有所帮助？

Answer 1

看看 ol-ext 扩展和ol.source.GeoImage。

查看实际操作：https://viglino.github.io/ol-ext/examples/layer/map.geoimage.html