Камера в Mapbox GL JS представляет собой абстракцию виртуального наблюдателя, определяющего, какая часть геопространственной сцены отображается и под каким углом она воспринимается. В 3D-режиме камера управляет не только положением центра карты, но и перспективой, наклоном, вращением и масштабированием сцены, формируя полноценную модель навигации в пространстве.
Камера в Mapbox GL JS опирается на Web Mercator-проекцию и описывается набором параметров, задающих положение наблюдателя относительно карты:
Эти параметры формируют матрицу преобразования, которая интерпретируется WebGL-рендерером для построения сцены.
Параметр center задаёт точку, находящуюся в фокусе
камеры. Он определяет смещение сцены относительно экрана, выраженное в
долготе и широте.
map.setCenter([69.2401, 41.2995]);Параметр zoom управляет логарифмическим масштабированием
сцены. Изменение zoom эквивалентно приближению или удалению камеры от
поверхности Земли.
map.setZoom(12);Масштабирование в Mapbox GL JS нелинейно: каждый следующий уровень увеличивает детализацию примерно в два раза, что соответствует тайловой структуре данных.
Параметр bearing задаёт вращение карты вокруг оси Z.
Значение измеряется в градусах по часовой стрелке относительно
севера.
map.setBearing(45);В 3D-сцене вращение влияет на ориентацию всех объектов, включая здания, рельеф и слои данных. При значениях, отличных от нуля, север перестаёт быть фиксированным верхним направлением, что усиливает пространственное восприятие сцены.
Параметр pitch отвечает за угол наклона камеры
относительно плоскости карты. В 2D-режиме значение равно 0, в 3D-сцене
может достигать значений до 60–85 градусов.
map.setPitch(60);При увеличении pitch активируется перспективная проекция, при которой удалённые объекты визуально уменьшаются, а вертикальные элементы приобретают глубину.
Большинство операций с камерой выполняется через объект
CameraOptions, который позволяет задавать сразу несколько
параметров:
map.jumpTo({
center: [69.2401, 41.2995],
zoom: 13,
bearing: 30,
pitch: 45
});Такой подход синхронизирует изменения в одной атомарной операции, предотвращая промежуточные состояния рендеринга.
Мгновенное изменение состояния камеры без анимации. Используется для резких переходов между сценами.
map.jumpTo({
center: [69.0, 41.0],
zoom: 10
});Плавный переход между состояниями с интерполяцией параметров.
map.easeTo({
center: [69.2401, 41.2995],
zoom: 14,
duration: 2000
});Алгоритм интерполяции обеспечивает сглаживание траектории движения камеры, включая нелинейные изменения масштаба.
Анимация с траекторией, имитирующей полёт над поверхностью. Используется сферическая интерполяция и сглаживание ускорения.
map.flyTo({
center: [69.2401, 41.2995],
zoom: 15,
speed: 1.2,
curve: 1.8
});Параметр curve влияет на высоту дуги полёта, а
speed регулирует динамику перемещения.
Для активации трёхмерного рельефа используется источник DEM-данных и настройка terrain:
map.addSource('terrain', {
type: 'raster-dem',
url: 'mapbox://mapbox.terrain-rgb',
tileSize: 512,
maxzoom: 14
});
map.setTerrain({
source: 'terrain',
exaggeration: 1.5
});После активации рельефа камера начинает учитывать высотные данные, формируя полноценную 3D-поверхность.
Pitch в этом режиме становится ключевым параметром восприятия: при увеличении угла наклона усиливается эффект глубины, а геометрия поверхности приобретает выраженную вертикальную составляющую.
Камера в Mapbox GL JS использует матрицы вида и проекции. Математически состояние камеры можно представить как композицию:
В 3D-режиме применяется перспективная матрица, которая трансформирует координаты из географического пространства в экранное с учётом глубины.
Камера поддерживает параметры ограничения движения:
map.setMinZoom(5);
map.setMaxZoom(18);
map.setMinPitch(0);
map.setMaxPitch(70);Ограничения используются для стабилизации пользовательской навигации и предотвращения выхода за пределы допустимых значений сцены.
Состояние камеры может отслеживаться через событие move,
которое вызывается при любом изменении параметров:
map.on('move', () => {
const center = map.getCenter();
const zoom = map.getZoom();
const bearing = map.getBearing();
const pitch = map.getPitch();
});Эта модель позволяет строить внешние контроллеры интерфейса, синхронизированные с текущим положением камеры.
В 3D-режиме камера управляется жестами:
Каждое действие транслируется в изменение параметров камеры, после чего пересчитывается матрица рендеринга WebGL.
Анимации камеры используют кривые Безье и экспоненциальные функции сглаживания. Это обеспечивает естественное ускорение и замедление движения.
В flyTo применяются нелинейные функции интерполяции, которые предотвращают резкие скачки перспективы при изменении высоты и масштаба.
В 3D-режиме камера взаимодействует с несколькими типами слоёв:
Каждый слой реагирует на изменение pitch и bearing, создавая эффект параллакса.
Камера может быть связана с географическими объектами через вычисление bounding box:
map.fitBounds([
[68.9, 41.2],
[69.5, 41.4]
]);Этот метод автоматически рассчитывает оптимальные параметры center и zoom, обеспечивая полное отображение области.
Изменение камеры инициирует перерасчёт сцены на уровне GPU. При каждом движении выполняются следующие операции:
Оптимизация достигается за счёт частичной перерисовки и кеширования тайловых данных.
Камера в Mapbox GL JS выступает связующим звеном между геоданными, визуализацией и пользовательской интеракцией. Её параметры определяют не только положение наблюдателя, но и характер восприятия пространственной информации, включая глубину, масштаб и динамику сцены.