javascript - 如何在 Leaflet map 上正确绘制多边形(纬度/经度顶点和旋转)？

Question

我正在尝试在传单 map 上绘制一个代表一艘船的移动多边形。

我拥有的信息(每帧)是多边形“中心”点(纬度/经度)的位置及其尺寸(顶点和中心点之间的距离)，以及多边形的旋转 Angular 多边形。

我可以将多边形添加到传单 map 中，但在应用旋转和平移后，多边形似乎倾斜了。

确切的过程是:首先我存储一个坐标数组(顶点纬度/经度，即 0,0 和多边形尺寸之间的距离)，每次我想绘制多边形时，我都会复制该数组，然后应用到所有坐标的旋转 Angular (围绕 0,0 进行简单旋转)，然后平移所有坐标并绘制结果。

这就是如果我只应用旋转的话多边形的样子:

如果我应用旋转和平移(无缩放)，多边形的外观如下:

Answer 1

您看到失真是因为 spherical Mercator projection Leaflet(像大多数网络 map 一样)使用的，赤道处的纬度和经度的长宽比仅为 1:1。当你向两极移动时，边长为 1 度的“正方形”会显得越来越垂直拉伸(stretch)。

如果您使用 L.Projection 将纬度/经度点转换为投影坐标(具体来说，使用 L.Projection.SphericalMercator.project(...) )，您可以在投影空间中进行数学计算，然后使用 L.Projection.SphericalMercator.unproject(...) 转换回纬度/经度当您将其添加到 map 时。然后您的多边形应该保持其形状。