OpenLayers 6静态图源加载旋转图像出现分辨率异常及范围计算问题

问题确认 #

使用OpenLayers 6的Static静态图源加载已旋转的上传图像时，确实可能出现分辨率错误、范围异常问题，你当前遇到的渲染扭曲、分辨率差的问题核心由三个错误导致：

• 范围计算未考虑旋转参数，使用轴对齐的未旋转边界框套入旋转后的图像，导致投影适配时拉伸变形
• 自定义imageLoadFunction硬写分辨率、强制修改图片加载状态的逻辑，覆盖了OpenLayers原生的精度计算逻辑
• 旋转投影入参坐标系混淆，重复转换坐标导致中心点偏移

旋转后图像四角/边界框计算方法 #

你可以通过已有的中心坐标、缩放、旋转、图像宽高参数直接计算旋转后的四个角点，计算逻辑如下：

1. 统一使用同坐标系（建议先使用EPSG:3857完成所有计算，最后再按需转换为视图坐标系）
2. 使用旋转矩阵计算每个角点旋转后的实际坐标：
   • 旋转公式：新坐标X = 相对中心偏移X * cos(旋转角) - 相对中心偏移Y * sin(旋转角) + 中心X，新坐标Y = 相对中心偏移X * sin(旋转角) + 相对中心偏移Y * cos(旋转角) + 中心Y
   • 四个角点未旋转时相对中心的偏移分别为：左上(-宽/2*缩放X, 高/2*缩放Y)、右上(宽/2*缩放X, 高/2*缩放Y)、右下(宽/2*缩放X, -高/2*缩放Y)、左下(-宽/2*缩放X, -高/2*缩放Y)
3. 取四个角点的最小X、最小Y、最大X、最大Y，即为旋转后图像的轴对齐边界框extent

修正后代码示例 #

import { get } from 'ol/proj';
import Static from 'ol/source/ImageStatic';

// 统一用EPSG:3857完成参数计算
const epsg3857 = get('EPSG:3857');
const [centerX, centerY] = transformation.getTranslation();
const [xScale, yScale] = transformation.getScale();
const rotation = transformation.getRotation();
const imgWidth = this.imageData.width;
const imgHeight = this.imageData.height;

const cosRot = Math.cos(rotation);
const sinRot = Math.sin(rotation);
// 定义四个角点未旋转时的相对偏移
const cornerOffsets = [
  [-imgWidth/2 * xScale, imgHeight/2 * yScale],
  [imgWidth/2 * xScale, imgHeight/2 * yScale],
  [imgWidth/2 * xScale, -imgHeight/2 * yScale],
  [-imgWidth/2 * xScale, -imgHeight/2 * yScale]
];
// 计算旋转后四个角点的实际坐标
const rotatedCorners = cornerOffsets.map(([offsetX, offsetY]) => {
  const rotX = offsetX * cosRot - offsetY * sinRot + centerX;
  const rotY = offsetX * sinRot + offsetY * cosRot + centerY;
  return [rotX, rotY];
});
// 生成轴对齐的边界框
const extent3857 = [
  Math.min(...rotatedCorners.map(p => p[0])),
  Math.min(...rotatedCorners.map(p => p[1])),
  Math.max(...rotatedCorners.map(p => p[0])),
  Math.max(...rotatedCorners.map(p => p[1]))
];

// 生成旋转投影，入参使用3857原生坐标，不要重复转换
const imageProjection = this.returnRotateProjection(
  epsg3857,
  [centerX, centerY],
  rotation,
  extent3857
);

// 初始化Static图源，删除错误的自定义加载逻辑
const imgSource = new Static({
  url: this.imgURL,
  projection: imageProjection,
  imageExtent: extent3857,
  imageSize: [imgWidth, imgHeight]
});

补充说明 #

• 如果你的视图使用EPSG:4326坐标系，只需在得到extent3857后统一转换为4326即可，不要在参数计算阶段混用不同坐标系
• 你也可以直接使用支持旋转参数的GeoImage源实现需求，无需手动计算投影和边界框，适配效率更高，出现扭曲的概率更低

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