将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.）First Scale。

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

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是我们的旋转量（度或弧度，取决于你如何定义cos /正弦函数。

注意：缩放和旋转是线性函数。这意味着你按照缩放旋转或旋转然后缩放的顺序无关紧要，它的答案相同。

一次完成所有操作将如下所示：

矢量符号：

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 >