О, вы имеете в виду это изображение:
Если вы откроете полный файл (доступен на 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. Простое предполагает, что единицы карты равны пикселям изображения.В этом случае карта покрывает 1000x1000 единиц, но изображение имеет размер 2315x2315 пикселей.В разных случаях потребуется один пиксель = одна единица карты или 64 пикселя = одна единица карты или что-то еще. Подумайте в единицах карты в сетке , а затем добавьте свои слои (L.ImageOverlays, L.Markers и т. Д.) Соответственно.
Если у вас есть собственная игровая карта (или что-нибудь еще), вы должны спросить себя: где находится координата (0,0)?Каковы координаты краев изображения в единицах, которые я буду использовать?