Mapbox GL JS использует систему проекций для преобразования географических координат (долгота/широта) в экранные координаты WebGL-контекста. По умолчанию применяется Web Mercator (EPSG:3857), но современная архитектура рендеринга позволяет использовать альтернативные глобусы и кастомные проекции, влияющие на визуализацию карты, поведение зума, перспективу и геометрические искажения.
Mapbox GL JS реализует проекционную систему как часть рендер-пайплайна WebGL: координаты тайлов, векторов и слоёв преобразуются через матрицы проекции, которые определяют форму мира в трёхмерном или псевдотрёхмерном пространстве. Это означает, что смена проекции затрагивает не только визуальный слой, но и всю модель координатного пространства карты.
Проекция в Mapbox GL JS определяется на уровне
Map-объекта и влияет на следующие компоненты:
lng/lat → world coordinatesВ классической Web Mercator все координаты проецируются цилиндрически, что приводит к увеличению масштабов у полюсов. В альтернативных проекциях, таких как globe, используется сферическая модель с перспективным отображением.
Внутри движка Mapbox GL JS проекционная матрица обновляется при каждом изменении камеры. Это позволяет плавно анимировать переходы между различными моделями мира без перезагрузки источников данных.
Web Mercator является стандартной проекцией:
Эта проекция используется по умолчанию, так как она оптимально подходит для тайловой системы.
Глобус представляет Землю как сферу:
При включении глобуса WebGL сцена переходит в сферическое пространство, а тайлы «оборачиваются» на поверхность сферы.
Пример конфигурации:
import mapboxgl from "mapbox-gl";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v12",
projection: "globe"
});В этом режиме камера работает в сферических координатах, а уровень зума интерпретируется как расстояние до поверхности глобуса.
В современных версиях Mapbox GL JS поддерживается динамическое изменение проекции через API:
map.setProjection("mercator");
map.setProjection("globe");Переключение сопровождается перерасчётом матриц камеры и пересборкой сценического состояния. При этом источники данных (GeoJSON, vector tiles) не перезагружаются, что делает переход визуально непрерывным.
Проекция в Mapbox GL JS представляет собой функцию:
P(lng, lat) → (x, y, z)Для Mercator:
x = R * lng
y = R * ln(tan(π/4 + lat/2))x = R ,y = R (( + ))
Для глобуса используется сферическая модель:
x = R cos(lat) cos(lng)
y = R cos(lat) sin(lng)
z = R sin(lat)x = R,y = R,z = R
Внутри WebGL эти координаты преобразуются в clip space через матрицы вида и проекции.
Камера в Mapbox GL JS состоит из:
В Mercator камера фактически работает в 2.5D пространстве, где z-ось моделирует масштабирование. В глобусе камера становится полноценной 3D-камерой.
Это приводит к следующим изменениям:
Каждая проекция накладывает ограничения:
Источники данных в Mapbox GL JS остаются независимыми от проекции:
Однако визуализация слоёв зависит от текущей проекции:
Поддержка кастомных проекций в Mapbox GL JS ограничена внутренним API WebGL, но архитектурно можно выделить три подхода:
Наиболее стабильный путь:
map.setProjection("globe");Некоторые эффекты достигаются через style transformations:
Это не меняет проекцию напрямую, но имитирует альтернативную геометрию пространства.
Через CustomLayerInterface можно внедрять собственные
WebGL-шейдеры:
const customLayer = {
id: "custom-projection-layer",
type: "custom",
renderingMode: "3d",
onAdd(map, gl) {
this.map = map;
this.gl = gl;
},
render(gl, matrix) {
// собственная математика проекции
}
};Этот подход позволяет полностью заменить логику проекции для отдельных объектов, но не всей карты.
Современная эволюция Mapbox GL JS движется в сторону поддержки дополнительных глобальных моделей:
Эти проекции особенно полезны в аналитических и научных приложениях, где Web Mercator не подходит.
Проекции напрямую влияют на производительность WebGL-сцены:
Оптимизация внутри Mapbox GL JS включает:
Каждый кадр проходит через цепочку матриц:
Итоговое преобразование:
MVP = P × V × MM_{MVP} = P V M
В глобусной модели матрица P становится нелинейной функцией сферического преобразования, а не линейной матрицей перспективы.
Проекции изменяют интерпретацию событий:
В Mercator перемещение экрана соответствует линейному смещению координат, в globe — вращению 3D-объекта.
Некоторые реализации в Mapbox GL JS комбинируют несколько моделей:
Это достигается интерполяцией матриц и геометрий, что позволяет избежать резких переходов между системами координат.
Разные типы слоёв по-разному реагируют на проекцию:
fill — требует перерасчёта полигоновline — изменяет кривизну сегментовsymbol — адаптирует billboard-ориентациюraster — перепроецируется текстурноОсобенно критично поведение symbol-слоёв в globe, где необходимо учитывать curvature и perspective scaling.
Проекции в Mapbox GL JS можно рассматривать как заменяемый слой геометрического мира, который:
Эта архитектура позволяет расширять систему от плоской карты до полноценного 3D-глобуса и специализированных научных проекций без изменения базовой модели данных.