SVG墨卡托投影地图纬度坐标偏移问题求助

你的核心问题是误用线性缩放+单一纬度因子计算墨卡托y坐标，这完全不符合墨卡托投影的数学定义。墨卡托投影的y轴是非线性对数正切变换，而非纬度的线性函数——这就是为什么地图中心区域偏移最大，南北边界反而看似准确：线性计算与真实墨卡托曲线的偏差在中纬度区域最显著，而边界处因线性近似和曲线端点重合，偏移被掩盖。

当前公式Math.abs(lat - north) * scale * getMercatorScaleFactorY(centerLat)是线性模型，根本无法拟合墨卡托投影的非线性y轴规律。

1. 墨卡托y坐标的正确转换公式 #

球面墨卡托投影的y坐标转换（需将纬度转为弧度）：

function latToMercatorY(lat) {
  const rad = lat * Math.PI / 180;
  // 墨卡托核心计算：北纬值为正，南纬为负
  return Math.log(Math.tan(Math.PI / 4 + rad / 2));
}

2. 适配SVG坐标系的完整计算步骤 #

SVG的y轴向下递增，结合你地图的固定南北边界（north/south纬度），需将墨卡托坐标归一化到SVG画布范围：

• 预计算地图南北边界的墨卡托y值：yNorth = latToMercatorY(north)，ySouth = latToMercatorY(south)
• 计算目标城市的墨卡托y值：yCity = latToMercatorY(cityLat)
• 归一化并反转y轴方向（适配SVG）：

  // mapHeight 可替换为你原有的 (north - south) * scale
  const svgY = (yNorth - yCity) / (yNorth - ySouth) * mapHeight;
  

3. 替换原有错误逻辑 #

移除所有与getMercatorScaleFactorY相关的代码，用以下示例片段替换y坐标计算：

// 预计算地图边界的墨卡托参数（只需执行一次）
const yNorth = latToMercatorY(north);
const ySouth = latToMercatorY(south);
const mercatorHeightRange = yNorth - ySouth;
const mapPixelHeight = (north - south) * scale; // 原有的地图高度计算方式

// 单个城市的SVG y坐标计算
function calculateCityY(cityLat) {
  const cityMercatorY = latToMercatorY(cityLat);
  // 归一化到SVG画布，同时反转y轴
  return Math.floor((yNorth - cityMercatorY) / mercatorHeightRange * mapPixelHeight);
}

为什么之前的方法无效？ #

• 1/Math.cos(centerLat)是墨卡托投影的局部缩放修正因子，用于校正地图上的面积/距离变形，而非y坐标的转换逻辑。
• 墨卡托y值随纬度变化的速率是非线性的：越靠近两极，y值变化越快，线性模型完全无法拟合这种曲线关系，中纬度（地图中心）的偏差自然最大。

用已知坐标点验证转换逻辑：

• 赤道（lat=0）的墨卡托y值为0
• 北纬60°的墨卡托y值约为0.881
• 南纬60°的墨卡托y值约为-0.881
  代入计算后，对比Illustrator中的正确位置，确认偏移消失。

内容的提问来源于stack exchange，提问作者mirja-t