javascript - 为什么当我加长这条线时，它的方向会改变？

Question

我正在尝试在给定 WGS84 坐标中的位置、长度和方向 Angular (以度为单位)的 Leaflet map 上绘制一条线。

这是我的 JavaScript 代码:

var map = L.map('map').setView([49.41611,2.06806], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

var lat = 49.41611;
var lng = 2.06806;
var deg = 220;

var len = 0.3;
deg = (deg / 360) * (Math.PI * 2);
L.polyline([
    [lat, lng],
    [lat + len * Math.cos(deg), lng + len * Math.sin(deg)]
]).addTo(map);

问题是，当我将“len”变量更改为其他值时，线条的可见方向发生了变化。

“len = 0.3”:

“len = 100”:

我的计算方法有问题吗？用 float ？我该如何解决这个问题？

Answer 1

这种方向改变的最可能原因是地球是圆的。

不过，我猜你之前犯了一个更根本的错误。如果 dir 表示线的方向，那么您不能简单地将其转换为纬度和经度。这是因为它们形成了一个网格，在小尺度上几乎是矩形的，但仅在赤道处是正方形的。经线之间的距离是 cos(lat) 乘以纬线之间的距离。因此，对于短距离，您可以这样做

L.polyline([
    [lat, lng],
    [lat + len * Math.cos(deg) * Math.cos(lat), lng + len * Math.sin(deg)]
]).addTo(map);

您应该特别确保 45° 线即使在高纬度地区也确实会以 45° 结束。

不过，以上只是小规模的近似值。对于较长的线路，地球的曲率意味着网格的纵横比沿着任何线路的路径都会变化。在这种情况下，我建议转换为 3d 笛卡尔坐标，找到该系统中目标点的坐标，然后转换回来。不过，在这种情况下，数学会涉及更多。您最好在 the Math SE 上搜索并询问(如果搜索没有结果) ，这还可以更好地排版公式。