4E e 4I Sia: Utilizzando le librerie Leaflet e Leaflet Routing Machine, tracciare un percorso tra due coordinate geografiche a Lodi, seguendo le strade.
L'esercizio (codice e spiegazione riga per riga per studenti DSA) utilizza le librerie Leaflet e Leaflet Routing Machine per tracciare un percorso tra due coordinate geografiche a Lodi, seguendo le strade. L’esercizio include un modulo per inserire le coordinate di partenza e destinazione e visualizza un camioncino che si muove lungo il percorso. Al termine della consegna, appare un messaggio di conferma.
Esempio_leaflet.html
<! – Esempio di coordinate geografiche:
Istituto Tecnico
Economico e tecnologico A. Bassi di Lodi
Latitudine e Longitudine: 45.312358655777444, 9.498796177908355
Piazza della Vittoria
di Lodi
Latitudine e Longitudine: 45.314393659486534, 9.502692596604604 –>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consegna a Lodi</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
<style>
#map { height: 400px; width: 100%; }
#consegna { display: none; font-size: 20px; color: green; }
</style>
</head>
<body>
<h1>Tracciamento Consegna a Lodi</h1>
<form id="form">
<label for="partenza">Coordinate di Partenza (lat,lng):</label>
<input type="text" id="partenza" placeholder="es: 45.3167, 9.5000" required>
<label for="destinazione">Coordinate di Destinazione (lat,lng):</label>
<input type="text" id="destinazione" placeholder="es: 45.3180, 9.5033" required>
<button type="submit">Traccia Percorso</button>
</form>
<div id="map"></div>
<div id="consegna">✅ Consegna avvenuta!</div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
<script>
const map = L.map('map').setView([45.3167, 9.5000], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
const routingControl = L.Routing.control({ waypoints: [], routeWhileDragging: true }).addTo(map);
document.getElementById('form').onsubmit = function(e) {
e.preventDefault();
const partenza = document.getElementById('partenza').value.split(',').map(Number);
const destinazione = document.getElementById('destinazione').value.split(',').map(Number);
routingControl.setWaypoints([L.latLng(partenza[0], partenza[1]), L.latLng(destinazione[0], destinazione[1])]);
const icon = L.icon({ iconUrl: 'https://img.icons8.com/ios-filled/50/000000/truck.png', iconSize: [32, 32] });
const truckMarker = L.marker(partenza, { icon }).addTo(map);
routingControl.on('routesfound', function(e) {
const route = e.routes[0];
let index = 0;
const moveTruck = () => {
if (index < route.coordinates.length) {
truckMarker.setLatLng(route.coordinates[index]);
index++;
setTimeout(moveTruck, 500);
} else {
document.getElementById('consegna').style.display = 'block';
}
};
moveTruck();
});
};
</script>
</body>
</html>
Spiegazione del Codice della pagina html
1. **<!DOCTYPE html>**: Indica che il documento è in formato HTML5.
- **#map**: Imposta l'altezza e la larghezza del div della mappa.
- **#consegna**: Nasconde il messaggio di conferma di consegna inizialmente.
- **<label>**: Etichetta per ciascun campo del modulo.
- **<input>**: Campi di input per le coordinate di partenza e destinazione, con un placeholder esemplificativo e un attributo "required" per la validazione.
- **<button>**: Pulsante per inviare il modulo.
- **e.preventDefault()**: Previene il comportamento predefinito del modulo.
- **split(',').map(Number)**: Estrae e converte le coordinate in numeri.
- **routingControl.setWaypoints(...)**: Imposta i punti di partenza e di destinazione nel controllo di routing.
- **const route = e.routes[0];**: Estrae il primo percorso trovato.
- **let index = 0;**: Inizializza un indice per il movimento del camioncino.
- **if (index < route.coordinates.length)**: Controlla se ci sono ancora coordinate da percorrere.
- **truckMarker.setLatLng(route.coordinates[index]);**: Aggiorna la posizione del camioncino.
- **setTimeout(moveTruck, 500)**: Chiama la funzione dopo mezzo secondo.
Commenti
Posta un commento