問題描述

我計劃為游戲的標記(圖釘)構建在線地圖，但我無法設置標記的正確緯度.

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 上的等距矩形地圖的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！