在Leaflet的例子中(对于非地理图像),他们设置了“边界”。我在试着理解他们是如何计算这些值的
var bounds = [[-26.5,-25], [1021.5,1023]];
原点是左下角,y向上/x向右递增。负数是怎么出现在这里的?此外,在实验之后,我发现如果您为边界指定不同的坐标,则实际的像素坐标会发生变化。我有一个自定义的png地图,我想使用,但我无法继续由于这一点。
发布于 2019-02-22 05:59:34
哦,你是说这张图片:
如果您使用图像编辑器打开完整的文件(可在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
...therefore图像的左边缘是~ -26.66个游戏单位。右边距相同...
~51px = ~51px / (2.213px/unit) = ~23.04 game units
...therefore图像的右边缘约为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)坐标在哪里?我将使用的单位中图像边缘的坐标是多少?
https://stackoverflow.com/questions/54816178
复制相似问题