Ротация карты

Понятие ориентации карты и параметр heading

В HERE Maps вращение карты реализуется через параметр heading, который определяет угол поворота относительно северного направления. Значение задаётся в градусах:

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

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

В контексте API объект H.Map использует модель представления (view model), где heading является частью состояния камеры наряду с масштабом и наклоном.

Инициализация карты с поддержкой поворота

Базовая конфигурация карты создаётся через платформу и слой тайлов:

const platform = new H.service.Platform({
  apikey: 'YOUR_API_KEY'
});

const layers = platform.createDefaultLayers();

const map = new H.Map(
  document.getElementById('map'),
  layers.vector.normal.map,
  {
    center: { lat: 52.5200, lng: 13.4050 },
    zoom: 12,
    pixelRatio: window.devicePixelRatio || 1
  }
);

const beh * avior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
const ui = H.ui.UI.createDefault(map, layers);

По умолчанию вращение может быть доступно через жесты, если активирован Behavior.

Установка угла поворота через setHeading

Основной способ управления ротацией — изменение heading у объекта view model:

map.getViewModel().setLookAtData({
  heading: 45
});

Изменение происходит плавно, с анимацией по умолчанию.

Для мгновенного поворота используется параметр анимации:

map.getViewModel().setLookAtData(
  {
    heading: 90
  },
  true
);

Плавная анимация вращения

Ротация может быть анимирована с заданной длительностью и easing:

map.getViewModel().setLookAtData(
  {
    heading: 180
  },
  {
    duration: 800
  }
);

При изменении heading в сочетании с zoom или center формируется комплексная камера:

map.getViewModel().setLookAtData({
  center: { lat: 48.8566, lng: 2.3522 },
  zoom: 14,
  heading: 120
});

Чтение текущего угла поворота

Текущее значение ориентации карты извлекается из состояния view model:

const state = map.getViewModel().getLookAtData();

const currentHeading = state.heading;

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

Вращение карты через события интерфейса

При подключении H.mapevents.Behavior включается поддержка жестов, включая вращение двумя пальцами:

const beh * avior = new H.mapevents.Behavior(
  new H.mapevents.MapEvents(map)
);

В этом режиме изменение heading происходит автоматически при взаимодействии пользователя.

Ограничение вращения карты

В некоторых сценариях требуется запретить ротацию, фиксируя ориентацию карты на север.

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

behavior.disable(H.mapevents.Behavior.Feature.ROTATE);

Также возможно программное «сбросное» закрепление:

map.getViewModel().setLookAtData({
  heading: 0
});

Сброс ориентации к северу

Часто используется функциональность возврата карты в стандартное положение:

function resetRotation() {
  map.getViewModel().setLookAtData({
    heading: 0
  }, {
    duration: 500
  });
}

Такой подход применяется для UI-кнопок «Север вверх» или автоматической переориентации после навигации.

Связь rotation с наклоном (tilt)

В HERE Maps rotation часто используется совместно с наклоном камеры. Наклон задаётся через tilt:

map.getViewModel().setLookAtData({
  heading: 135,
  tilt: 60,
  zoom: 16
});

Сочетание tilt и heading формирует трёхмерное восприятие сцены, особенно в режимах навигации.

Программное вращение в цикле

Ротация может выполняться анимационно через изменение heading во времени:

let angle = 0;

setInterval(() => {
  angle = (angle + 5) % 360;

  map.getViewModel().setLookAtData({
    heading: angle
  });
}, 100);

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

Управление ограничениями вращения

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

function normalizeHeading(value) {
  return ((value % 360) + 360) % 360;
}

Это предотвращает накопление отрицательных значений и выход за диапазон.

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

Встроенный UI HERE Maps может содержать элементы управления ориентацией. При создании интерфейса:

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

доступны контролы, позволяющие визуально управлять вращением карты.

Дополнительно возможно создание собственного контроллера:

const btn = document.createElement('button');
btn.innerText = 'Rotate 90°';

btn.oncl ick = () => {
  const state = map.getViewModel().getLookAtData();

  map.getViewModel().setLookAtData({
    heading: state.heading + 90
  });
};

document.body.appendChild(btn);

Синхронизация rotation с маршрутом

При навигационных сценариях heading часто синхронизируется с направлением движения:

map.getViewModel().setLookAtData({
  center: currentPosition,
  heading: courseAngle
});

courseAngle обычно вычисляется на основе GPS-данных или сегмента маршрута, что позволяет карте «смотреть» вперёд по направлению движения.

Работа с ограниченной поддержкой вращения

В некоторых конфигурациях устройства или браузера поддержка ротации жестами может быть ограничена. В таких случаях вращение остаётся доступным только программно через API setLookAtData.

Фиксация поведения:

const beh * avior = new H.mapevents.Behavior(
  new H.mapevents.MapEvents(map),
  {
    rotateSpeed: 0
  }
);

Комбинированное управление камерой

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

  • center — позиция
  • zoom — масштаб
  • heading — поворот
map.getViewModel().setLookAtData({
  center: { lat: 51.5074, lng: -0.1278 },
  zoom: 13,
  heading: 225
}, {
  duration: 1000
});

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

Оглавление