Web 上的等距矩形地图 [英] Equirectangular map on Web

问题描述

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

I plan to build an online map for markers (pins) of a game and I don't manage to set the correct latitude of my markers.

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

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

Then I got markers (many thousands)

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

Map coordinates are set with a x, y notation from 0 to 100. 0, 0 is the top left corner and 100, 100 is the bottom right corner of the map. x=50, y=50 is lat = 0°, lng = 0° (the center of the picture).

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

To convert from my notation to longitude I use this JS function, it works well :

        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
        }

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

But for latitude it don't work because those engines use a Mercator projection and me not.

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

If someone have the correct formula, it would be greatly appreciated :(

推荐答案

欢迎来到 SO！

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

If you are using Leaflet, you should specify the map option crs and use L.CRS.Simple:

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

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 投影，尤其是纬度，这是您的特殊计算想通了(有关方程式，请参阅链接的 Wikipedia 文章).

This will avoid the Web Mercator projection, especially the latitude which is a special computation as you figured out (see the linked Wikipedia article for the equation).

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

Then you are left with correctly mapping your x and y coordinates to your need, especially in respect with your map image.

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

For instance, assuming you set your map image as:

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

(使其在缩放级别 0 时适合 1 个图块)

(so that it fits the equivalent of 1 tile at zoom level 0)

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

Then you could have a conversion like:

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

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

这篇关于Web 上的等距矩形地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！