Отображение маршрута на карте

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

Для отображения карты используется библиотека HERE Maps JS API (3.x). Подключение осуществляется через CDN или сборщик модулей. Ключевой объект — H.service.Platform, через который создаются слои карты, геокодирование и маршрутизация.

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

<div id="map" style="width: 100%; height: 600px;"></div>

Создание платформы и базовой карты:

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: 52.5200, lng: 13.4050 },
    zoom: 10,
    pixelRatio: window.devicePixelRatio
  }
);

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

На этом этапе создаётся интерактивная карта, готовая к отрисовке маршрутов и объектов.

Архитектура маршрутизации

Маршрут в HERE Maps строится через Routing API, который возвращает структурированный JSON-ответ. Основные компоненты ответа:

  • route — массив маршрутов (обычно один основной)
  • section — сегменты маршрута
  • polyline — закодированная геометрия линии
  • actions — манёвры (повороты, развилки)
  • summary — длина и время пути

Получение маршрута выполняется через platform.getRoutingService().

Запрос маршрута между точками

Маршрутизация строится на основе двух или более координат. Основной метод — calculateRoute.

const router = platform.getRoutingService(null, 8);

const routingParameters = {
  routingMode: 'fast',
  transportMode: 'car',
  origin: '52.5160,13.3779',
  destination: '52.5206,13.3862',
  return: 'polyline,summary,actions'
};

Запрос выполняется асинхронно:

router.calculateRoute(routingParameters, result => {
  const route = result.routes[0];
  const section = route.sections[0];
  const polyline = section.polyline;
});

Декодирование геометрии маршрута

Маршрут приходит в виде закодированной полилинии. Для преобразования используется H.geo.LineString.

const lineString = H.geo.LineString.fromFlexiblePolyline(section.polyline);

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

Отображение маршрута на карте

Для визуализации используется объект H.map.Polyline.

const routeLine = new H.map.Polyline(lineString, {
  style: {
    strokeColor: 'blue',
    lineWidth: 5
  }
});

map.addObject(routeLine);

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

Добавление маркеров начала и конца маршрута

Для повышения читаемости маршрута добавляются маркеры.

const startMarker = new H.map.Marker({ lat: 52.5160, lng: 13.3779 });
const endMarker = new H.map.Marker({ lat: 52.5206, lng: 13.3862 });

map.addObject(startMarker);
map.addObject(endMarker);

Маркерная визуализация позволяет однозначно определить направление движения и границы маршрута.

Автоматическое масштабирование под маршрут

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

const bounds = routeLine.getBoundingBox();
map.getViewModel().setLookAtData({
  bounds: bounds
});

Это обеспечивает отображение всего маршрута без ручного изменения масштаба.

Отображение манёвров маршрута

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

section.actions.forEach(action => {
  const position = {
    lat: action.offset,
    lng: action.instruction
  };
});

На практике действия привязываются к координатам полилинии через индекс смещения (offset) и используются для UI-указаний.

Настройка режима транспорта и влияния на маршрут

Routing API поддерживает несколько режимов:

  • car — автомобильный маршрут
  • pedestrian — пеший маршрут
  • bicycle — велосипедный
  • truck — грузовой

Изменение транспортного режима влияет на:

  • допустимые дороги
  • ограничения скорости
  • приоритеты маршрута
  • доступность маршрутов
transportMode: 'truck'

Для грузовых маршрутов дополнительно учитываются ограничения по высоте, весу и типу дорог.

Многосегментные маршруты

Маршрут может состоять из нескольких секций, если используются промежуточные точки.

waypoints: [
  '52.5160,13.3779',
  '52.5194,13.4067',
  '52.5206,13.3862'
]

Каждая секция содержит собственную полилинию и набор инструкций, которые объединяются в единый маршрут.

Управление стилем маршрута

Визуальный стиль линии маршрута может быть изменён через параметры stroke.

style: {
  strokeColor: 'rgba(0, 128, 255, 0.7)',
  lineWidth: 6,
  lineCap: 'round'
}

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

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

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

Routing API может возвращать несколько вариантов пути.

return: 'polyline,summary,routeLabels'

Каждый маршрут отображается отдельно:

result.routes.forEach(r => {
  const section = r.sections[0];
  const line = H.geo.LineString.fromFlexiblePolyline(section.polyline);

  const polyline = new H.map.Polyline(line, {
    style: { strokeColor: 'gray', lineWidth: 4 }
  });

  map.addObject(polyline);
});

Основной маршрут обычно выделяется контрастным цветом, альтернативные — более нейтральным.

Интеграция маршрута с событиями карты

Для интерактивности используется модуль событий H.mapevents.MapEvents.

Маршрут может реагировать на:

  • наведение курсора
  • клик по линии
  • изменение масштаба
routeLine.addEventListener('tap', event => {
  routeLine.setStyle({
    strokeColor: 'red'
  });
});

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

Оптимизация загрузки маршрутов

При работе с большим количеством маршрутов учитываются следующие аспекты:

  • кэширование результатов Routing API
  • ограничение количества пересчётов
  • повторное использование LineString
  • минимизация перерисовки объектов карты

Особенно важно избегать повторных вызовов API при каждом изменении интерфейса.

Преобразование маршрута в данные для навигации

Маршрут может использоваться не только для визуализации, но и для пошаговой навигации. Для этого извлекаются:

  • координаты сегментов
  • инструкции поворотов
  • расстояния между манёврами
section.actions.map(a => ({
  instruction: a.instruction,
  distance: a.length
}));

Эти данные формируют основу навигационного интерфейса.

Работа с точностью геометрии

HERE Routing API использует высокоточное представление координат. При отрисовке важно учитывать:

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

Чем выше zoom, тем более детализированной выглядит линия маршрута.

Объединение маршрута с пользовательскими слоями

Маршрут может быть встроен в кастомные слои карты:

  • дорожные события
  • пробки
  • погодные условия
  • ограничения движения

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

Поведение маршрута при изменении центра карты

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

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

Каждое изменение инициирует новый запрос Routing API и обновление полилинии на карте.

Оглавление