В Mapbox GL JS по умолчанию используется проекция Web Mercator (EPSG:3857), которая преобразует сферические координаты земли в плоскую карту. Это решение исторически связано с совместимостью веб-картографических систем и высокой скоростью рендеринга тайлов.
Web Mercator основан на цилиндрической проекции, где долгота преобразуется линейно, а широта — через логарифмическую функцию:
x = R y = R (( + ))
где:
Ключевое ограничение Web Mercator заключается в искажении площадей: чем ближе к полюсам, тем сильнее растяжение объектов. Именно поэтому Гренландия на карте выглядит сопоставимой с Африкой, хотя фактически различие кратно.
В Mapbox GL JS эта проекция используется не только для отображения тайлов, но и как внутренняя система координат для всех слоёв, источников и взаимодействий.
Mapbox GL JS поддерживает переключение между несколькими встроенными проекциями. Основные из них:
mercator — классическая Web Mercatorglobe — трёхмерный глобусПроекция задаётся на уровне карты через конфигурацию:
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [30, 50],
zoom: 2,
projection: 'mercator'
});Изменение проекции возможно динамически:
map.setProjection('globe');Переключение между моделями влияет не только на визуализацию, но и на поведение камеры, освещение, а также способ интерпретации крайних значений координат.
Проекция globe реализует трёхмерную модель Земли с
перспективной отрисовкой. В отличие от Web Mercator, здесь отсутствует
бесконечное растяжение по вертикали: поверхность замыкается в сферу.
Ключевые особенности:
Внутри движка используется сферическая модель, где координаты переводятся в декартову систему:
x = R y = R z = R
Эта модель позволяет отрисовывать карту как физически корректную сферу, на которую накладываются векторные и растровые данные.
Переход между проекциями изменяет не только внешний вид, но и математическую основу взаимодействий.
Web Mercator:
Globe:
Особенно заметны различия при изменении масштаба: в Mercator приближение ограничено уровнем детализации тайлов, тогда как Globe добавляет геометрическую глубину.
Помимо API, проекция может задаваться через стиль карты:
const map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
projection: {
name: 'globe'
},
sources: {},
layers: []
}
});Такой подход важен при создании полностью кастомных стилей, где необходимо фиксировать пространственную модель на уровне конфигурации.
Все источники данных в Mapbox GL JS — GeoJSON, vector tiles, raster tiles — интерпретируются в рамках текущей проекции.
GeoJSON остаётся в географических координатах (WGS84), но визуальное преобразование происходит на уровне рендера. Это означает, что:
Векторные тайлы особенно чувствительны к проекции, поскольку их координаты уже предагрегированы. При смене проекции происходит перерасчёт экранного пространства и пересэмплирование геометрии.
Разные типы слоёв по-разному реагируют на смену проекции:
Особое внимание требуется при работе с текстовыми слоями: при переходе в Globe текст может менять угол наклона и поведение якорей.
Проекция тесно связана с моделью камеры. В Mapbox GL JS камера определяется через:
В Globe-проекции появляется дополнительная зависимость от радиуса сферы. Это влияет на интерпретацию zoom: он становится не просто масштабированием, а приближением к поверхности сферы.
При увеличении pitch в Globe камера начинает работать как орбитальная система, вращающаяся вокруг центра Земли.
Web Mercator остаётся стандартом благодаря совместимости, но имеет фундаментальные ограничения:
Globe-проекция частично решает эти проблемы, но вводит новые ограничения:
Динамическая смена проекции требует учёта состояния камеры:
map.on('load', () => {
document.getElementById('switch').addEventListener('click', () => {
const current = map.getProjection();
map.setProjection(current === 'globe' ? 'mercator' : 'globe');
});
});При переключении важно учитывать:
Без этих корректировок визуальная сцена может резко сместиться.
Несмотря на смену проекции, входные координаты остаются в стандартной географической системе (долгота/широта). Это позволяет использовать единый формат данных:
const point = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [69.6, 42.3]
}
};Однако интерпретация расстояний и направлений зависит от проекции. В Mercator расстояния искажены, тогда как в Globe они ближе к геодезическим.
В Globe-проекции появляется дополнительная визуальная модель освещения:
Эти параметры создают эффект физической планеты. При этом геометрия слоёв остаётся прежней, но освещение влияет на восприятие высот и контуров.
Переключение между Mercator и Globe требует перерасчёта большого количества данных на GPU. Оптимизация достигается через:
На больших наборах данных переход может сопровождаться кратковременной деградацией FPS, что связано с перестроением геометрического пайплайна.
Внутри Mapbox GL JS каждая проекция описывается через матрицы преобразования. Для перехода из географических координат в экранные используется последовательность:
P_{screen} = M_{projection} M_{camera} P_{world}
где:
Эта модель позволяет абстрагировать сложность геометрических преобразований и унифицировать работу разных типов проекций в одном рендеринг-пайплайне.
Хотя Mapbox GL JS предоставляет ограниченный набор встроенных проекций, архитектура позволяет интегрировать дополнительные математические модели через стиль и кастомные трансформации данных.
При этом любые нестандартные проекции требуют учёта:
Реализация таких решений обычно строится на промежуточной трансформации GeoJSON перед передачей в источник данных или на кастомных слоях рендеринга.