OpenLayers：旋转投影下的静态图像畸变问题

现有条件 #

• 地图：美国区域OSM地图（采用EPSG:4326地理坐标系）
• 素材：该区域某建筑平面图，建筑与垂直方向呈10-45度倾斜
• 已知信息：建筑的正确经纬度坐标
• 开发环境：ReactJS + OpenLayers

需求 #

将平面图旋转至与OSM地图正确匹配，目前通过以下代码将平面图集成到图像图层：

const floorMapLayer = new ImageLayer({
    source: new Static({
        url: floorPlanUrl,
        projection: rotateProjection("EPSG:4326", angle, extent),
        imageExtent: extent
    })
})

其中rotateProjection()函数基于坐标系旋转示例修改，仅将原英国坐标系"EPSG:27700"替换为"EPSG:4326"。

问题现象 #

旋转后的图像出现明显畸变：

• 非90度旋转时，图像呈平行四边形
• 90度旋转时，图像为矩形，但原南北方向（转为东西方向）缩短，原东西方向（转为南北方向）拉长，该变化与cos(latitude)强相关，推测是旋转时直接按经纬度度数单位转换，未考虑球面坐标系的缩放差异

已调研情况 #

已查阅Stack Overflow及GIS Stack Exchange相关问答，涵盖旋转静态图像、图像图层旋转等主题，最终参考坐标系旋转的示例代码实现当前逻辑。

解决方法 #

核心原因 #

EPSG:4326是地理坐标系（经纬度），该坐标系下经度的实际地面距离会随纬度变化（同一经度差，高纬度地区地面距离更短），直接对该坐标系做旋转投影，会因经纬线的缩放特性导致图像畸变。

解决方案 #

改用**投影坐标系（如EPSG:3857，OSM地图默认使用的Web墨卡托投影）**进行旋转操作，步骤如下：

1. 将建筑的经纬度范围转换为EPSG:3857坐标，得到平面图对应的extent
2. 修改rotateProjection()函数，以EPSG:3857为基准坐标系执行旋转
3. 配置ImageLayer时，使用转换后的EPSG:3857范围和旋转后的投影：

// 将经纬度范围转为EPSG:3857
const wgs84Extent = [minLon, minLat, maxLon, maxLat];
const webMercatorExtent = ol.proj.transformExtent(wgs84Extent, 'EPSG:4326', 'EPSG:3857');

// 基于EPSG:3857创建旋转投影
const rotatedProj = rotateProjection("EPSG:3857", angle, webMercatorExtent);

// 创建图像图层
const floorMapLayer = new ImageLayer({
    source: new Static({
        url: floorPlanUrl,
        projection: rotatedProj,
        imageExtent: webMercatorExtent
    })
})

4. 若rotateProjection()函数内部有坐标系相关的硬编码，需同步替换为EPSG:3857的参数，确保旋转逻辑基于平面投影坐标系计算

原理说明 #

EPSG:3857是平面投影坐标系，该坐标系下同一单位距离对应的地面长度在全球大部分区域（除高纬度）基本一致，旋转操作不会产生因经纬线缩放差异导致的畸变，能保证平面图旋转后与地图正确匹配。

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