Leaflet CRS.Simple 教程中的边界是如何计算的？

Question

在Leaflet的例子中（对于非地理图像），他们设置了“边界”。我试图了解他们如何计算值

var bounds = [[-26.5,-25], [1021.5,1023]]; 

原点在左下角，y 向上/x 向右增加。负数是怎么出现在这里的？此外，经过实验，我发现如果为边界指定不同的坐标，实际像素坐标会发生变化。我有一个我想使用的自定义 png 地图，但由于这个原因我无法继续。

Answer 1

哦，你是说这张图：

如果您使用图像编辑器打开完整文件（可在https://github.com/Leaflet/Leaflet/blob/v1.4.0/docs/examples/crs-simple/uqm_map_full.png 获得），您会看到它尺寸为 2315x2315 像素。现在，代表 (0,0) 坐标的像素不在图像的角落，而是在距离图像左下角 56 个像素处：

同样，(1000, 1000) 坐标距图像右上角约 48 个像素：

因此，如果我们测量网格角点的像素坐标：

Game coordinate (0, 0) ? Pixel coordinate (59, 56)
Game coordinate (1000, 1000) ? Pixel coordinate (2264, 2267)

这里的问题是找到图像的边界（以游戏坐标测量）。或者，换句话说：

Pixel coordinate (0, 0) ? Game coordinate (?, ?)
Pixel coordinate (2315, 2315) ? Game coordinate (?, ?)

我们知道像素与游戏坐标的比率是恒定的，我们知道图像大小和到坐标网格的距离，所以我们可以推断：

1000 horizontal game units = image width - left margin - right margin

或者

1000 horizontal game units = 2315px - 56px - 48px = 2213px

因此像素/游戏单位比率为

2213px / 1000 game units = 2.213 px/unit

因此左边距是...

~59px = ~59px / (2.213px/unit) ~= 26.66 game units

...因此图像的左边缘约为 -26.66 个游戏单位。右边距同上...

~51px = ~51px / (2.213px/unit) = ~23.04 game units

...因此图像的右边缘是 ~1023.04 个游戏单位

对顶部和底部边距重复此操作，我们可以填充所有数字：

Pixel coordinate (0, 0) ? Game coordinate (-26.66, -25)
Pixel coordinate (2315, 2315) ? Game coordinate (1023.04, 1025)

为什么这些数字与示例中的数字不完全匹配？因为我在编写传单教程时可能使用了不同的像素进行测量。不过，这个错误可以忽略不计。

让我评论一下那个教程中的一句话：

使用 CRS.Simple 时的一个常见错误是假设地图单位等于图像像素。在这种情况下，地图覆盖 1000x1000 个单位，但图像大小为 2315x2315 像素。不同的情况会要求一个像素 = 一个地图单元，或者 64 个像素 = 一个地图单元，或者任何东西。考虑网格中的地图单位，然后相应地添加图层（L.ImageOverlays，L.Markers等等）。

如果您有自己的游戏地图（或其他任何东西），您应该问自己：(0,0) 坐标在哪里？我要使用的单位中图像边缘的坐标是多少？