Maps 传单JS：自定义二维投影，使用米而不是lat，long

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

我正在挣扎的是，传单使用纬度和经度来计算位置，而它使用米来表示距离（路径长度、圆半径等）

当处理像地球这样的球形世界时，这是很容易理解的，但这会使自定义地图变得复杂，因为它非常平坦

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

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

---

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

您应该看看手册中包含的简单坐标参考系（

L.CRS.simple

）：

将经度和纬度直接映射到x和y的简单CRS。可用于平面地图（例如游戏地图）

您可以在初始化时定义

L.Map

的CRS，如下所示：

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

一些进一步的阐述：正如@ghybs在下面的评论和对您的问题的评论中指出的，默认的特殊墨卡托投影（

L.CRS.EPSG3857

）已经以米为单位工作。计算两个坐标之间的距离时，传单返回米，例如：

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

var distance = startCoordinate.distanceTo(endCoordinate);

console.log(distance);

---

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

您应该查看手册中包含的简单坐标参考系（

L.CRS.simple

）：

将经度和纬度直接映射到x和y的简单CRS。可用于平面地图（例如游戏地图）

您可以在初始化时定义

L.Map

的CRS，如下所示：

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

一些进一步的阐述：正如@ghybs在下面的评论和对您的问题的评论中指出的，默认的特殊墨卡托投影（

L.CRS.EPSG3857

）已经以米为单位工作。计算两个坐标之间的距离时，传单返回米，例如：

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

var distance = startCoordinate.distanceTo(endCoordinate);

console.log(distance);

---

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

L.CRS.Simple

可以避免纬度和经度之间的差异，但它不会将坐标设为米？为此，您还需要定制CRS

转换

，类似于我知道的@ghybs，但我认为我不想让它变得简单，因为海报最终会遇到问题，因为纬度和经度的长度随纬度而变化。在创建一个游戏世界的过程中，这在很大程度上最终会造成问题。但是好的，我将扩展我的答案，包括这一点。

L.CRS.Simple

可以避免纬度和经度之间的差异，但它不会使坐标变成米？为此，您还需要定制CRS

转换

，类似于我知道的@ghybs，但我认为我不想让它变得简单，因为海报最终会遇到问题，因为纬度和经度的长度随纬度而变化。在创建一个游戏世界的过程中，这在很大程度上最终会造成问题。但是，好的，我也会扩展我的答案，包括这个。路径

distanceTo（）

和圆半径在传单版本0.x中计算，就好像你在一个球体上一样，不管指定的CRS是什么。您必须覆盖这些方法，或者使用传单1.x（目前处于beta版）。在传单版本0.x中，无论指定的CRS如何，路径

distanceTo（）

和圆半径都会像在球体上一样计算。您必须覆盖这些方法，或者使用传单1.x（目前处于beta版）。