Pitch и bearing

В Mapbox GL JS камера карты определяется набором параметров, которые управляют тем, как пользователь воспринимает географическое пространство. Среди них ключевую роль играют pitch и bearing — два свойства, отвечающие за наклон и поворот карты в трёхмерной сцене WebGL.

Pitch: наклон карты и переход к 3D-восприятию

Pitch задаёт угол наклона камеры относительно поверхности земли. В плоском (2D) режиме значение pitch равно 0, камера смотрит строго сверху вниз. При увеличении значения карта начинает «подниматься» в перспективу.

Диапазон pitch в Mapbox GL JS:

  • 0 — полностью горизонтальный вид (ортографическая проекция)
  • до 60–75 градусов — типичный диапазон для навигационных и визуальных эффектов
  • до 85–89 градусов — почти горизонтальный взгляд вдоль поверхности

При максимальных значениях карта становится близкой к виду «с уровня земли», но без полного перехода в режим street-level.

Пример установки pitch

map.setPitch(45);

или через параметры камеры:

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [69.2401, 41.2995],
  zoom: 12,
  pitch: 45
});

Анимация изменения наклона

map.easeTo({
  pitch: 60,
  duration: 2000
});

Pitch напрямую влияет на визуализацию 3D-слоёв, включая:

  • здания с extrusion (fill-extrusion)
  • terrain (рельеф)
  • линии с перспективным искажением

При увеличении pitch возрастает эффект глубины: объекты ближе к горизонту визуально сжимаются, создавая ощущение перспективы.

Bearing: вращение карты вокруг оси

Bearing определяет угол поворота карты относительно севера. По умолчанию север направлен вверх (bearing = 0). Изменение bearing вращает всю сцену вокруг вертикальной оси.

Диапазон значений:

  • 0 — север сверху
  • 90 — восток сверху
  • 180 — юг сверху
  • -90 или 270 — запад сверху

Установка bearing

map.setBearing(30);

Инициализация карты с поворотом:

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v11',
  center: [69.2401, 41.2995],
  zoom: 13,
  bearing: 120
});

Анимация вращения

map.rotateTo(90, { duration: 1500 });

или комбинированное изменение камеры:

map.easeTo({
  bearing: 180,
  duration: 3000
});

Bearing используется для:

  • ориентации карты по направлению движения
  • имитации навигации (автомобильные и авиационные сценарии)
  • создания визуально динамичных сцен

Взаимодействие pitch и bearing

Pitch и bearing работают совместно как компоненты камеры. Их комбинация формирует полноценную 3D-ориентацию сцены.

Типовые сценарии сочетания:

Навигационный режим

  • pitch: 45–60
  • bearing: совпадает с направлением движения

Картографический обзор

  • pitch: 0
  • bearing: 0

Иммерсивная визуализация города

  • pitch: 60–75
  • bearing: свободное вращение пользователем

Управление камерой через Camera API

Mapbox GL JS предоставляет единый интерфейс управления состоянием камеры:

map.setCamera({
  center: [69.2401, 41.2995],
  zoom: 14,
  pitch: 50,
  bearing: 135
});

Такой подход позволяет синхронно изменять все параметры без промежуточных состояний.

Ограничения и особенности поведения

При работе с pitch и bearing учитываются физические и рендеринговые ограничения WebGL:

  • при высоком pitch увеличивается нагрузка на GPU из-за перспективных вычислений
  • текстовые подписи могут становиться менее читаемыми при экстремальных углах
  • 3D-слои требуют корректной настройки источников высот (DEM, extrusion)
  • вращение карты влияет на направление всех экранных координат

Программное управление и пользовательские жесты

Mapbox GL JS поддерживает управление pitch и bearing через жесты:

  • drag rotate — изменение bearing
  • pitch with two-finger drag — изменение наклона

Программно поведение можно ограничить:

map.dragRotate.disable();
map.touchZoomRotate.disableRotation();

или, наоборот, принудительно включить:

map.dragRotate.enable();

Работа с северной ориентацией

Сброс ориентации карты:

map.resetNorth();

Плавное возвращение к нулевому bearing:

map.easeTo({
  bearing: 0,
  pitch: 0,
  duration: 2000
});

Этот механизм часто используется в интерфейсах, где требуется вернуть карту в стандартное состояние после пользовательской навигации.

Практические паттерны использования

Следование за объектом

  • bearing синхронизируется с направлением движения
  • pitch фиксируется для стабильного обзора
map.setBearing(course);
map.setPitch(60);

Обзор города

  • постепенное вращение камеры вокруг центра
let angle = 0;

setInterval(() => {
  angle += 1;
  map.setBearing(angle);
}, 100);

Анимация «погружения»

  • увеличение pitch с 0 до 60 для перехода от карты к 3D-виду
map.flyTo({
  pitch: 60,
  zoom: 15,
  duration: 4000
});
Оглавление