Отображение маршрута между двумя точками на карте
Приветствую, дорогие читатели! В сегодняшней статье мы рассмотрим, как отобразить маршрут между двумя точками на карте с помощью Leaflet и OpenRouteService. Это позволит вам строить маршруты в веб-приложениях, используя простые инструменты на JavaScript.
Подключение Leaflet и OpenRouteService
Для начала создадим HTML-страницу с картой и подключим необходимые библиотеки:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Маршрут на карте</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
#map { height: 500px; }
</style>
</head>
<body>
<h1>Отображение маршрута на карте</h1>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data u00a9 OpenStreetMap contributors',
maxZoom: 18,
}).addTo(map);
const startPoint = [51.505, -0.09];
const endPoint = [51.515, -0.1];
L.marker(startPoint).addTo(map).bindPopup('Старт');
L.marker(endPoint).addTo(map).bindPopup('Финиш');
const routeUrl = `https://router.project-osrm.org/route/v1/driving/${startPoint[1]},${startPoint[0]};${endPoint[1]},${endPoint[0]}?overview=full&geometries=geojson`;
fetch(routeUrl)
.then(response => response.json())
.then(data => {
const route = data.routes[0].geometry;
L.geoJSON(route, { color: 'blue' }).addTo(map);
})
.catch(error => console.error('Ошибка загрузки маршрута:', error));
</script>
</body>
</html>
Разбор кода
-
Создаём карту и добавляем слой OpenStreetMap.
-
Задаём координаты для начальной и конечной точки маршрута.
-
Добавляем метки на карту для обозначения точек старта и финиша.
-
Отправляем запрос к OpenRouteService (OSRM) для получения маршрута.
-
Рисуем маршрут на карте с помощью
L.geoJSON().
Итог
Теперь вы можете легко добавлять маршруты на карту в своих веб-приложениях! Попробуйте изменить координаты точек и поэкспериментировать с настройками.
Хотите глубже освоить JavaScript? Рекомендую курс «Программирование на JavaScript с Нуля до Гуру 2.0″, где подробно разбираются все основы и продвинутые техники!
