Методы setCenter, setZoom, setBearing

Метод setCenter изменяет географический центр карты, определяя новую точку, которая будет отображаться в центре viewport.

map.setCenter(lngLat);

Параметры

  • lngLat — координаты центра карты Формат:

    • массив [lng, lat]
    • объект { lng: number, lat: number }

Поведение

При вызове setCenter карта мгновенно или анимированно (в зависимости от текущих настроек и контекста) перемещает центр отображения в указанную точку. Масштаб и угол наклона при этом не изменяются.

Изменение центра не влияет на:

  • текущий zoom-уровень
  • bearing (поворот карты)
  • pitch (наклон), если он используется

Пример использования

map.setCenter([37.6173, 55.7558]); // Москва
map.setCenter({ lng: -0.1276, lat: 51.5072 }); // Лондон

Особенности применения

При частом вызове setCenter важно учитывать производительность, особенно при анимации пользовательского движения или синхронизации с внешними данными (например, GPS-трекинг).

map.setZoom

Метод setZoom изменяет уровень масштабирования карты.

map.setZoom(zoom);

Параметры

  • zoom — числовое значение уровня масштаба

Mapbox GL JS использует непрерывную шкалу zoom, где:

  • низкие значения показывают большие территории
  • высокие значения приближают карту до уровня улиц и зданий

Диапазоны

По умолчанию:

  • минимум обычно около 0
  • максимум может достигать 22+ (в зависимости от источника тайлов)

Эти границы могут быть изменены через minZoom и maxZoom в конфигурации карты.

Поведение

При вызове setZoom:

  • центр карты сохраняется
  • bearing и pitch не изменяются
  • масштаб изменяется с возможной анимацией

Пример

map.setZoom(10);
map.setZoom(14.5);

Анимация

Допускается второй параметр:

map.setZoom(12, { duration: 1000 });

При этом используется плавное изменение масштаба, аналогичное easeTo.

Практические аспекты

Резкие изменения zoom могут вызывать скачки визуального восприятия, поэтому в интерфейсах навигации часто применяется постепенное изменение уровня.

map.setBearing

Метод setBearing управляет поворотом карты относительно севера.

map.setBearing(bearing);

Параметры

  • bearing — угол поворота в градусах

Шкала измерения:

  • 0° — север вверх
  • положительные значения — поворот по часовой стрелке
  • отрицательные значения — поворот против часовой стрелки

Поведение

При изменении bearing:

  • центр карты сохраняется
  • zoom не изменяется
  • визуальная ориентация карты поворачивается вокруг центра

Пример

map.setBearing(0);   // север вверх
map.setBearing(90);  // восток вверх
map.setBearing(180); // юг вверх

Нормализация угла

Mapbox GL JS автоматически нормализует значение bearing в диапазон 0–360°, но логически допускаются отрицательные значения.

Совместное использование setCenter, setZoom и setBearing

Эти методы часто применяются совместно для программного управления состоянием карты. Их последовательность влияет на итоговое восприятие сцены.

map.setCenter([30.3158, 59.9391]);
map.setZoom(12);
map.setBearing(45);

Каждый метод изменяет отдельный аспект камеры:

  • setCenter — позиция
  • setZoom — масштаб
  • setBearing — ориентация

Поведение при анимации и переходах

Mapbox GL JS поддерживает несколько режимов изменения состояния карты. В отличие от jumpTo, который выполняет мгновенное изменение, setCenter, setZoom и setBearing могут участвовать в анимационных переходах при активных интерактивных действиях карты или использовании transition API.

При частых последовательных вызовах:

  • предыдущие анимации могут прерываться
  • состояние камеры перезаписывается последним вызовом

Взаимодействие с пользовательскими жестами

Если включены интерактивные режимы карты:

  • перетаскивание может конфликтовать с setCenter
  • колесо мыши может переопределять setZoom
  • вращение карты может конфликтовать с setBearing

В таких сценариях программные вызовы фактически становятся приоритетными над пользовательским вводом.

Ограничения и контроль состояния

При проектировании интерфейсов важно учитывать ограничения:

  • setZoom ограничивается minZoom / maxZoom
  • setBearing может быть ограничен через maxPitch или отключение вращения
  • setCenter может быть ограничен maxBounds

Пример ограничения области перемещения:

map.setMaxBounds([
  [29.0, 59.0],
  [31.0, 60.5]
]);

Типичные сценарии применения

Комбинация методов используется для:

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

Особенности состояния камеры

Камера Mapbox GL JS концептуально состоит из трёх основных параметров:

  • центр (center)
  • масштаб (zoom)
  • вращение (bearing)

Методы setCenter, setZoom, setBearing воздействуют на эти параметры независимо, без изменения других компонентов состояния. Это позволяет точно управлять геометрией отображения без побочных эффектов.

Оглавление