如何匹配经纬度与Google Maps瓦片x/y坐标以正确叠加图片

问题根源 #

你遇到的坐标不匹配问题核心是没有将目标经纬度转换为Google Maps规范的Web墨卡托瓦片坐标，或是瓦片切割时用了和Google Maps不兼容的坐标规范。

解决步骤 #

1. 先计算目标位置对应的瓦片坐标 #

首先确认你要叠加的图片的边界经纬度：左上角经纬度（lng1, lat1）、右下角经纬度（lng2, lat2），再按下方公式计算指定缩放级别z下的瓦片坐标范围：

// 经纬度转Google Maps瓦片坐标公式
function lngLatToTile(lng, lat, z) {
  const tileCount = 2 ** z;
  const x = Math.floor((lng + 180) / 360 * tileCount);
  const latRad = lat * Math.PI / 180;
  const y = Math.floor((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * tileCount);
  return {x, y};
}

以你用的z=18为例，调用该方法得到左上角瓦片坐标(x1, y1)、右下角瓦片坐标(x2, y2)，你切割原始图片生成瓦片时，就需要按这个x、y范围来命名文件，才能和Google Maps请求的coord.x、coord.y对应。

2. 检查Y坐标是否需要反转 #

如果你是用GDAL、gdal2tiles等开源工具切割的瓦片，默认生成的是TMS规范的瓦片，它的Y坐标和Google Maps的Y坐标是反向的，需要在请求时做转换，修改你的代码如下：

const TILE_URL = 'xyz.com/orthoImage_{z}_{x}_{y}.png';

const imageMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
        // 如果是TMS规范瓦片，反转Y坐标
        const tmsY = (2 ** zoom - 1) - coord.y;
        return TILE_URL
            .replace('{z}', zoom)
            .replace('{x}', coord.x)
            .replace('{y}', tmsY);
    },
    tileSize: new google.maps.Size(256, 256),
    minZoom: 1,
    maxZoom: 20
});

可选简化方案：单张图片无需切瓦片 #

如果你的叠加图片不需要支持多缩放级别的瓦片加载，直接用GroundOverlay方案更简单，不需要做坐标转换，直接传入图片的边界经纬度即可：

const imageBounds = {
  north: 你的图片最北端纬度,
  south: 你的图片最南端纬度,
  east: 你的图片最东端经度,
  west: 你的图片最西端经度
};
new google.maps.GroundOverlay(
  '你的单张图片完整url',
  imageBounds,
  {map: map}
);

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