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

问题描述

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

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

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

现在，我需要旋转此图像。

我决定使用Turfjs

所以我使用来自Turfjs的转换Rotate：

执行了这段旋转代码

 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也有帮助的解决方案？

推荐答案

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

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

这篇关于如何在OpenLayers 6.x中旋转静态图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！