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

Question

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

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

我发现了其他几个问题，这些问题在 指向此处的朝北地图上进行转换。

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

该地图是伦敦某地点的 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 >