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 and use 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). Note that the y axis should still be inverted (going from bottom to top).

这将避免 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.
}

Web 上的等距柱状地图

Equirectangular map on Web

javascript

dictionary

formula

mercator

leaflet