В основе всех вычислений в Leaflet лежит разделение пространственных координат на несколько уровней представления. Географические координаты (широта и долгота) существуют в сферической модели Земли, тогда как визуализация на экране опирается на декартову систему координат в пикселях. Между этими слоями располагается промежуточная мировая проекция, которая служит связующим звеном между географией и экраном.
Географическая точка задаётся как пара значений:
Эти значения не могут быть напрямую отображены в пикселях без преобразования, поскольку экранная карта представляет собой плоскую поверхность.
Leaflet по умолчанию использует систему координат EPSG:3857 (Web Mercator). Она переводит сферические координаты в плоское пространство, пригодное для тайловой карты.
Ключевые особенности:
Преобразование происходит через проекцию:
[ x = R ] [ y = R (( + ))]
где:
После проекции Leaflet переводит географические координаты в мировые пиксельные координаты. Это единая система координат, в которой вся карта представляется как огромное изображение.
Размер мирового пространства зависит от уровня масштабирования:
[ worldSize = tileSize ^{zoom}]
Где:
tileSize обычно равен 256 пикселямzoom — текущий уровень масштабаТаким образом:
Эта модель обеспечивает линейное увеличение детализации при каждом уровне zoom.
Leaflet выполняет преобразование в два этапа:
Основной метод:
map.project(latlng, zoom)Он возвращает координаты в мировом пиксельном пространстве.
Далее применяется смещение относительно текущего центра карты:
map.latLngToLayerPoint(latlng)Результат — точка в системе координат слоя (Layer Point), где:
Leaflet различает несколько уровней пиксельных координат:
Координаты относительно DOM-контейнера карты:
map.latLngToContainerPoint(latlng)Особенности:
Координаты внутри внутреннего слоя карты:
map.latLngToLayerPoint(latlng)Особенности:
Глобальная система координат:
map.project(latlng, zoom)Используется как промежуточный уровень между географией и отображением.
Ключевой элемент трансформации — позиция центра карты. Все пиксельные координаты вычисляются относительно центра текущего view.
Пусть:
Тогда экранная точка:
[ P_{screen} = P_{world} - C_{world} + ]
где size — размер контейнера карты.
Это обеспечивает стабильное позиционирование при панорамировании.
Leaflet поддерживает обратное преобразование через:
map.unproject(point, zoom)Процесс включает:
Методы обратного преобразования:
map.layerPointToLatLng(point)
map.containerPointToLatLng(point)Каждый уровень zoom изменяет масштаб всей системы координат экспоненциально.
При увеличении zoom на 1:
Формально:
[ scale = 2^{zoom}]
Это означает, что одна и та же географическая точка имеет разные пиксельные координаты на разных уровнях масштаба.
Тайлы формируют основу отображения карты. Каждый тайл — квадрат 256×256 пикселей.
Позиция тайла вычисляется как:
[ tileX = ] [ tileY = ]
где ( x, y ) — мировые пиксельные координаты.
Это позволяет:
Leaflet использует координатные преобразования во всех визуальных операциях:
Каждый объект проходит через слой преобразований:
После преобразования в пиксельную систему координат все географические объекты становятся обычными геометрическими фигурами на плоскости.
Это позволяет применять стандартные алгоритмы:
При этом географическая точность сохраняется за счёт обратного преобразования.
Хотя Web Mercator является стандартом, Leaflet поддерживает альтернативные CRS.
При смене системы координат изменяются:
Но интерфейс преобразований остаётся единым:
map.options.crsПолный путь координаты:
LatLng → Projection → World Pixel → Layer Point → Screen
И обратный путь:
Screen → Layer Point → World Pixel → Projection → LatLng
Эта цепочка обеспечивает согласованность между географической моделью и визуальным представлением карты, позволяя работать с объектами как в географическом, так и в пиксельном пространстве без потери точности и предсказуемости поведения интерфейса.