OpenLayers 6.x中如何实现静态图片图层的旋转操作

• ol/source/ImageStatic的imageExtent参数仅支持传入轴对齐的矩形包围盒，格式必须是[minX, minY, maxX, maxY]的四数值数组，不支持传入旋转后的任意四边形坐标数组，你把旋转后的四个顶点直接赋值给imageExtent不符合参数要求，自然无法正常渲染图片。
• Turf旋转后得到的是多边形顶点数组，你拼接的bounds是二维坐标点数组，完全不符合imageExtent的入参格式，是问题的核心诱因。

OpenLayers 6原生就支持静态图片的旋转，不需要引入第三方库处理坐标，直接用Static源内置的imageRotate参数即可实现需求：

import ImageLayer from 'ol/layer/Image';
import Static from 'ol/source/ImageStatic';

// 角度转弧度工具函数，若你的rotation单位是角度需要做转换，本身是弧度可省略
const degreeToRad = (degree) => degree * Math.PI / 180;

return new ImageLayer({
  source: new Static({
    url: url,
    // 沿用原有轴对齐的imageExtent即可，无需修改
    imageExtent: [minX, minY, maxX, maxY],
    // 配置旋转参数，单位为弧度，顺时针旋转为正，可直接适配你原有的-extent.rotation逻辑
    imageRotate: degreeToRad(-extent.rotation),
    // 可选配置：自定义旋转中心，默认是imageExtent的中心，不需要调整可省略
    // imageRotateAnchor: [centerX, centerY]
  })
})

该方案不需要修改原坐标范围、也不需要额外做坐标转换，性能和兼容性都优于手动处理坐标的方案。

内容的提问来源于stack exchange，提问作者karlos