Компас и ориентация

Ориентация карты в JavaScript API платформы HERE Technologies и HERE Maps API строится вокруг управления углом поворота, наклоном и согласованием визуального направления карты с направлением движения пользователя или устройства. В отличие от статичного север-ориентированного представления, современные карты поддерживают динамическую ориентацию, где пользователь воспринимает карту как «поворачиваемую поверхность» реального мира.

Основной параметр ориентации — это bearing, задающий вращение карты вокруг вертикальной оси.

В JavaScript API он выражается в градусах:

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

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

map.setBearing(45);

Получение текущего значения:

const angle = map.getBearing();

Изменение bearing часто используется в навигации, когда карта должна совпадать с направлением движения транспортного средства или пользователя.

При работе с анимацией поворота важно учитывать плавность переходов:

map.animate({ bearing: 120 }, { duration: 1000 });

Компас как элемент управления

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

В HERE Maps API UI-компоненты подключаются через конфигурацию слоёв управления:

const ui = H.ui.UI.createDefault(map, defaultLayers);

ui.getControl('mapsettings').setVisibility(true);

Компас обычно связан с состоянием bearing. При значении 0° он считается «сброшенным», при любых отклонениях отображает индикатор поворота.

Типичное поведение:

  • клик по компасу → map.setBearing(0)
  • удержание/вращение → интерактивное изменение угла

Ориентация по направлению движения (heading)

Для навигационных сценариев важен параметр heading, получаемый из GPS или сенсоров устройства. Он отражает реальное направление движения объекта.

Пример интеграции:

watchPosition((position) => {
  const heading = position.coords.heading;

  if (heading !== null) {
    map.setBearing(heading);
  }
});

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

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

DeviceOrientation и сенсоры устройства

Более точная ориентация достигается через события DeviceOrientationEvent, которые предоставляют данные о вращении устройства в пространстве.

Основные параметры:

  • alpha — поворот вокруг оси Z (компасный курс)
  • beta — наклон вперёд/назад
  • gamma — наклон влево/вправо

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

window.addEventListener('deviceorientation', (event) => {
  const alpha = event.alpha;

  if (alpha !== null) {
    map.setBearing(360 - alpha);
  }
});

В реальных приложениях данные сенсоров требуют фильтрации:

  • устранение шумов
  • сглаживание угла
  • компенсация дрейфа компаса

Наклон карты (tilt) и влияние на ориентацию

Ориентация тесно связана с наклоном карты. В HERE Maps API наклон задаётся параметром tilt или pitch.

map.setTilt(60);

Наклон влияет на восприятие направления движения:

  • при 0° карта двумерная
  • при 60° появляется перспектива
  • при 70–80° усиливается эффект навигации «от первого лица»

Комбинация bearing + tilt формирует полноценную 3D-навигацию:

map.setBearing(90);
map.setTilt(70);

Геолокация и автоматическая ориентация

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

navigator.geolocation.watchPosition((pos) => {
  const { latitude, longitude, heading } = pos.coords;

  map.setCenter({ lat: latitude, lng: longitude });

  if (heading !== null) {
    map.setBearing(heading);
  }
});

Такой подход применяется в:

  • автомобильной навигации
  • пешеходных маршрутах
  • трекинговых приложениях

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

Синхронизация маркеров с направлением

Маркер, отображающий текущее положение пользователя, часто также ориентируется по bearing.

const icon = new H.map.Icon('arrow.png');

const marker = new H.map.Marker(position, { icon });

map.addObject(marker);

В расширенных сценариях маркер может поворачиваться:

marker.setRotation(map.getBearing());

Это создаёт эффект «стрелки движения», указывающей направление.

Типичные особенности и ограничения ориентации

При работе с компасом и ориентацией в браузерной среде возникают характерные ограничения:

  • нестабильность данных DeviceOrientation на десктопах
  • необходимость разрешений на доступ к сенсорам на мобильных устройствах
  • задержки обновления heading при слабом GPS
  • скачки угла при резких изменениях направления

В навигационных приложениях применяется сглаживание:

function smoothAngle(prev, next, factor = 0.1) {
  return prev + (next - prev) * factor;
}

Это предотвращает резкие скачки компаса и улучшает восприятие движения.

Взаимодействие UI-компаса с состоянием карты

Компас в интерфейсе не является независимым элементом — он всегда отражает текущее состояние bearing.

При изменении карты программно:

  • компас автоматически обновляет угол
  • при сбросе состояния возвращает север
  • при пользовательском жесте вращения синхронизируется в реальном времени

В архитектуре HERE Maps API это реализовано через реактивную модель состояния карты, где UI подписан на изменения параметров камеры.

Практика комбинирования ориентации и пользовательских сценариев

В сложных приложениях ориентация используется совместно с:

  • маршрутизацией
  • визуализацией трафика
  • 3D-объектами
  • AR-слоями

При этом корректная работа компаса требует согласованного управления тремя параметрами:

  • center (позиция)
  • bearing (поворот)
  • tilt (наклон)

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

Оглавление