Esercitazione: Trovare e visualizzare itinerari per diverse modalità di viaggio usando Mappe di Azure

  • Articolo

Questa esercitazione illustra come usare il servizio route Mappe di Azure e il controllo mappa per visualizzare le indicazioni stradali per veicoli privati e veicoli commerciali (camion) con USHazmatClass2 tipo di carico.

In questa esercitazione apprenderai a:

  • Creare e visualizzare il controllo mappa in una pagina Web
  • Eseguire il rendering dei dati sul traffico in tempo reale su una mappa
  • Richiedere e visualizzare i percorsi di veicoli privati e commerciali su una mappa

Prerequisiti

Nota

Per altre informazioni sull'autenticazione in Mappe di Azure, vedere Gestire l'autenticazione in Mappe di Azure.

Creare una nuova pagina Web usando l'API del controllo mappa

La procedura seguente illustra come creare e visualizzare il controllo mappa in una pagina Web.

  1. Nel computer locale creare un nuovo file con il nome MapTruckRoute.html.

  2. Aggiungere il codice HTML seguente al file:

    <!DOCTYPE html>
<html>
<head>
    <title>Map Route</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script>
        var map, datasource, client;

        function GetMap() {
            //Add Map Control JavaScript code here.
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #myMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>
</body>
</html>

    Alcune informazioni sul codice HTML precedente:

    • L'intestazione HTML include file di risorse CSS e JavaScript ospitati dalla libreria di controllo mappe di Azure.
    • L'evento onload nel corpo della pagina chiama la GetMap funzione quando il corpo della pagina è stato caricato.
    • La GetMap funzione contiene il codice JavaScript inline usato per accedere all'API Mappe di Azure.

  3. Aggiungere quindi il codice JavaScript seguente alla GetMap funzione, appena sotto il codice aggiunto nell'ultimo passaggio. Questo codice crea un controllo mappa e lo inizializza usando le chiavi di sottoscrizione Mappe di Azure fornite. Assicurarsi e sostituire la stringa <Your Azure Maps Subscription Key> con la chiave di sottoscrizione Mappe di Azure copiata dall'account Mappe.

    //Instantiate a map object
var map = new atlas.Map("myMap", {
    // Replace <Your Azure Maps Subscription Key> with your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Subscription Key>'
    }
});

    Alcune informazioni su JavaScript precedente:

    • Questo codice è il nucleo della GetMap funzione, che inizializza l'API di controllo mappa per l'account Mappe di Azure.
    • atlas è lo spazio dei nomi che contiene l'API Mappe di Azure e i componenti visivi correlati.
    • atlas.Map fornisce il controllo per una mappa Web visiva e interattiva.

  4. Salvare il file e aprirlo nel browser. Il browser visualizza una mappa di base chiamando atlas.Map usando la chiave di sottoscrizione Mappe di Azure.

    Screenshot che mostra la mappa più semplice che è possibile creare chiamando l'API atlas Map, usando la chiave di sottoscrizione Mappe di Azure.

Eseguire il rendering dei dati sul traffico in tempo reale su una mappa

  1. Dopo aver inizializzato la mappa, aggiungere il codice JavaScript seguente nella funzione GetMap. Questo codice implementa il gestore dell'evento ready del controllo mappa.

    map.events.add("ready", function() {
    // Add Traffic Flow to the Map
    map.setTraffic({
        flow: "relative"
    });
});

    Alcune informazioni su JavaScript precedente:

    • Questo codice implementa il gestore dell'evento ready del controllo mappa. Il resto del codice in questa esercitazione viene inserito all'interno del ready gestore eventi.
    • Nel gestore dell'evento ready della mappa il valore dell'impostazione relativa al flusso del traffico è relative, che corrisponde alla velocità sulla strada in relazione a condizioni di traffico regolare.
    • Per altre opzioni sul traffico, vedere l'interfaccia TrafficOptions.

  2. Salvare il file MapTruckRoute.html e aggiornare la pagina nel browser. Se si esegue lo zoom in qualsiasi città, ad esempio Los Angeles, le strade vengono visualizzate con i dati del flusso di traffico correnti.

    Screenshot che mostra una mappa di Los Angeles, con le strade che visualizzano i dati del flusso di traffico.

Definire il rendering della visualizzazione del percorso

In questa esercitazione vengono calcolati due percorsi sulla mappa. Il primo itinerario viene calcolato per un veicolo privato (auto). Il secondo percorso viene calcolato per un veicolo commerciale (camion) per mostrare la differenza tra i risultati. Quando ne viene eseguito il rendering, la mappa visualizza un'icona simbolo per i punti di partenza e di fine del percorso e geometrie di linea con colori diversi per ogni percorso. Per altre informazioni sull'aggiunta di livelli linea, vedere Aggiungere un livello linea a una mappa. Per altre informazioni sui livelli simbolo, vedere Aggiungere un livello simbolo a una mappa.

  1. Nel gestore dell'evento ready del controllo mappa aggiungere il codice seguente.

    
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a layer for rendering the route lines and have it render under the map labels.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: ['get', 'strokeColor'],
    strokeWidth: ['get', 'strokeWidth'],
    lineJoin: 'round',
    lineCap: 'round'
}), 'labels');

//Add a layer for rendering point data.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
    iconOptions: {
        image: ['get', 'icon'],
        allowOverlap: true
    },
    textOptions: {
        textField: ['get', 'title'],
        offset: [0, 1.2]
    },
    filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
}));

    Alcune informazioni su JavaScript precedente:

    • Nel gestore dell'evento ready del controllo mappa viene creata un'origine dati per archiviare il percorso dall'inizio alla fine.
    • Le espressioni consentono di recuperare il colore e lo spessore delle linee dalle proprietà della funzionalità delle linea del percorso.
    • Per assicurarsi che la linea del percorso non copra le etichette stradali, è stato passato un secondo parametro con il valore 'labels'.

    Viene poi creato un livello simbolo collegato all'origine dati. Questo livello specifica la modalità di rendering del punto di partenza e del punto di arrivo. Le espressioni sono state aggiunte per recuperare le informazioni sull'immagine dell'icona e sull'etichetta di testo dalle proprietà in ogni oggetto punto. Per altre informazioni sulle espressioni, vedere Espressioni di stile basate su dai.

  2. Impostare quindi il punto iniziale come società fittizia di Seattle denominata Fabrikam e il punto finale come microsoft office. Nel gestore dell'evento ready del controllo mappa aggiungere il codice seguente.

    //Create the GeoJSON objects which represent the start and end point of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.356099, 47.580045]), {
    title: 'Fabrikam, Inc.',
    icon: 'pin-blue'
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.201164, 47.616940]), {
    title: 'Microsoft - Lincoln Square',
    icon: 'pin-round-blue'
});

//Add the data to the data source.
datasource.add([startPoint, endPoint]);

//Fit the map window to the bounding box defined by the start and end positions.
map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 100
});

    Informazioni su JavaScript precedente:

    • Questo codice crea due oggetti punto GeoJSON per rappresentare i punti di partenza e di arrivo, che vengono quindi aggiunti all'origine dati.
    • L'ultimo blocco di codice imposta la visualizzazione della fotocamera tramite le informazioni di latitudine e longitudine del punto di partenza e di arrivo.
    • I punti di partenza e di arrivo vengono aggiunti all'origine dati.
    • Per il calcolo del rettangolo di selezione viene usata la funzione atlas.data.BoundingBox.fromData. Questo rettangolo di selezione viene usato per impostare la visualizzazione delle videocamere della mappa sull'intero percorso con la funzione map.setCamera.
    • Per compensare le dimensioni in pixel delle icone di simbolo, viene aggiunta una spaziatura interna.
    • Per altre informazioni, vedere la funzione set Fotocamera nella documentazione tecnica Microsoft.

  3. Salvare il file TruckRoute.html e aggiornare il browser. La mappa è ora centrata sulla città di Seattle. Il pin a goccia blu contrassegna il punto iniziale. L'indicatore rotondo a goccia contrassegna il punto di arrivo.

    Screenshot che mostra una mappa con un itinerario contenente un punto di disinstallazione blu che contrassegna il punto iniziale e un segnaposto arrotondamento blu che contrassegna l'estremità finale.

Richiedere e visualizzare i percorsi di veicoli privati e commerciali su una mappa

Questa sezione illustra come usare il servizio di pianificazione percorso di Mappe di Azure per ottenere le indicazioni da un punto a un altro, in base alla modalità di trasporto. Vengono usate due modalità di trasporto: camion e auto.

Suggerimento

Il servizio di pianificazione percorso include le API per pianificare il percorso più veloce, più breve, più ecologico o più entusiasmante tra due punti, in base alla distanza, alle condizioni del traffico e alla modalità di trasporto usata. Il servizio consente anche di pianificare percorsi futuri in base alle condizioni storiche del traffico. Gli utenti possono visualizzare la durata stimata del percorso per qualsiasi ora specificata. Per altre informazioni, vedere API Get Route Directions.

  1. GetMap Nella funzione, all'interno del gestore eventi del ready controllo, aggiungere il codice JavaScript seguente per costruire un percorso di camion dall'inizio al punto finale. Questo percorso viene creato e visualizzato per un camion che trasporta un carico di classi USHazmatClass2.

    //Start and end point input to the search route request
var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
//Make a search route request for a truck vehicle type
var truckRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&travelMode=truck&vehicleWidth=2&vehicleHeight=2&vehicleLength=5&vehicleLoadType=USHazmatClass2&query=${query}`;
fetch(truckRouteUrl, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });

    //Add the route line to the data source. We want this to render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#2272B9",
            strokeWidth: 9
        }),
        0
    );
});

    Informazioni su JavaScript precedente:

    • Questo codice esegue una query sul servizio route Mappe di Azure tramite l'API route Mappe di Azure.
    • La linea di route viene quindi creata dalle coordinate di ogni turno dalla risposta.
    • La linea di percorso viene quindi aggiunta all'origine dati.
    • Vengono aggiunte due proprietà alla linea del percorso del camion: un colore #2272B9di tratto blu e una larghezza del tratto di nove pixel.
    • Alla linea di itinerario viene assegnato un indice pari a 0 per garantire che il rendering del percorso del camion venga eseguito prima di qualsiasi altra linea nell'origine dati. Il motivo è che il calcolo del percorso del camion è spesso più lento rispetto al calcolo di un itinerario auto. Se la linea del percorso per autocarri viene aggiunta all'origine dati dopo quella del percorso per auto, il rendering verrà eseguito sopra di essa.

    Suggerimento

    Per vedere tutte le opzioni e i valori possibili per l'API di indicazioni stradali di Mappe di Azure, vedere Parametri dell'URI per POST di indicazioni percorso.

  2. Aggiungere quindi il codice JavaScript seguente per creare un percorso per un'auto.

    var carRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
fetch(carRouteUrl, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });

    //Add the route line to the data source. This will add the car route after the truck route.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#B76DAB",
            strokeWidth: 5
        })
    );
});

    Informazioni su JavaScript precedente:

    • Questo codice esegue una query sul servizio di routing Mappe di Azure tramite il metodo API Route Directions Mappe di Azure.
    • La linea di route viene quindi creata dalle coordinate di ogni turno e aggiunte all'origine dati.
    • Vengono aggiunte due proprietà alla linea di itinerario del camion: un colore #B76DABdi tratto viola e una larghezza del tratto di cinque pixel.

  3. Salvare il file TruckRoute.html e aggiornare il Web browser. La mappa dovrebbe ora visualizzare sia il camion che i percorsi delle auto.

    Screenshot che mostra sia un percorso privato che un itinerario per veicoli commerciali su una mappa usando il servizio di route di Azure.

    • Il percorso del camion viene visualizzato utilizzando una linea blu spessa e il percorso dell'auto viene visualizzato utilizzando una linea viola sottile.
    • Il percorso dell'auto attraversa il lago Washington tramite l'autostrada I-90, passando nei tunnel sotto le aree residenziali. Poiché i tunnel si trovano in zone residenziali, il carico di rifiuti pericolosi è limitato. Il percorso del camion, che specifica un USHazmatClass2 tipo di carico, viene indirizzato all'uso di un percorso diverso che non ha questa restrizione.

Passaggi successivi

L'esercitazione successiva illustra il processo di creazione di un localizzatore di punti vendita semplice usando Mappe di Azure.

Creare un localizzatore di punti vendita con Mappe di Azure