Driving, walking, cycling

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

В основе навигационных сценариев лежат профили маршрутов, определяющие допустимую сеть дорог и алгоритмы построения пути:

  • driving — автомобильный маршрут без учёта пробок
  • driving-traffic — автомобильный маршрут с учётом дорожной обстановки
  • walking — пешеходный маршрут по тротуарам, тропам и пешеходным зонам
  • cycling — велосипедный маршрут с учётом велодорожек и разрешённых улиц

Каждый профиль влияет на:

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

Mapbox Directions API как источник маршрутов

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

Типичный запрос включает:

  • координаты точек (origin / destination)
  • профиль маршрута
  • формат ответа (geojson или polyline)
  • дополнительные параметры (альтернативные маршруты, шаги, манёвры)

Пример HTTP-запроса:

https://api.mapbox.com/directions/v5/mapbox/driving/30.3351,59.9343;30.3609,59.9311
?geometries=geojson&steps=true&access_token=YOUR_TOKEN

Профиль driving в URL можно заменить на:

  • walking
  • cycling
  • driving-traffic

Отображение маршрута в Mapbox GL JS

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

Добавление источника данных маршрута

map.addSource('route', {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: []
    }
  }
});

Источник создаётся пустым и заполняется после ответа API.

Отрисовка линии маршрута

map.addLayer({
  id: 'route-line',
  type: 'line',
  source: 'route',
  paint: {
    'line-color': '#3b82f6',
    'line-width': 5,
    'line-opacity': 0.85
  }
});

Линия маршрута визуально отделяется от базовой карты за счёт:

  • контрастного цвета
  • увеличенной толщины
  • прозрачности

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

После получения ответа Directions API данные источника обновляются:

fetch(directionsUrl)
  .then(res => res.json())
  .then(data => {
    const route = data.routes[0].geometry;

    map.getSource('route').setData({
      type: 'Feature',
      geometry: route
    });
  });

При смене профиля (например, с driving на cycling) пересчитывается весь маршрут, поскольку граф дорог меняется.

Особенности профилей движения

Driving

Автомобильный профиль ориентирован на дорожную инфраструктуру:

  • приоритет скоростных дорог
  • исключение пешеходных зон
  • оптимизация по времени

Часто используется в логистике и навигации транспорта.

Driving-traffic

Расширение driving с учётом текущей дорожной обстановки:

  • пробки
  • заторы
  • динамические задержки

Маршрут может изменяться в зависимости от времени суток.

Walking

Пешеходный профиль учитывает:

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

Особенность — более плотная сеть маршрутов и больше альтернативных путей.

Cycling

Велосипедный профиль балансирует между:

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

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

Работа с шагами маршрута (steps)

При включённом параметре steps=true API возвращает подробную структуру манёвров:

  • повороты
  • съезды
  • смена улиц
  • расстояния между манёврами

Каждый шаг содержит:

  • координаты
  • инструкцию
  • расстояние
  • продолжительность

Это позволяет строить навигационные интерфейсы.

Визуализация маркеров начала и конца маршрута

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

new mapboxgl.Marker({ color: 'green' })
  .setLngLat(start)
  .addTo(map);

new mapboxgl.Marker({ color: 'red' })
  .setLngLat(end)
  .addTo(map);

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

Альтернативные маршруты

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

alternatives=true

Каждый маршрут:

  • имеет собственную геометрию
  • отличается временем и расстоянием
  • может быть визуализирован отдельным слоем

В интерфейсе часто отображается:

  • основной маршрут (выделенный)
  • альтернативные (приглушённые)

Оптимизация отображения маршрутов

При работе с большими маршрутами важны оптимизации:

  • упрощение геометрии (simplification)
  • кеширование ответов API
  • ограничение частоты запросов при перетаскивании точек
  • использование setData вместо пересоздания слоя

Особенно критично это для driving-traffic, где маршруты пересчитываются чаще.

Смешанные сценарии переключения профилей

При переключении между walking, cycling и driving необходимо:

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

Типичная логика:

function updateRoute(profile) {
  const url = buildDirectionsUrl(profile);

  fetch(url)
    .then(r => r.json())
    .then(data => {
      map.getSource('route').setData({
        type: 'Feature',
        geometry: data.routes[0].geometry
      });
    });
}

Геометрия маршрута и координатная система

Все маршруты возвращаются в формате:

  • longitude, latitude (WGS84)
  • порядок координат строго фиксирован

Mapbox GL JS использует ту же систему координат, что позволяет напрямую подавать данные без трансформации.

Производительность при частых обновлениях

При интерактивных приложениях (например, перетаскивание точки назначения):

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

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

Стилизация маршрутов под разные профили

Разные профили часто визуально различаются:

  • driving: насыщенный синий или красный
  • walking: зелёный или оранжевый
  • cycling: фиолетовый или бирюзовый

Также применяются:

  • пунктирные линии для альтернатив
  • градиенты по времени или скорости
  • анимация построения линии

Интеграция с пользовательским вводом

Маршруты обычно строятся на основе:

  • кликов по карте
  • поиска адресов
  • геолокации устройства

Каждое изменение точки инициирует новый запрос к Directions API, что формирует интерактивную навигационную систему поверх Mapbox GL JS.

Оглавление