Web 上的等距矩形地图

Question

我计划为游戏的标记（大头针）构建在线地图，但我无法设置标记的正确纬度。

原始地图是一个2048*2048px的正方形

然后我得到了标记（数千个）

地图坐标使用从 0 到 100 的 x、y 表示法设置。 0, 0 是地图的左上角，100, 100 是地图的右下角。 x=50, y=50 就是 lat = 0°, lng = 0°（图片的中心）。

为了从我的符号转换为经度，我使用了这个 JS 函数，它运行良好：

        function longitude(x)
        {
            var lng = 0
            if (x < 50) // Negative Longitude (West)
            {
                lng = (x - 50) / 50 * 180;
            }
            else // Positive Longitude (East)
            {
                lng = (50 - x) / 50 * 180;
            }
            return lng
        }

但是对于纬度它不起作用，因为那些引擎使用墨卡托投影而我没有。

如果有人有正确的公式，将不胜感激:(

Answer 1

欢迎来到 SO！

如果您使用 Leaflet，则应指定地图选项 crs 并使用 L.CRS.Simple：

一个简单的 CRS，将经度和纬度直接映射到 x 和 y。可用于平面地图（例如游戏地图）。请注意，y 轴仍应反转（从下到上）。

这将避免Web Mercator 投影，尤其是纬度，这是您想出的一种特殊计算（有关方程式，请参阅链接的维基百科文章）。

然后您就可以正确地将您的 x 和 y 坐标映射到您的需要，尤其是在您的地图图像方面。

例如，假设您将地图图像设置为：

L.imageOverlay("imageUrl", [[0, 0], [256, 256]]).addTo(map);

（使其在缩放级别 0 时适合 1 个图块）

然后您可以进行如下转换：

function longitude(x) {
  return x / 100 * 256;
}

function latitude(y) {
  return 256 - y / 100 * 256; // Still need to revert y.
}