Типы маршрутов

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

Любой маршрут в Mapbox GL JS представлен в виде объекта LineString, входящего в структуру GeoJSON:

{
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [lng1, lat1],
      [lng2, lat2],
      [lng3, lat3]
    ]
  },
  "properties": {
    "routeType": "fastest"
  }
}

Эта структура является универсальной: независимо от того, как был вычислен маршрут — через API или вручную — на стороне визуализации он всегда превращается в линию с набором координат.

В Mapbox GL JS маршрут обычно добавляется как source:

map.addSource('route', {
  type: 'geojson',
  data: routeGeoJSON
});

И отображается через слой line:

map.addLayer({
  id: 'route-layer',
  type: 'line',
  source: 'route',
  layout: {
    'line-join': 'round',
    'line-cap': 'round'
  },
  paint: {
    'line-color': '#3b82f6',
    'line-width': 5
  }
});

Основные типы маршрутов

Быстрый маршрут (Fastest Route)

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

При использовании Mapbox Directions API он задаётся параметром profile=driving или аналогичным:

const query = `https://api.mapbox.com/directions/v5/mapbox/driving/
${startLng},${startLat};${endLng},${endLat}
?alternatives=false&geometries=geojson&access_token=YOUR_TOKEN`;

Особенности визуализации:

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

Этот тип маршрута применяется в навигационных системах реального времени.

Кратчайший маршрут (Shortest Route)

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

Характерные особенности:

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

При визуализации часто выделяется пунктирной линией:

paint: {
  'line-color': '#10b981',
  'line-width': 4,
  'line-dasharray': [2, 2]
}

Маршрут с альтернативами (Alternative Routes)

Mapbox Directions API поддерживает генерацию нескольких вариантов маршрута:

const url = `https://api.mapbox.com/directions/v5/mapbox/driving/
${coords}
?alternatives=true&geometries=geojson&access_token=YOUR_TOKEN`;

Ответ содержит массив routes, каждый элемент которого представляет отдельный маршрут:

response.routes.forEach((route, index) => {
  // route.geometry.coordinates
});

Особенности:

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

Визуально различают:

основной маршрут — яркий цвет
альтернативы — полупрозрачные линии

'line-opacity': 0.6

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

автомобиль
пешком
общественный транспорт
велосипед

В Mapbox GL JS такие маршруты формируются через сторонние API или комбинирование нескольких запросов.

Структура данных обычно разбивается на сегменты:

{
  type: "FeatureCollection",
  features: [
    {
      geometry: { type: "LineString", coordinates: [...] },
      properties: { mode: "walking" }
    },
    {
      geometry: { type: "LineString", coordinates: [...] },
      properties: { mode: "driving" }
    }
  ]
}

Визуализация строится на основе mode:

paint: {
  'line-color': [
    'match',
    ['get', 'mode'],
    'walking', '#f59e0b',
    'driving', '#3b82f6',
    '#9ca3af'
  ]
}

Велосипедные маршруты (Cycling Routes)

Велосипедные маршруты учитывают:

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

Mapbox API:

mapbox/cycling

Визуальные особенности:

часто используется зелёная палитра
линии тоньше автомобильных маршрутов
повышенное внимание к рельефу

Иногда применяется градиент для отображения подъёмов:

'line-gradient': [
  'interpolate',
  ['linear'],
  ['line-progress'],
  0, '#22c55e',
  1, '#15803d'
]

Пешеходные маршруты (Walking Routes)

Пешеходные маршруты строятся с учётом:

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

API профиль:

mapbox/walking

Особенности:

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

Визуально:

оранжевые или фиолетовые линии
высокая прозрачность фона карты для лучшего контраста

Грузовые и логистические маршруты (Truck Routes)

Грузовые маршруты учитывают ограничения:

высота мостов
весовые ограничения
запреты на въезд
типы дорог

Обычно реализуются через специализированные профили или сторонние API.

Пример логики фильтрации:

исключение узких улиц
приоритет магистралей
минимизация поворотов

Визуально такие маршруты часто отображаются толстой линией с акцентом на стабильность пути:

'line-width': 6,
'line-color': '#1d4ed8'

Визуальные стратегии отображения маршрутов

Слои маршрутов

В Mapbox GL JS маршруты часто разбиваются на несколько слоёв:

Основная линия
Обводка (outline)
Точки маршрута
Анимация движения

Пример обводки:

map.addLayer({
  id: 'route-outline',
  type: 'line',
  source: 'route',
  paint: {
    'line-color': '#111827',
    'line-width': 8
  }
});

Поверх неё добавляется основной слой:

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

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

Маршруты часто пересчитываются в реальном времени:

function updateRoute(newCoords) {
  const source = map.getSource('route');
  source.setData({
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: newCoords
    }
  });
}

Это позволяет реализовать:

пересчёт маршрута при отклонении
адаптацию к пробкам
изменение точки назначения

Анимация движения по маршруту

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

let step = 0;

function animate() {
  const coords = route.geometry.coordinates.slice(0, step);
  
  map.getSource('trace').setData({
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: coords
    }
  });

  step++;
  requestAnimationFrame(animate);
}

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

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

Приоритеты маршрутов и их сравнение

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

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

Визуально это отражается через:

прозрачность
толщину линий
порядок слоёв (z-index через порядок добавления слоёв)

Пример логики выбора основного маршрута:

const bestRoute = routes.reduce((a, b) =>
  a.duration < b.duration ? a : b
);

Работа с сегментами маршрута

Маршрут может быть разбит на legs и steps:

legs — участки между waypoint’ами
steps — детализированные инструкции

Пример структуры:

route.legs.forEach(leg => {
  leg.steps.forEach(step => {
    console.log(step.maneuver.instruction);
  });
});

Это используется для:

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

Интерактивные маршруты

Маршрут в Mapbox GL JS может быть интерактивным объектом:

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

Пример обработки клика:

map.on('click', (e) => {
  const coords = [e.lngLat.lng, e.lngLat.lat];
  updateRoute([...currentRoute, coords]);
});

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

В сложных приложениях маршруты комбинируются с другими слоями:

пробки (traffic layer)
POI (точки интереса)
зоны ограничений

Пример наложения:

map.addLayer({
  id: 'traffic',
  type: 'line',
  source: 'traffic-data',
  paint: {
    'line-color': [
      'match',
      ['get', 'congestion'],
      'low', '#22c55e',
      'moderate', '#facc15',
      'high', '#ef4444',
      '#9ca3af'
    ]
  }
});

Хранение и сериализация маршрутов

Маршруты часто сохраняются в формате GeoJSON для:

кэширования
офлайн-режима
передачи между клиентом и сервером

Пример сериализации:

const saved = JSON.stringify(routeGeoJSON);
localStorage.setItem('route', saved);

Загрузка:

const route = JSON.parse(localStorage.getItem('route'));
map.getSource('route').setData(route);

Производительность при работе с маршрутами

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

упрощение геометрии (turf.simplify)
ограничение числа сегментов
использование vector tiles вместо GeoJSON
отключение ненужных слоёв

Оптимизация линии:

const simplified = turf.simplify(route, {
  tolerance: 0.0001,
  highQuality: false
});