经纬度到 X Y，字面投影缩放级别答案

【问题标题】：Lat Lon to X Y, literal projection zoom level经纬度到 X Y，字面投影缩放级别
【发布时间】：2020-03-19 02:35:54
【问题描述】：

跟随本教程：https://macwright.org/2015/08/31/canvas-animations-on-maps.html

我想将我在远足期间记录的一系列经纬度坐标映射到 360x180 像素的画布上。

教程给出了这个公式：

var x = longitude + 180;
var y = 90 - latitude;

问题是，所有的点都在彼此重叠，因为（我猜）经纬度小数点在小数点后第 100,000 位之前基本相同。

如何“放大”或映射到我在徒步旅行中记录的范围？

5 个样本点：

[21.442751, -157.824244],
[21.442773, -157.824226],
[21.442787, -157.824168],
[21.442817, -157.824158],
[21.442886, -157.824173],

【问题讨论】：

标签： javascript canvas gpx

【解决方案1】：

一种策略是将纬度和经度视为笛卡尔坐标，这适用于短距离的十进制度，但在 1° 纬度远大于 1° 经度的高纬度地区存在缩放问题。在短距离内修复这个比例误差并不难（使用纬度的正弦）。

首先获取坐标的边界矩形，然后从其他坐标中减去左下角，得到最小边界矩形的尺寸。

要将十进制度坐标放入以像素为单位的框，请缩放值以适合框。

在这种情况下，矩形将是：

左下角（最小纬度，最小经度）：21.442751，-157.824244
右上（最大纬度，最大经度）：21.442886，-157.824158

矩形最多可以使用 4 个不同点的坐标。

这会产生 0.000135 的 diff lat（高度）和 0.000086 度的 diff long（宽度）。

让比例因子适合 360 x 180 像素的矩形（假设 360 宽 x 180 高）给出：

身高：180 ÷ 0.000135 = 1,333,333
宽度：360 ÷ 0.000086 = 4,186,046

假设您要保持结果成比例，请在两个维度上使用相同的因子，否则另一个维度将不适合框，所以：

比例因子 = 1333333;

要从左下角获取每个点的 x、y 坐标（以像素为单位），请使用：

y 坐标：(lat.posA - lat.lowerLeft) * 比例；
x 坐标：(lon.posA - lon.lowerLeft) * 比例；

最后要做的是从左上角开始计算像素坐标，垂直尺寸y向下增加，水平尺寸x向右增加。 x坐标已经可以了，你只需要从180中减去y坐标。

所以点变成了（注意 lat, long 转换为 x, y）：

(21.442751, -157.824244) => (0, 180)
(21.442773, -157.824226) => (24, 151)
(21.442787, -157.824168) => (101, 132)
(21.442817, -157.824158) => (114, 92)
(21.442886, -157.824173) => (94, 0)

其中 (0,0) 是框的左上角。

.box {
  border: 1px solid red;
  width: 360px;
  height: 180px;
  position: relative;
}

.A {
  position: absolute;
  left: 0px;
  top: 180px;
}
.B {
  position: absolute;
  left: 24px;
  top: 151px;
}
.C {
  position: absolute;
  left: 101px;
  top: 132px;
}
.D {
  position: absolute;
  left: 114px;
  top: 92px;
}
.E {
  position: absolute;
  left: 94px;
  top: 0px;
}

<div class="box">
  <span class="A">1</span>
  <span class="B">2</span>
  <span class="C">3</span>
  <span class="D">4</span>
  <span class="E">5</span>
</div>

额外的工作是在框中将坐标居中，我将把它留给你。

【讨论】：

【解决方案2】：

你的猜测是正确的。由于您的徒步旅行都发生在世界的一小部分，因此将其绘制在世界地图上是没有帮助的。您可以像这样有效地缩放和居中远足坐标：

var x = (longitude + 157.82425) * 10000 * 360;

var y = (21.4429 - latitude) * 6000 * 180;

【讨论】：