如何将OpenStreetMap经纬度映射到Canvas的X/Y点并适配缩放？

核心问题是你没有基于当前数据集的地理边界做归一化转换，直接使用经纬度数值计算会因为数值差异过小导致点集中在一起。以下是具体的解决步骤和代码实现：

步骤1：提取数据边界 #

首先从你的坐标集合中计算出纬度（lat）和经度（lon）的最小/最大值，确定当前区域的地理范围：

// 整理你的坐标数据
const points = [
  [37.6628251, 44.7657795],
  [37.6636733, 44.7651791],
  [37.6628725, 44.7640567],
  [37.6637161, 44.7636559],
  [37.6647429, 44.7645108],
  [37.6656829, 44.7641975],
  [37.6670459, 44.7656444]
];

// 提取所有纬度和经度
const lats = points.map(p => p[0]);
const lons = points.map(p => p[1]);

// 计算边界值
const minLat = Math.min(...lats);
const maxLat = Math.max(...lats);
const minLon = Math.min(...lons);
const maxLon = Math.max(...lons);

步骤2：计算缩放与偏移 #

基于Canvas尺寸和地理范围计算缩放因子（保持比例避免变形），同时添加边距防止点溢出Canvas：

const canvasWidth = 1240;
const canvasHeight = 504;
const padding = 0.05; // 预留5%的边距

// 计算地理范围的宽高
const latRange = maxLat - minLat;
const lonRange = maxLon - minLon;

// 计算适配Canvas的缩放因子（取较小值保证完整显示）
const scaleX = (canvasWidth * (1 - padding * 2)) / lonRange;
const scaleY = (canvasHeight * (1 - padding * 2)) / latRange;
const scale = Math.min(scaleX, scaleY);

// 计算偏移量，让图形居中显示
const offsetX = (canvasWidth - lonRange * scale) / 2;
const offsetY = (canvasHeight - latRange * scale) / 2;

步骤3：坐标转换函数 #

编写转换函数，将经纬度映射为Canvas像素坐标（注意Canvas Y轴向下，需反转纬度方向）：

function convertLatLonToCanvas(lat, lon) {
  // 经度转X轴：将相对经度差缩放后加偏移
  const x = (lon - minLon) * scale + offsetX;
  // 纬度转Y轴：用最大纬度减去当前纬度（反转方向）后缩放加偏移
  const y = (maxLat - lat) * scale + offsetY;
  return { x, y };
}

步骤4：绘制到Canvas #

使用转换后的坐标绘制点或连线：

const canvas = document.getElementById('target-canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvasWidth;
canvas.height = canvasHeight;

// 绘制所有点
ctx.fillStyle = '#ff0000';
points.forEach(p => {
  const { x, y } = convertLatLonToCanvas(p[0], p[1]);
  ctx.beginPath();
  ctx.arc(x, y, 3, 0, Math.PI * 2);
  ctx.fill();
});

// 可选：绘制点之间的连线
ctx.strokeStyle = '#0000ff';
ctx.lineWidth = 2;
ctx.beginPath();
points.forEach((p, idx) => {
  const { x, y } = convertLatLonToCanvas(p[0], p[1]);
  idx === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
});
ctx.stroke();

关键注意事项 #

• 必须基于当前数据集的边界计算：不能使用全球经纬度范围（-90_{90纬度，-180}180经度），否则小区域的经纬度差异会被缩放得极小，导致点集中。
• Y轴方向反转：地理纬度值越大越靠北（屏幕上方），但Canvas的Y轴值越大越靠下，因此需要用maxLat - lat反转方向。
• 边距与比例适配：添加边距避免点贴在Canvas边缘，取最小缩放因子保证图形不会被拉伸变形。

内容的提问来源于stack exchange，提问作者Артемий Сталащук