Включение 3D режима

3D-режим в HERE Maps JavaScript API основан на векторной отрисовке карт с использованием WebGL, что позволяет отображать сцену не как плоское изображение, а как пространственную модель с перспективой, наклоном и вращением. В отличие от классического 2D-представления, карта становится сценой с камерой, которую можно перемещать, изменять угол обзора и управлять глубиной восприятия объектов.

В основе 3D-режима лежит концепция камеры. Карта перестаёт быть фиксированным слоем и начинает вести себя как виртуальная сцена, где:

  • zoom определяет расстояние до поверхности
  • tilt задаёт наклон камеры относительно горизонта
  • heading (bearing) отвечает за поворот сцены вокруг вертикальной оси

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

Инициализация платформы и базовой карты выполняется через стандартный объект H.service.Platform, после чего создаётся H.Map, поддерживающий WebGL-рендеринг.

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

const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(
  document.getElementById('map'),
  defaultLayers.vector.normal.map,
  {
    center: { lat: 48.8566, lng: 2.3522 },
    zoom: 16,
    pixelRatio: window.devicePixelRatio
  }
);

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

Активация наклона и вращения камеры

3D-представление становится заметным только при изменении параметров камеры. По умолчанию карта может оставаться в «плоском» состоянии, поэтому требуется задать наклон и поворот.

Ключевой момент: наклон (tilt) начинает влиять на отображение зданий только при достаточно высоком уровне масштабирования.

map.getViewModel().setLookAtData({
  tilt: 60,
  heading: 180,
  zoom: 17,
  center: { lat: 48.8566, lng: 2.3522 }
});

При увеличении значения tilt создаётся эффект перспективы, при котором дальние объекты визуально «сжимаются», а ближние приобретают объём.

3D-здания и векторные слои

Объёмные здания в HERE Maps формируются на основе данных векторных тайлов. Геометрия зданий экструдируется (выдавливается) вверх на основе атрибута высоты.

Для включения 3D-представления важно использовать векторный слой, а не растровый.

const vectorLayer = defaultLayers.vector.normal.map;

const map = new H.Map(
  document.getElementById('map'),
  vectorLayer,
  {
    center: { lat: 40.7128, lng: -74.0060 },
    zoom: 16,
    pixelRatio: window.devicePixelRatio
  }
);

При активном наклоне камеры здания начинают отображаться как трёхмерные объекты, при условии, что стиль слоя поддерживает extrusion.

Управление камерой в 3D-пространстве

Камера в HERE Maps управляется через LookAtData. Этот объект объединяет все параметры 3D-сцены:

  • центр карты
  • масштаб
  • наклон
  • направление

Изменение любого из этих параметров мгновенно пересчитывает сцену.

function setCamera(zoom, tilt, heading, lat, lng) {
  map.getViewModel().setLookAtData({
    zoom,
    tilt,
    heading,
    center: { lat, lng }
  });
}

При плавной анимации можно добиться эффекта «пролёта» над городом:

map.getViewModel().setLookAtData(
  {
    zoom: 18,
    tilt: 70,
    heading: 90,
    center: { lat: 51.5074, lng: -0.1278 }
  },
  true
);

Взаимодействие пользователя с 3D-картой

Для полноценного 3D-режима важно включить обработку жестов:

  • вращение двумя пальцами
  • наклон жестом drag + right mouse button
  • изменение перспективы при зуме
const mapEvents = new H.mapevents.MapEvents(map);
const beh * avior = new H.mapevents.Behavior(mapEvents);

behavior.disable(H.mapevents.Behavior.WHEELZOOM); // при необходимости ограничение

В 3D-режиме поведение мыши и сенсорного ввода становится аналогичным навигации в 3D-редакторах: сцена воспринимается как объект, а не как плоскость.

Оптимизация производительности в 3D

3D-рендеринг значительно увеличивает нагрузку на GPU, поэтому критично учитывать:

  • количество одновременно видимых объектов
  • уровень детализации зданий
  • частоту анимации камеры

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

  • ограничение максимального tilt (например, до 70°)
  • использование умеренного zoom (не перегружать сцену деталями)
  • отключение ненужных слоёв (POI, декоративные элементы)
map.getViewModel().setLookAtData({
  tilt: Math.min(60, currentTilt),
  zoom: Math.max(14, currentZoom)
});

Стиль и визуальные особенности 3D-слоёв

Векторные стили влияют на восприятие глубины. Цвет зданий, контраст дорог и прозрачность водных объектов усиливают или ослабляют эффект объёма.

В HERE Maps стили задаются через систему тем (themes), которые определяют:

  • высоту extrusion зданий
  • освещение сцены
  • контрастность объектов

При использовании тёмных тем эффект 3D становится более выраженным за счёт усиленных теней и контуров.

Работа с освещением и перспективой

Хотя прямого API управления источниками света в базовом JS SDK нет, эффект освещения достигается через:

  • угол наклона камеры (tilt)
  • направление (heading)
  • контрастность векторного стиля

При увеличении tilt создаётся эффект «низкого солнца», при котором здания получают более выраженные боковые грани.

Частые ошибки при включении 3D-режима

Некорректная конфигурация часто приводит к тому, что 3D-эффект не проявляется:

  • использование растровых слоёв вместо векторных
  • слишком низкий zoom (здания не экструдируются)
  • отсутствие tilt (карта остаётся плоской)
  • отключённый WebGL в браузере
if (!H.util) {
  console.error('HERE Maps SDK не загружен корректно');
}

Связка 3D-режима с динамическими сценариями

3D-карта часто используется не как статическая сцена, а как инструмент визуализации маршрутов, полётов или анимаций.

Построение «полёта» над городом реализуется последовательным изменением камеры:

function flyThrough(points) {
  let i = 0;

  function step() {
    if (i >= points.length) return;

    map.getViewModel().setLookAtData({
      center: points[i].center,
      zoom: points[i].zoom,
      tilt: points[i].tilt,
      heading: points[i].heading
    });

    i++;
    setTimeout(step, 800);
  }

  step();
}

Такие сценарии используют непрерывное обновление LookAtData, создавая иллюзию движения в пространстве.

Особенности работы на мобильных устройствах

На мобильных устройствах 3D-режим требует более строгого контроля ресурсов:

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

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

Оглавление