Leaflet JS：使用米而不是纬度，经度的自定义二维投影

Question

我正在制作自定义游戏地图。这张地图基本上是一个光栅图像，上面覆盖了一些路径和标记。我想用Leaflet显示地图。

我正在纠结的是，Leaflet 使用纬度和经度来计算位置，而它使用米来计算距离（路径长度、圆半径等）。

在处理像我们地球这样的球形世界时，这是非常可以理解的，但它会使自定义地图变得复杂，因为它很平坦。

我希望能够以与距离相同的单位指定位置。

现在，默认情况下，Leaflet 使用球形墨卡托投影。根据Docs，可以定义自己的投影和坐标参考系统，但到目前为止我还无法做到这一点。

这怎么可能？或者有更简单的方法吗？

Answer 1

您应该看一下 Leaflet 中包含的简单坐标参考系统 (L.CRS.Simple)：

A simple CRS that maps longitude and latitude into x and y directly. May be used for maps of flat surfaces (e.g. game maps).

您可以像这样在初始化时定义 L.Map 的 CRS：

new L.Map('myDiv', {
    crs: L.CRS.Simple
});

一些进一步的阐述：正如@ghybs 在下面的评论和对你的问题的评论中指出的，默认的 sperical 墨卡托投影 (L.CRS.EPSG3857) 已经以米为单位工作。当你计算两个坐标之间的距离时，Leafletreturns米，例子：

var startCoordinate = new L.LatLng(0, -1);
var endCoordinate = new L.LatLng(0, 1);

var distance = startCoordinate.distanceTo(endCoordinate);

console.log(distance);

以上将在您的控制台上打印 222638.98158654713，即这两个坐标之间的距离（以米为单位）。问题是，当使用球面投影时，两个坐标之间的距离会随着你离赤道越远而变得越小，这在创建平面游戏世界时会出现问题。这就是为什么你应该使用 L.CRS.Simple，你不会有问题。

Leaflet JS：使用米而不是纬度，经度的自定义二维投影

Leaflet JS: Custom 2D projection that uses meters instead of lat,long

maps

map-projections

leaflet