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

Question

在 Leaflet 中的示例中(对于非地理图像)，他们设置“边界”。我试图了解他们如何计算这些值

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

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

Answer 1

哦，你是说这张图片:

如果您使用图像编辑器打开完整文件(位于 https://github.com/Leaflet/Leaflet/blob/v1.4.0/docs/examples/crs-simple/uqm_map_full.png )，您会看到它的大小为 2315x2315 像素。现在，表示 (0,0) 坐标的像素不在图像的一 Angular ，而是距图像左下角 56 个像素:

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

因此，如果我们测量网格 Angular 的像素坐标:

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 教程时可能使用了不同的像素进行测量。不过，错误可以忽略不计。

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

One common mistake when using CRS.Simple is assuming that the map units equal image pixels. In this case, the map covers 1000x1000 units, but the image is 2315x2315 pixels big. Different cases will call for one pixel = one map unit, or 64 pixels = one map unit, or anything. Think in map units in a grid, and then add your layers (L.ImageOverlays, L.Markers and so on) accordingly.

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