使用GMaps OverlayView叠加GTiff图像时出现偏移/压缩问题

核心原因 #

OverlayView的核心是像素坐标与地理坐标的精准映射，瓦片模式正常是因为TiTiler已自动处理了瓦片级的投影适配和坐标对齐，但单图叠加时需手动确保以下关键环节的正确性：

1. 裁剪图的地理边界与像素比例不匹配 #

• 检查TiTiler返回的裁剪图元数据：确认width/height与对应bbox（地理边界）的比例完全一致。Google Maps墨卡托投影（EPSG:3857）下，地理范围的宽高比必须和图片像素宽高比严格相等，否则会出现拉伸/压缩。
  • 验证公式：(bbox[2]-bbox[0])/(bbox[3]-bbox[1]) 需等于 图片宽度/图片高度
• 解决方式：要么重新裁剪时让TiTiler按地理比例生成图片（比如加max_size参数），要么手动设置容器固定宽高，禁止CSS自适应规则（如width:100%）。

2. OverlayView坐标转换逻辑错误 #

Google Maps的OverlayViewdraw方法是坐标映射的关键，常见错误：

• 混淆了地理坐标的顺序（EPSG:4326是[minLon, minLat, maxLon, maxLat]，EPSG:3857是[minX, minY, maxX, maxY]，Y轴自南向北递增）
• 未正确处理Div像素坐标系的Y轴方向（Google Maps中Y轴向下递增，高度计算应为南边界像素Y - 北边界像素Y）
• 忽略了地图缩放级别和中心点的偏移影响

3. 投影坐标系不统一 #

• 若GTiff是EPSG:4326，需将bbox转换为EPSG:3857后再传入OverlayView，不能直接用经纬度计算像素位置
• TiTiler生成瓦片时自动处理了投影转换，但单图裁剪若返回4326格式的bbox，需手动转换（可通过TiTiler接口指定proj=EPSG:3857直接获取3857的边界）

具体修复步骤 #

1. 强制匹配裁剪图比例与地理范围

   • 调用TiTiler裁剪接口时添加max_size=1024（或其他数值），让TiTiler自动调整图片宽高以适配bbox比例
   • 或手动计算比例后，给图片容器设置固定宽高，避免自适应拉伸

2. 修正OverlayView的draw方法
   正确的坐标映射示例：

   draw: function() {
     const overlayProjection = this.getProjection();
     // 裁剪图的地理边界（已转换为EPSG:3857对应的LatLng）
     const sw = new google.maps.LatLng(bbox[1], bbox[0]);
     const ne = new google.maps.LatLng(bbox[3], bbox[2]);
     // 转换为容器像素位置
     const swPixel = overlayProjection.fromLatLngToDivPixel(sw);
     const nePixel = overlayProjection.fromLatLngToDivPixel(ne);
     // 设置容器位置与尺寸
     const div = this.getDiv();
     div.style.left = `${swPixel.x}px`;
     div.style.top = `${nePixel.y}px`;
     div.style.width = `${nePixel.x - swPixel.x}px`;
     div.style.height = `${swPixel.y - nePixel.y}px`;
   }
   

3. 统一投影坐标系

   • 调用TiTiler裁剪接口时指定proj=EPSG:3857，直接获取3857格式的bbox
   • 若使用4326的bbox，用投影转换库（如proj4）将边界点转为3857坐标后再使用

瓦片模式正常的原因 #

TiTiler生成瓦片时严格遵循Google Maps的瓦片规范：固定瓦片尺寸、层级对应固定地理范围、每个瓦片的宽高比与对应地理范围比例完全匹配，且瓦片坐标是预定义的，所以叠加时无需手动处理适配，不会出现偏移或拉伸。

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