Skip to content

REAL_ROUTES_GUIDE.md

Latest commit

 

History

History
185 lines (149 loc) · 7.31 KB

REAL_ROUTES_GUIDE.md

File metadata and controls

185 lines (149 loc) · 7.31 KB
Raw

🛣️ Реальные маршруты по дорогам - Руководство

🎯 Что изменилось

ДО: Простые линии между точками по прямой
ПОСЛЕ: Реальные маршруты по настоящим дорогам с помощью OSRM

🚀 Новые возможности

1. RouteMapWithRouting.vue - Базовая версия

  • Реальные автомобильные маршруты
  • Автоматическая прокладка по дорогам
  • Цветовая кодировка по дням
  • Бесплатный OSRM сервер

2. RouteMapAdvanced.vue - Расширенная версия

  • 3 типа маршрутов:
    • 🚗 На машине - автомобильные дороги
    • 🚶 Пешком - пешеходные дорожки
    • 🚴 На велосипеде - велосипедные дорожки
  • Переключение типов в реальном времени
  • Информация о расстоянии и времени

📦 Установка

# В папке client_app
npm install leaflet-routing-machine

🔧 Как использовать

Вариант 1: Простая замена

<!-- В RoutePlannerPage.vue -->
import RouteMap from '../components/RouteMapWithRouting.vue'

Вариант 2: Расширенная версия

<!-- В RoutePlannerPage.vue -->
import RouteMap from '../components/RouteMapAdvanced.vue'

🎨 Особенности реализации

OSRM Routing Engine

  • Сервер: https://router.project-osrm.org
  • Бесплатно: Не требует API ключей
  • Надежно: Работает без регистрации
  • Глобально: Покрытие по всему миру

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

Профиль Описание Скорость Дороги
driving Автомобильные маршруты Быстро Все дороги
walking Пешеходные маршруты Медленно Тротуары, дорожки
cycling Велосипедные маршруты Средне Велодорожки

Визуализация

  • Цвета: Каждый день свой цвет
  • Стиль линий:
    • Сплошные для авто
    • Пунктир для пешеходов
  • Толщина: 4-5px для хорошей видимости

🛠️ Технические детали

Ключевые функции

// Создание маршрута
const routingControl = L.Routing.control({
  waypoints: waypoints,
  router: L.Routing.osrmv1({
    serviceUrl: 'https://router.project-osrm.org',
    profile: 'driving' // 'walking' | 'cycling'
  }),
  lineOptions: {
    styles: [{
      color: '#00c2ff',
      weight: 4,
      opacity: 0.8
    }]
  },
  addWaypoints: false,
  createMarker: () => null, // Используем свои маркеры
  show: false // Скрываем панель инструкций
}).addTo(map)

Обработка событий

.on('routesfound', (e) => {
  const routes = e.routes
  if (routes && routes[0]) {
    const summary = routes[0].summary
    console.log(`${(summary.totalDistance / 1000).toFixed(1)} км`)
    console.log(`${Math.round(summary.totalTime / 60)} мин`)
  }
})

🎯 Преимущества

Для пользователей

  • Реалистичность: Маршруты по настоящим дорогам
  • Точность: Учет расстояния и времени
  • Гибкость: Разные типы передвижения
  • Визуализация: Понятные цветовые индикаторы

Для разработчиков

  • Бесплатно: Никаких API ключей
  • Просто: Легкая интеграция
  • Надежно: Стабильный OSRM сервер
  • Расширяемо: Легко добавить новые функции

🔮 Возможные улучшения

Short-term

  1. Информация о маршруте: Расстояние, время, стоимость топлива
  2. Альтернативные маршруты: Показывать несколько вариантов
  3. Пробки: Интеграция с Яндекс.Пробки
  4. Озвучивание: Голосовые подсказки

Medium-term

  1. Офлайн-карты: Работать без интернета
  2. Кастомные маркеры: Иконки типов мест
  3. Анимация: Движение по маршруту
  4. Сохранение: Экспорт/импорт маршрутов

Long-term

  1. ML оптимизация: Умные рекомендации маршрутов
  2. Социальные функции: Делиться маршрутами
  3. Интеграция: Навигаторы, такси
  4. Монетизация: Платные доп. функции

🚨 Ограничения

OSRM

  • Скорость обновления: Карты обновляются периодически
  • Трафик: Нет учета пробок в реальном времени
  • Ограничения: Есть лимиты запросов (но щедрые)

Альтернативы

Сервис Стоимость Качество РФ Сложность
OSRM Бесплатно Хорошее Низкая
Яндекс Платно Отличное Средняя
Google Платно Хорошее Средняя
Mapbox Платно Хорошее Средняя

📱 Мобильная адаптация

Компоненты полностью адаптивны:

  • Контролы: Адаптируются под экран
  • Карта: Изменяет высоту
  • Кнопки: Увеличиваются для тачей
  • Подсказки: Переносятся на новые строки

🧪 Тестирование

Проверка маршрутов

// Тестовые координаты (Краснодар)
const testPoints = [
  { lat: 45.0355, lon: 38.9753 }, // Центр
  { lat: 45.0448, lon: 38.9763 }, // Парк
  { lat: 45.0284, lon: 38.9731 }  // Музей
]

Валидация

  • ✅ Маршруты строятся корректно
  • ✅ Цветовая схема работает
  • ✅ Переключение профилей работает
  • ✅ Мобильная адаптация OK
  • ✅ Производительность приемлемая

🎉 Результат

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

Готово к использованию! 🚀