Leaflet CRS.Simple教程中的边界如何计算? [英] How are the bounds calculated in the Leaflet CRS.Simple tutorial?

问题描述

在传单(对于非地理图像)，它们设置界限".我试图了解他们如何计算值

In the example in Leaflet (for non geographic image), they set "bounds". I am trying to understand how they computed the values

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

原点在左下角，y向上增加，x向右增加.负数如何出现在这里?另外，在实验之后，我发现如果为边界指定不同的坐标，则实际像素坐标也会发生变化.我有一个自定义的png地图，我想使用它，但是由于这个原因我无法继续.

The origin is bottom-left and y increases upwards / x towards the right. How did negative numbers turn up here? Also, after experimentation, I see that the actual pixel coordinates change if you specify different coordinates for bounds. I have a custom png map which I would like to use but I am unable to proceed due to this.

推荐答案

哦，你的意思是这张图片:

Oh, you mean this image:

如果您打开完整文件(位于

If you open the full file (available at https://github.com/Leaflet/Leaflet/blob/v1.4.0/docs/examples/crs-simple/uqm_map_full.png ) with an image editor, you'll see that it measures 2315x2315 pixels. Now, the pixel that represents the (0,0) coordinate is not at a corner of the image, but rather 56 pixels away from the lower-left corner of the image:

类似地，(1000，1000)坐标距离图像的右上角约48个像素:

Similarly, the (1000, 1000) coordinate is about 48 pixels from the top-right corner of the image:

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

Therefore, if we measure pixel coordinates of the grid corners:

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

这里的问题是找到图像的边界(以游戏坐标为单位).或者，换句话说:

The problem here is finding the bounds (measured in game coordinates) of the image. Or, in other words:

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

我们知道像素与游戏的坐标之比是恒定的，我们知道图像的大小以及与坐标网格的距离，因此我们可以推断出东西:

We know that the pixel-to-game-coordinate ratio is constant, we know the image size and the distance to the coordinates grid, so we can infer stuff:

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

或

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

因此，像素/游戏单元的比例为

therefore the pixel/game unit ratio is

2213px / 1000 game units = 2.213 px/unit

因此左边距是...

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

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

...therefore the left edge of the image is at ~ -26.66 game units. Idem for the right margin...

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

...因此图像的右边缘为〜1023.04游戏单位

...therefore the right edge of the image is at ~1023.04 game units

重复上面和下面的边距，我们可以填写所有数字:

Repeating that for the top and bottom margins we can fill up all the numbers:

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

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

Why don't these numbers match the ones in the example exactly? Because I might have used a different pixel for measurement when I wrote that Leaflet tutorial. Still, the error is negligible.

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

Let me remark a sentence from that tutorial:

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

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.

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

If you have your own game map (or anything else), you should ask yourself: Where is the (0,0) coordinate? What are the coordinates of the image edges in the units I'm gonna use?

这篇关于Leaflet CRS.Simple教程中的边界如何计算?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！