将 lat/lng 坐标转换为给定旋转地图上的像素

Question

如何将 lat/lng 坐标转换为旋转地图（div）上的像素？

奇怪的是地图没有指向北方，而是倾斜了 10 度……而且我的高中数学不及格！

我发现了一些其他问题，conversion on a north-facing map 指向here。

然而，当地图旋转时，我不完全确定如何做到这一点。

地图是伦敦某地点的 3*3 公里地图。

我使用的是 javascript，但任何语言都可以 :-)

Answer 1

你有两张地图。现实以纬度和经度衡量，而您绘制的地图以（我认为）像素衡量。你需要从一个转换到另一个。 用矢量数学来做这件事，分三步做。

1.) 找到从原点到要映射的点的原始矢量。

let O = <Ox, Oy>; 
(the origin in lat and long of your map).

let M = <Mx, My>; 
(the point in lat/long that you want to convert to a pixel on your drawn map)

let V := M - O = <Mx - Ox, My - Oy>; 
(This is a vector from origin to the point you want to convert.)

作为一个向量，它包含两个数学量，方向和大小。 我们需要将这两个量从我们的纬度经度坐标系统转换到我们新的像素坐标系统。

2.) 第一音阶。

比例是一个倍数，弄清楚它是什么，然后将你的向量乘以它。基本是每度纬度/经度多少像素的倍数。

let c = our 'zoom' multiple. 

Scaling is as easy as multiplying our vector by our scalar.

cV = <cVx, cVy>;

3.) 然后旋转

旋转是一个三角函数。 旋转向量的 X 等于 sin(t)|V|和 旋转向量的 Y 等于 cos(t)|V|其中 t 是我们的旋转量（度数或弧度，具体取决于您定义余弦/正弦函数的方式。

注意：缩放和旋转是线性函数。这意味着您在缩放旋转或旋转然后缩放时执行此操作的顺序无关紧要，答案相同。

一次完成所有操作看起来像这样：

矢量符号：

let O := the origin 
let M := the point you want to map. 
let R(V,t) := a function to rotate vector V by t. 
let c := or zoom or scale multiple. 

solve for P.

P = c * R(M-O, t). (Or since R and c are linear R(c(M-O), t);  )

有序对符号：

let O := <Ox, Oy>

let M := <Mx, My>

let R(V,t) = < cos(t) * ((Mx - Ox)^2 + (My - Oy)^2)^.5
               sin(t) * ((Mx - Ox)^2 + (My - Oy)^2)^.5 >

Note : |M - O| = ((Mx - Ox)^2 + (My - Oy)^2)^.5

solve for P.

<Px, Py> = < c * cos(t) * ((Mx - Ox)^2 + (My - Oy)^2)^.5
             c*  sin(t) * ((Mx - Ox)^2 + (My - Oy)^2)^.5 >