javascript - 网络上的等 Angular 柱状图

Question

我计划为游戏的标记(图钉)构建在线 map ，但我无法设置标记的正确纬度。

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

然后我得到了标记(数千个)

map 坐标用 0 到 100 之间的 x、y 表示法设置。0, 0 是 map 的左上角，100, 100 是 map 的右下 Angular 。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，则应指定 map 选项crs并使用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 坐标，特别是在 map 图像方面。

例如，假设您将 map 图像设置为:

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

(这样它相当于缩放级别 0 时的 1 个图 block )

然后你可以进行如下转换:

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

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