Esercitazione: Trovare gli itinerari per diverse modalità di trasporto tramite Mappe di AzureTutorial: Find routes for different modes of travel using Azure Maps

Questa esercitazione illustra come usare l'account Mappe di Azure e il servizio di pianificazione itinerari per trovare gli itinerari più adatti per raggiungere un punto di interesse in base alla modalità di trasporto selezionata.This tutorial shows how to use your Azure Maps account and the route service to find the route to your point of interest, prioritized by your mode of travel. Saranno visualizzati due itinerari diversi sulla mappa, uno per le automobili e uno per gli autocarri che potrebbero essere soggetti a limitazioni a causa di altezza, peso e pericolosità del carico.You display two different routes on your map, one for cars and one for trucks that may have route restrictions because of height, weight, or hazardous cargo. In questa esercitazione si apprenderà come:In this tutorial, you learn how to:

  • Creare una nuova pagina Web usando l'API del controllo mappaCreate a new web page using the map control API
  • Visualizzare il flusso del traffico sulla mappaVisualize traffic flow on your map
  • Creare query di itinerario che dichiarano la modalità di viaggioCreate route queries that declare mode of travel
  • Visualizzare più itinerari sulla mappaDisplay multiple routes on your map

PrerequisitiPrerequisites

Prima di procedere, seguire le istruzioni fornite nella sezione relativa alla gestione dell'account per creare una sottoscrizione dell'account Mappe di Azure con il piano tariffario S1 ed eseguire la procedura descritta nella sezione relativa a come ottenere la chiave primaria per ottenere la chiave di sottoscrizione primaria per l'account.Before you proceed, follow the instructions in manage account to create an Azure Maps account subscription with S1 pricing tier and follow the steps in get primary key to get the primary subscription key for your account.

Creare una nuova mappaCreate a new map

La procedura seguente illustra come creare una pagina HTML statica incorporata usando l'API del controllo mappa.The following steps show you how to create a static HTML page embedded with the Map Control API.

  1. Nel computer locale creare un nuovo file con il nome MapTruckRoute.html.On your local machine, create a new file and name it MapTruckRoute.html.

  2. Aggiungere al file i componenti HTML seguenti:Add the following HTML components to the 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/2/atlas.min.css" type="text/css">
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    
        <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
        <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.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>
    

    Si noti che l'intestazione HTML include i file di risorse CSS e JavaScript ospitati dalla libreria del controllo mappa di Azure.Notice that the HTML header includes the CSS and JavaScript resource files hosted by the Azure Map Control library. Notare l'evento onload nel corpo della pagina, che chiamerà la funzione GetMap dopo il caricamento del corpo della pagina.Note the onload event on the body of the page, which will call the GetMap function when the body of the page has loaded. Questa funzione deve contenere il codice JavaScript inline per l'accesso alle API di Mappe di Azure.This function will contain the inline JavaScript code to access the Azure Maps APIs.

  3. Aggiungere il codice JavaScript seguente alla funzione GetMap.Add the following JavaScript code to the GetMap function. Sostituire la stringa <Your Azure Maps Key> con la chiave primaria copiata dall'account Mappe.Replace the string <Your Azure Maps Key> with the primary key that you copied from your Maps account.

    //Instantiate a map object
    var map = new atlas.Map("myMap", {
        //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '<Your Azure Maps Key>'
        }
    });
    

    La classe atlas.Map fornisce il controllo per una mappa Web visiva e interattiva ed è un componente dell'API del controllo mappa di Azure.The atlas.Map class provides the control for a visual and interactive web map, and is a component of the Azure Map Control API.

  4. Salvare il file e aprirlo nel browser.Save the file and open it in your browser. A questo punto si ha una mappa di base che è possibile sviluppare ulteriormente.At this point, you have a basic map that you can develop further.

    Visualizzare la mappa di base

Visualizzare il flusso del trafficoVisualize traffic flow

  1. Aggiungere la visualizzazione del flusso di traffico alla mappa.Add the traffic flow display to the map. L'evento ready delle mappe aspetta finché non vengono caricate le risorse della mappa con cui è possibile interagire in sicurezza.The maps ready event waits until the maps resources are loaded and ready to safely interact with it.

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

    Nel gestore dell'evento ready il valore dell'impostazione relativa al flusso del traffico nella mappa è relative, che corrisponde alla velocità sulla strada in relazione a condizioni di traffico regolare.In the map ready event handler, the traffic flow setting on the map is set to relative, which is the speed of the road relative to free-flow. È anche possibile impostare il flusso del traffico su absolute, ovvero sul valore assoluto della velocità sulla strada, o su relative-delay, che visualizza la velocità relativa in caso di variazione rispetto alle condizioni di traffico libero.You could also set it to absolute speed of the road or relative-delay, which displays the relative speed where it differs from free-flow.

  2. Salvare il file MapTruckRoute.html e aggiornare la pagina nel browser.Save the MapTruckRoute.html file and refresh the page in your browser. Se si interagisce con la mappa e si fa zoom in avanti su Los Angeles, si dovrebbero visualizzare le strade con i dati aggiornati sul traffico.If you interact with the map and zoom in to Los Angeles, you should see the streets with the current traffic data.

    Visualizzare la mappa con il traffico

Definire il rendering dell'itinerarioDefine how the route will be rendered

In questa esercitazione verranno calcolati due itinerari e ne verrà eseguito il rendering nella mappa.In this tutorial, two routes will be calculated and rendered on the map. Un itinerario usa le strade accessibili alle auto e l'altro quelle accessibile agli autocarri.One route using roads accessible to cars and the other accessible to trucks. Quando viene eseguito il rendering verranno visualizzate icone di simbolo per l'inizio e la fine dell'itinerario e linee di colore diverso per ogni percorso dell'itinerario.When rendered we will display a symbol icon for the start and end of the route, and different colored lines for each route path.

  1. Dopo aver inizializzato la mappa, aggiungere il codice JavaScript seguente nel gestore dell'evento ready delle mappe.After initializing the map, add the following JavaScript code in the maps ready event handler.

    //Wait until the map resources have fully loaded.
    map.events.add('ready', function () {
    
        //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.
        }));
    });
    

    Nel gestore dell'evento ready delle mappe viene creata un'origine dati per archiviare le linee relative all'itinerario e i punti di partenza e di arrivo.In the maps ready event handler, a data source is created to store the route lines as well as the start and end points. Viene creato un livello linea che viene allegato all'origine dati per definire il rendering della linea dell'itinerario.A line layer is created and attached to the data source to defined how the route line will be rendered. Le espressioni consentono di recuperare il colore e lo spessore della linea dalle proprietà della funzionalità delle linea dell'itinerario.Expressions are used to retrieve the line width and color from properties on the route line feature. Quando si aggiunge il livello alla mappa, viene passato un secondo parametro con valore 'labels', per indicare che il rendering di questo livello deve essere eseguito sotto le etichette della mappa.When adding the layer to the map a second parameter with the value of 'labels' is passed in which specifies to render this layer below the map labels. In questo modo la linea dell'itinerario non coprirà le etichette delle strade.This will ensure that the route line doesn't cover up the road labels. Viene creato un livello simboli che viene allegato all'origine dati.A symbol layer is created and attached to the data source. Questo livello consente di specificare in che modo verrà eseguito il rendering dei punti di partenza e di arrivo. In questo caso sono state aggiunte espressioni per recuperare le informazioni sull'icona dell'immagine e il testo dell'etichetta dalle proprietà di ogni oggetto punto.This layer specifies how the start and end points will be rendered, in this case expressions have been added to retrieve the icon image and text label information from properties on each point object.

  2. Per questa esercitazione impostare come punto di partenza una società fittizia di Seattle denominata Fabrikam e come punto di arrivo un ufficio di Microsoft.For this tutorial, set the start point as a fictitious company in Seattle called Fabrikam, and the destination point as a Microsoft office. Nel gestore dell'evento ready delle mappe aggiungere il codice seguente.In the maps ready event handler, add the following code.

    //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'
    });
    

    Questo codice crea due oggetti GeoJSON per rappresentare i punti iniziale e finale del percorso.This code creates two GeoJSON objects to represent the start and end points of the route. A ogni punto vengono aggiunge le proprietà title e icon.A title and icon property is added to each point.

  3. Aggiungere quindi il codice JavaScript seguente per includere nella mappa i segnaposto per i punti di partenza e di arrivo:Next, add the following JavaScript code to add the pins for the start and end points to the map:

    //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
    });
    

    I punti di partenza e di arrivo vengono aggiunti all'origine dati.The start and end points are added to the data source. Per il calcolo del rettangolo di selezione viene usata la funzione atlas.data.BoundingBox.fromData.The bounding box for the start and end points is calculated using the atlas.data.BoundingBox.fromData function. Questo rettangolo di selezione viene usato per impostare la visualizzazione delle videocamere della mappa sull'intero percorso con la funzione map.setCamera.This bounding box is used to set the map cameras view over the entire route using the map.setCamera function. Per compensare le dimensioni in pixel delle icone di simbolo, viene aggiunta una spaziatura interna.A padding is added to compensate for the pixel dimensions of the symbol icons.

  4. Salvare il file e aggiornare il browser per visualizzare i punti sulla mappa.Save the file and refresh your browser to see the pins displayed on your map. Ora la mappa è centrata su Seattle ed è possibile vedere il segnaposto blu rotondo che indica il punto di partenza e il segnaposto blu che indica il punto di arrivo.Now the map is centered over Seattle, and you can see the round blue pin marking the start point and the blue pin marking the finish point.

    Visualizzare la mappa con i punti di partenza e di arrivo

Classificare i percorsi in ordine di priorità in base alla modalità di trasportoRender routes prioritized by mode of travel

Questa sezione illustra come usare l'API del servizio di pianificazione itinerari per trovare più itinerari per raggiungere una destinazione da un determinato punto di partenza, in base alla modalità di trasporto.This section shows how to use the Maps route service API to find multiple routes from a given start point to the end point based on your mode of transport. Il servizio di pianificazione itinerari fornisce le API per pianificare l'itinerario più veloce, più breve, più ecologico o più entusiasmante tra due punti, considerando le condizioni di traffico in tempo reale.The route service provides APIs to plan fastest, shortest, eco, or thrilling routes between two locations, considering the current traffic conditions. Consente inoltre agli utenti di pianificare percorsi per il futuro usando il database dei dati storici sul traffico di Azure e fornendo stime della durata dei percorsi per qualsiasi giorno e ora.It also allows users to plan routes in the future by using Azure's extensive historic traffic database and predicting route durations for any day and time. Per altre informazioni, vedere Get Route Directions (Ottenere le indicazioni stradali).For more information, see GetRoute Directions. Tutti i blocchi di codice seguenti devono essere aggiunti all'interno del listener di eventi del caricamento mappa per garantire che vengano caricati dopo che la mappa è stata caricata completamente.All of the following code blocks should be added within the map load eventListener to ensure that they load after the map loads fully.

  1. Nella funzione GetMap aggiungere il codice JavaScript seguente.In the GetMap function, add the following to Javascript code.

    // Use SubscriptionKeyCredential with a subscription key
    var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
    
    // Use subscriptionKeyCredential to create a pipeline
    var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
    
    // Construct the RouteURL object
    var routeURL = new atlas.service.RouteURL(pipeline);
    

    SubscriptionKeyCredential crea un elemento SubscriptionKeyCredentialPolicy per autenticare le richieste HTTP in Mappe di Azure con la chiave di sottoscrizione.The SubscriptionKeyCredential creates a SubscriptionKeyCredentialPolicy to authenticate HTTP requests to Azure Maps with the subscription key. atlas.service.MapsURL.newPipeline() acquisisce il criterio SubscriptionKeyCredential e crea un'istanza pipeline.The atlas.service.MapsURL.newPipeline() takes in the SubscriptionKeyCredential policy and creates a Pipeline instance. routeURL rappresenta un URL per le operazioni di pianificazione del percorso di Mappe di Azure.The routeURL represents a URL to Azure Maps Route operations.

  2. Dopo aver configurato le credenziali e l'URL, aggiungere il codice JavaScript seguente per creare un percorso dalla partenza al punto di arrivo per un autocarro che trasporta carico classificato come USHazmatClass2 e visualizzare i risultati.After setting up credentials and the URL, add the following JavaScript code to construct a route from start to end point for a truck carrying USHazmatClass2 classed cargo and display the results.

    //Start and end point input to the routeURL
    var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];
    
    //Make a search route request for a truck vehicle type
    routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates,{
        travelMode: 'truck',
        vehicleWidth: 2,
        vehicleHeight: 2,
        vehicleLength: 5,
        vehicleLoadType: 'USHazmatClass2'
    }).then((directions) => {
        //Get data features from response
        var data = directions.geojson.getFeatures();
    
        //Get the route line and add some style properties to it.  
        var routeLine = data.features[0];
        routeLine.properties.strokeColor = '#2272B9';
        routeLine.properties.strokeWidth = 9;
    
        //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(routeLine, 0);
    });
    

    Questo frammento di codice sopra indicato esegue query sul servizio di routing di Mappe di Azure tramite il metodo getRouteDirections.This code snippet above queries the Azure Maps routing service through the getRouteDirections method. La linea dell'itinerario viene estratta dalla raccolta di funzionalità GeoJSON dalla risposta ottenuta usando il metodo geojson.getFeatures().The route line is then extracted from the GeoJSON feature collection from the response that is extracted using the geojson.getFeatures() method. La linea di percorso viene quindi aggiunta all'origine dati.The route line is then added to the data source. Aggiunge inoltre un indice pari a 0 per assicurarsi che ne venga eseguito il rendering prima di tutte le altre linee nell'origine dati.It also adds an index of 0 to ensure that it is rendered before any other lines in the data source. Il calcolo dell'itinerario per gli autocarri sarà infatti spesso più lento rispetto q quello dell'itinerario per le auto, di conseguenza se la linea dell'itinerario per gli autocarri viene aggiunto all'origine dati dopo quello per le auto, ne verrà eseguito il rendering su quest'ultimo.This is done as the truck route calculation will often be slower than a car route calculation and if the truck route line is added to the data source after the car route, it will render above it. Alla linea dell'itinerario per gli autocarri vengono aggiunte due proprietà, un colore di tratto con sfumatura blu e uno spessore tratto di 9 pixel.Two properties are added to the truck route line, a stroke color that is a nice shade of blue, and a stroke width of nine pixels.

  3. Aggiungere il codice JavaScript seguente per creare l'itinerario per un'auto e visualizzare i risultati.Add the following JavaScript code to construct a route for a car and display the results.

    routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
    
        //Get data features from response
        var data = directions.geojson.getFeatures();
    
        //Get the route line and add some style properties to it.  
        var routeLine = data.features[0];
        routeLine.properties.strokeColor = '#B76DAB';
        routeLine.properties.strokeWidth = 5;
    
        //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(routeLine);
    });
    

    Questo frammento di codice sopra indicato esegue query sul servizio di routing di Mappe di Azure tramite il metodo getRouteDirections.This code snippet above queries the Azure Maps routing service through the getRouteDirections method. La linea dell'itinerario viene estratta dalla raccolta di funzionalità GeoJSON dalla risposta ottenuta usando il metodo geojson.getFeatures().The route line is then extracted from the GeoJSON feature collection from the response that is extracted using the geojson.getFeatures() method. La linea di percorso viene quindi aggiunta all'origine dati.The route line is then added to the data source. Alla linea dell'itinerario per le auto vengono aggiunte due proprietà, un colore di tratto con sfumatura viola e uno spessore tratto di 5 pixel.Two properties are added to the car route line, a stroke color that is a shade of purple, and a stroke width of five pixels.

  4. Salvare il file MapTruckRoute.html e aggiornare il browser per osservare il risultato.Save the MapTruckRoute.html file and refresh your browser to observe the result. Se la connessione con le API di Mappe è stata stabilita correttamente, verrà visualizzata una mappa simile alla seguente.For a successful connection with the Maps' APIs, you should see a map similar to the following.

    Percorsi classificati in ordine di priorità con il servizio di pianificazione percorso

    L'itinerario per gli autocarri è blu e più è spesso, mentre l'itinerario per le auto è viola e più sottile.The truck route is blue and thicker, while the car route is purple and thinner. L'itinerario per le auto passa attraverso Washington Lake tramite la I-90, che attraversa i tunnel sotto le zone residenziali e pertanto è interdetto ai carichi di rifiuti pericolosi.The car route goes across Lake Washington via I-90, which goes through tunnels under residential areas and so restricts hazardous waste cargo. L'itinerario per gli autocarri, che specifica il tipo di carico USHazmatClass2, suggerisce correttamente di usare un'autostrada diversa.The truck route, which specifies a USHazmatClass2 cargo type, is correctly directed to use a different highway.

Passaggi successiviNext steps

Questa esercitazione illustra come:In this tutorial, you learned how to:

  • Creare una nuova pagina Web usando l'API del controllo mappaCreate a new web page using the map control API
  • Visualizzare il flusso del traffico sulla mappaVisualize traffic flow on your map
  • Creare query di itinerario che dichiarano la modalità di viaggioCreate route queries that declare mode of travel
  • Visualizzare più itinerari sulla mappaDisplay multiple routes on your map

L'esercitazione successiva illustra il processo di creazione di un semplice localizzatore di punti vendita con Mappe di Azure.The next tutorial demonstrates the process of creating a simple store locator by using Azure Maps.