Leaflet.js 用户脚本，从坐标转换为经纬度时遇到问题答案

【问题标题】：Leaflet.js userscript, trouble converting from coords to lat-longLeaflet.js 用户脚本，从坐标转换为经纬度时遇到问题
【发布时间】：2021-11-15 12:29:39
【问题描述】：

我正在尝试创建一个用户脚本来扩展 Leaflet.js 在线游戏应用程序的功能：https://dayz.ginfo.gg/chernarusplus/#c=-12;-156;1 我无法创建将坐标转换为 leaflet.js 使用的纬度/经度值的函数。

地图本身为 15,360 x 15,360 米（从游戏的角度来看）。我已经使用leaflet.js lat/long 值通过实验确定了地图的宽度/高度。

以下代码在所有 4 个角和中心创建一个圆。

// Top right corner: [83.81, 167.2]
// Bottom left corner: [-88.81, -180]

// Lat/long "height/width" of the map
var b = {x: 86.31, y: 173.6};

// Centre of the map (lat/long)
var h = {x: -2.5, y: -6.4};

L.circleMarker([h.x + b.x, h.y + b.y], {radius: 10}).addTo(iZurvive._map);
L.circleMarker([h.x + b.x, h.y - b.y], {radius: 10}).addTo(iZurvive._map);
L.circleMarker([h.x - b.x, h.y + b.y], {radius: 10}).addTo(iZurvive._map);
L.circleMarker([h.x - b.x, h.y - b.y], {radius: 10}).addTo(iZurvive._map);
L.circleMarker([h.x, h.y], {radius: 10}).addTo(iZurvive._map);

当我尝试创建一个将游戏位置（x/y 坐标以米为单位）转换为leaflet.js 使用的纬度/经度值的函数时，我没有得到正确的位置。我通过尝试在中心和左下角中间画一个圆圈来进一步测试，但这也是偏移的；代码如下

// Should be halfway between centre and bottom left corner, but it isn't
L.circleMarker([h.x - (b.x / 2), h.y - (b.y / 2)], {radius: 10}).addTo(iZurvive._map);

这张图片显示了中间圆圈的位置（红色标记）：

我在游戏坐标和leaflet.js lat/long 之间转换的函数如下，虽然测试它会产生相当大的偏移：

const MAP_SIZE = 15360;
function circle(_x, _y) {
   var scale = {x: MAP_SIZE / (b.x * 2), y: MAP_SIZE / (b.y * 2)};
   var coords = {x: _x / scale.y, y: _y / scale.y};
   L.circleMarker([h.x - b.x + coords.x, h.y - b.y + coords.y], {radius: 10}).addTo(iZurvive._map);
}
// Should be bottom left of the map but is moreso left centre
circle(4420, 2840);

【问题讨论】：

所以我猜你还没读过关于L.CRS.Simple的传单教程？

标签： javascript leaflet coordinates

【解决方案1】：

使用L.LocUtil.pointToCoords 函数和存储在leaflet.js 应用程序的全局变量中的缩放值进行了修复。

以下代码在提供的 x、y（例如 1000、1000）坐标处正确放置了一个标记：

var t = L.LocUtil.pointToCoords({x: 1000, y: 1000}, iZurvive._locSearch.options.scalingParams)
L.circleMarker(t, {radius: 10}).addTo(iZurvive._map);

【讨论】：