Lat Lon 到 X Y，文字投影缩放级别

Question

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

我想将徒步旅行中记录的一系列经纬度坐标映射到 360x180 像素 canvas。

教程给出了这个公式：

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

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

我如何'zoom'进入或映射到我徒步旅行记录的范围？

5个样本点：

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

Answer 1

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

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

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

Answer 2

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

先得到坐标的外接矩形，然后用其他坐标减去左下角，得到最小外接矩形的尺寸。

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

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

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

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

这会产生 0.000135 度的差异纬度（高度）和 0.000086 度的差异长度（宽度）。

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

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

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

scaleFactor = 1333333;

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

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

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

因此点变为（注意经纬度转换为 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>

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

Lat Lon 到 X Y，文字投影缩放级别

Lat Lon to X Y, literal projection zoom level

javascript

canvas

gpx