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)

为什么这些数字与示例中的数字不完全匹配？因为当我编写Leaflet教程时，我可能使用了其他像素进行测量。但是，该错误可以忽略不计。

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

  

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

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