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

Original map is a square of 2048*2048px

的平方，然后我有标记（数以千计）

Then I got markers (many thousands)

地图坐标设置为从0到100的ax，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！

如果您使用单张，您应该指定地图选项< a href =http://leafletjs.com/reference.html#map-crs =nofollow> 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).

这将避免

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屋！