pk2002pc/irkutsk_tour
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Построить пешеходный маршрут на карте

Browse Source
This commit is contained in:
Pavel Kustov
2026-09-19 17:05:09 +08:00
parent 9f813397b1
commit d1bf01eafc
1 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fragments/route.php
+13 -2
View File
@@ -32,9 +32,20 @@
]; ];
const routeMap = L.map(mapElement,{scrollWheelZoom:false,zoomControl:false}); const routeMap = L.map(mapElement,{scrollWheelZoom:false,zoomControl:false});
L.control.zoom({position:'bottomright'}).addTo(routeMap); L.control.zoom({position:'bottomright'}).addTo(routeMap);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap contributors'}).addTo(routeMap); L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap contributors, Tiles style by HOT'}).addTo(routeMap);
const coordinates = stops.map(([,lat,lng]) => [lat,lng]); const coordinates = stops.map(([,lat,lng]) => [lat,lng]);
L.polyline(coordinates,{color:'#d8a653',weight:5,opacity:.9,lineCap:'round',lineJoin:'round'}).addTo(routeMap); const routeStyle = {color:'#d8a653',weight:5,opacity:.95,lineCap:'round',lineJoin:'round'};
const directRoute = L.polyline(coordinates,{...routeStyle,dashArray:'8 8',opacity:.55}).addTo(routeMap);
const walkingCoordinates = coordinates.map(([lat,lng]) => `${lng},${lat}`).join(';');
fetch(`https://routing.openstreetmap.de/routed-foot/route/v1/driving/${walkingCoordinates}?overview=full&geometries=geojson&steps=false`)
.then(response => response.ok ? response.json() : Promise.reject(new Error('Walking route unavailable')))
.then(data => {
const route = data.routes?.[0]?.geometry;
if (!route) return;
routeMap.removeLayer(directRoute);
L.geoJSON(route,{style:routeStyle}).addTo(routeMap);
})
.catch(() => {});
const bounds = L.latLngBounds(coordinates); const bounds = L.latLngBounds(coordinates);
stops.forEach(([title,lat,lng],index) => { stops.forEach(([title,lat,lng],index) => {
const marker = L.marker([lat,lng],{icon:L.divIcon({className:'route-marker-wrap',html:`<span class="route-marker">${index+1}</span>`,iconSize:[36,36],iconAnchor:[18,18]})}).addTo(routeMap); const marker = L.marker([lat,lng],{icon:L.divIcon({className:'route-marker-wrap',html:`<span class="route-marker">${index+1}</span>`,iconSize:[36,36],iconAnchor:[18,18]})}).addTo(routeMap);