NavigationControl

Mapbox GL JS предоставляет набор стандартных элементов управления картой, которые упрощают взаимодействие пользователя с визуализацией. Одним из ключевых компонентов интерфейса является элемент навигации, отвечающий за масштабирование, поворот и ориентацию карты. Этот контрол встроен в библиотеку и может быть добавлен без дополнительных зависимостей.

Навигационный контрол объединяет несколько функций:

  • увеличение и уменьшение масштаба карты
  • вращение карты вокруг оси
  • сброс наклона и ориентации (в зависимости от конфигурации)
  • отображение компаса при изменении угла поворота

Каждая из этих функций реализуется через единый UI-блок, который закрепляется в одном из углов контейнера карты.

Внутренне элемент представляет собой DOM-компонент, управляемый экземпляром класса NavigationControl, который регистрируется в системе управления контролами карты.

Добавление NavigationControl на карту

Базовое подключение выполняется через метод addControl:

import mapboxgl from 'mapbox-gl';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [30.3351, 59.9343],
  zoom: 10
});

map.addControl(new mapboxgl.NavigationControl());

После выполнения этого кода на карте появляется стандартный блок управления масштабом и вращением.

Параметры конфигурации

Конструктор NavigationControl принимает объект настроек, который позволяет гибко управлять отображением элементов интерфейса.

new mapboxgl.NavigationControl({
  showCompass: true,
  showZoom: true,
  visualizePitch: false
});

showCompass

Определяет, отображается ли компас. Если карта может вращаться, компас показывает текущий угол поворота и позволяет сбросить ориентацию.

showZoom

Включает или отключает кнопки увеличения и уменьшения масштаба.

visualizePitch

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

Позиционирование элемента на карте

Контрол можно разместить в одном из четырёх углов:

  • top-left
  • top-right
  • bottom-left
  • bottom-right

Размещение задаётся вторым параметром метода addControl:

map.addControl(
  new mapboxgl.NavigationControl(),
  'top-right'
);

Расположение влияет на UX: обычно навигационные элементы размещаются сверху справа, чтобы не перекрывать основную область визуализации.

Поведение при взаимодействии с картой

NavigationControl синхронизируется с состоянием камеры карты. Любые изменения:

  • zoom
  • bearing (поворот)
  • pitch (наклон)

автоматически отражаются в UI. Это обеспечивает реактивное обновление интерфейса без дополнительного кода.

При нажатии кнопок масштабирования происходит изменение свойства zoom у объекта камеры с фиксированным шагом. При вращении используется изменение bearing с плавной анимацией.

Управление через API карты

Хотя NavigationControl предоставляет визуальные элементы, все действия дублируются через программный API карты.

map.zoomIn();
map.zoomOut();
map.resetNorth();
map.rotateTo(0);

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

Отключение и удаление элемента

Контрол может быть удалён в любой момент:

const nav = new mapboxgl.NavigationControl();
map.addControl(nav);

// удаление
map.removeControl(nav);

Это полезно при динамической смене интерфейса, например при переключении режимов отображения.

Кастомизация поведения и интеграция

NavigationControl часто используется как базовый компонент, поверх которого строятся кастомные панели управления. Возможные сценарии:

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

Пример отключения компаса:

map.addControl(new mapboxgl.NavigationControl({
  showCompass: false
}));

Работа с сенсорными устройствами

На мобильных устройствах NavigationControl адаптируется под touch-интерфейс:

  • увеличенные зоны нажатия
  • поддержка инерционного масштабирования
  • взаимодействие с жестами (pinch, rotate)

В таких условиях контрол часто выполняет вспомогательную функцию, так как основные жесты уже обрабатываются самой картой.

Влияние на производительность и рендеринг

Сам NavigationControl практически не влияет на производительность, поскольку:

  • не участвует в WebGL-рендеринге
  • работает через DOM
  • использует события карты, а не отдельные вычисления

Основная нагрузка связана не с контролом, а с изменением состояния камеры, которое он инициирует.

Стилизация интерфейса

Контрол можно стилизовать через CSS, так как он генерирует стандартные DOM-элементы с предсказуемыми классами.

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

  • изменение размеров кнопок
  • переопределение цветов фона и иконок
  • адаптация под тёмные темы интерфейса
  • скрытие отдельных элементов через display: none
.mapboxgl-ctrl button {
  width: 36px;
  height: 36px;
}

Особенности поведения при комбинировании с другими контролами

NavigationControl часто используется вместе с другими встроенными элементами:

  • ScaleControl
  • FullscreenControl
  • GeolocateControl

При этом порядок добавления влияет только на визуальное расположение внутри контейнера, но не на логику работы.

При плотном наборе контролов рекомендуется группировать их по углам карты для предотвращения перекрытия элементов.

Событийная модель взаимодействия

Хотя NavigationControl не предоставляет собственных событий API, все его действия транслируются через события карты:

  • zoomstart, zoomend
  • rotatestart, rotate
  • pitchstart, pitchend

Это позволяет отслеживать взаимодействие пользователя, даже если оно инициировано через UI-кнопки.

map.on('zoomend', () => {
  console.log(map.getZoom());
});

Ограничения и поведение по умолчанию

NavigationControl не предоставляет:

  • ограничения диапазона zoom (они задаются на уровне карты)
  • ограничения угла поворота
  • логики бизнес-правил

Он является исключительно UI-слоем над состоянием камеры, не содержащим собственной геометрической или пространственной логики.

Оглавление