В MapLibre GL JS основой всей геометрии является система географических координат, в которой положение точки задаётся парой значений долгота/широта. Используется порядок [longitude, latitude], что принципиально отличается от привычного математического представления координат как (x, y).
Ограничение широты связано с проекцией, используемой в веб-картах, где полюса не могут быть отображены корректно из-за асимптотического роста значений.
GeoJSON, используемый в MapLibre GL JS, строго придерживается формата:
{
"type": "Point",
"coordinates": [30.5, 50.45]
}где первым элементом всегда идёт долгота.
В основе MapLibre GL JS лежит проекция Web Mercator (EPSG:3857). Это цилиндрическая проекция, которая преобразует сферические координаты Земли в плоскую декартову систему координат.
Преобразование выполняется по формулам:
[ x = R ]
[ y = R (( + ))]
где:
MapLibre GL JS использует схему slippy map tiles, где мир разбивается на квадратные тайлы фиксированного размера (обычно 256×256 пикселей).
Количество тайлов на уровне зума определяется выражением:
[ n = 2^z]
где:
Координаты тайла вычисляются как:
[ x_{tile} = ^z ]
[ y_{tile} = ^z ]
Эта система обеспечивает согласованное разбиение мира на квадратные блоки независимо от уровня приближения.
MapLibre GL JS работает с несколькими уровнями координатных пространств:
Исходные координаты данных. Используются в слоях, источниках и GeoJSON.
После преобразования координаты становятся линейными значениями в метрах.
Используется для отрисовки тайлов и геометрии на текущем зуме.
[ worldSize = tileSize ^z]
где tileSize обычно равен 512 или 256 пикселей.
Финальная система координат, в которой выполняется рендеринг WebGL.
Преобразование проходит цепочку:
lng/lat → Web Mercator → world pixels → screen pixelsВнутренний рендер MapLibre GL JS опирается на матричные преобразования, где каждая точка проходит через серию трансформаций:
Вектор координат в однородных координатах:
[ P_{screen} = M_{projection} M_{view} M_{model} P_{world}]
Эта цепочка позволяет реализовать поворот карты, наклон и плавное масштабирование без потери согласованности данных.
В MapLibre GL JS zoom является непрерывной величиной, а не дискретной. Это означает, что между целыми уровнями зума существуют промежуточные состояния.
Масштаб сцены определяется как:
[ scale = 2^z]
где ( z ) может быть дробным числом, например 10.35.
Это обеспечивает плавное увеличение и уменьшение карты без скачков между тайловыми уровнями.
Мировая модель MapLibre GL JS предполагает бесконечную горизонтальную прокрутку. Это реализуется через повторение координат по оси долготы.
Основной механизм:
Антимеридиан (±180°) не является разрывом визуально, хотя в географическом смысле это граница системы координат.
MapLibre GL JS поддерживает:
При этом координаты объектов не изменяются, изменяется только матрица вида.
При наклоне происходит переход от ортографической модели к перспективной, где дальние объекты визуально уменьшаются:
[ x’ = , y’ = ]
(упрощённое представление перспективного деления)
Каждый слой может использовать собственное преобразование геометрии, но базовая система остаётся глобальной.
Типичные источники данных:
Vector tiles часто используют нормализованную систему координат внутри тайла:
Это позволяет масштабировать геометрию независимо от глобальной проекции.
MapLibre GL JS предоставляет API для конвертации координат:
map.project(lngLat) — перевод в экранные
координатыmap.unproject(point) — обратное преобразованиеmap.transform — доступ к внутреннему состоянию
матрицыПример преобразования:
const lngLat = [30.5, 50.45];
const point = map.project(lngLat);Результат зависит от текущего zoom, pitch и bearing.
При высоких уровнях зума возникают особенности:
MapLibre GL JS использует техники:
Система координат MapLibre GL JS представляет собой многослойную трансформационную модель, где географические координаты проходят через цепочку преобразований:
Каждый уровень добавляет собственные свойства: от глобальной географии до пиксельной точности отрисовки.