Esercitazione: Trovare il percorso per raggiungere un punto di interesse usando Mappe di AzureTutorial: Route to a point of interest using Azure Maps

Questa esercitazione illustra come usare l'account Mappe di Azure e l'SDK del servizio di pianificazione percorso per trovare il percorso per raggiungere un determinato punto di interesse.This tutorial shows how to use your Azure Maps account and the Route Service SDK to find the route to your point of interest. 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
  • Impostare le coordinate di un indirizzoSet address coordinates
  • Inviare una query al servizio di pianificazione percorso per ottenere le indicazioni stradali per un punto di interesseQuery Route Service for directions to point of interest

PrerequisitiPrerequisites

Prima di procedere, seguire le istruzioni in Gestire l'account per creare una sottoscrizione dell'account Mappe di Azure con il piano tariffario S1 ed eseguire la procedura descritta in Ottenere la chiave primaria per ottenere la chiave di sottoscrizione primaria per l'account.Before you proceed, follow 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 MapRoute.html.On your local machine, create a new file and name it MapRoute.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>'
        }
    });
    

    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 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

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

In questa esercitazione verrà eseguito il rendering di un itinerario semplice usando un'icona di simbolo per l'inizio e la fine dell'itinerario e una linea per il percorso dell'itinerario.In this tutorial, a simple route will be rendered using a symbol icon for the start and end of the route, and a line for the route path.

  1. Dopo aver inizializzato la mappa, aggiungere il codice JavaScript seguente.After initializing the map, add the following JavaScript code.

    //Wait until the map resources are ready.
    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: '#2272B9',
            strokeWidth: 5,
            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 la riga relativa 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 line 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. Il rendering del livello linea sarà caratterizzato da una sfumatura blu di larghezza pari a 5 pixel e giunzioni di linee ed estremità arrotondate.The route line will be rendered a nice shade of blue with a width of 5 pixels and rounded line joins and caps. 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 Microsoft come punto di partenza e una stazione di rifornimento a Seattle come punto di destinazione.For this tutorial, set the start point as Microsoft, and the end point as a gas station in Seattle. 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 points of the route.
    var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
        title: "Redmond",
        icon: "pin-blue"
    });
    
    var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.3352, 47.61397]), {
        title: "Seattle",
        icon: "pin-round-blue"
    });
    
    //Add the data to the data source.
    datasource.add([startPoint, endPoint]);
    
    map.setCamera({
        bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
        padding: 80
    });
    

    Questo codice crea due oggetti punto GeoJSON per rappresentare i punti di partenza e di arrivo dell'itinerario e aggiunge i punti all’origine dati.This code creates two GeoJSON Point objects to represent the start and end points of the route and adds the points to the datasource. A ogni punto vengono aggiunge le proprietà title e icon.A title and icon property is added to each point. L'ultimo blocco imposta la visualizzazione della fotocamera tramite le informazioni di latitudine e longitudine dei punti iniziale e finale, utilizzando la proprietà setCamera della mappa.The last block sets the camera view using the latitude and longitude information of the start and end points, using the Map's setCamera property.

  3. Salvare il file MapRoute.html e aggiornare il browser.Save the MapRoute.html file and refresh your browser. Ora la mappa è centrata su Seattle ed è possibile vedere il segnaposto blu 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 blue pin marking the start point and the round blue pin marking the finish point.

    Visualizzare la mappa con i punti di partenza e di arrivo contrassegnati

Ottenere le indicazioni stradaliGet directions

Questa sezione illustra come usare l'API del servizio di pianificazione percorso di Mappe di Azure per trovare il percorso per raggiungere una destinazione da un determinato punto di partenza.This section shows how to use Azure Maps route service API to find the route from a given start point to end point. Il servizio di pianificazione percorso fornisce le API per pianificare il percorso più veloce, più breve, più ecologico o più interessante tra due posizioni.The route service provides APIs to plan fastest, shortest, eco, or thrilling routes between two locations. 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 Get route directions. Tutte le funzionalità seguenti devono essere aggiunte all'interno del listener ready della mappa per garantire che vengano caricate quando le risorse della mappa sono pronte per l'accesso.All of the following functionalities should be added within the map ready eventListener to ensure that they load after the map resources are ready to be accessed.

  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 il percorso dal punto iniziale a quello finale.After setting up credentials and the URL, add the following JavaScript code to construct the route from start to end point. routeURL chiede al servizio di pianificazione percorso Mappe di Azure di calcolare le indicazioni.The routeURL requests the Azure Maps route service to calculate route directions. Dalla risposta viene estratta una raccolta di funzionalità GeoJSON con il metodo geojson.getFeatures() e viene aggiunta all'origine dati.A GeoJSON feature collection from the response is then extracted using the geojson.getFeatures() method and added to the data source.

    //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
    routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
        //Get data features from response
        var data = directions.geojson.getFeatures();
        datasource.add(data);
    });
    
  3. Salvare il file MapRoute.html e aggiornare il Web browser.Save the MapRoute.html file and refresh your web browser. 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.

    Controllo mappa e servizio di pianificazione percorso di Azure

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
  • Impostare le coordinate di un indirizzoSet address coordinates
  • Inviare una query al servizio di pianificazione percorso per ottenere le indicazioni stradali per un punto di interesseQuery the route service for directions to point of interest

L'esercitazione successiva illustra come creare una query del percorso con restrizioni, ad esempio la modalità di trasporto o il tipo di carico, e come visualizzare più percorsi sulla mappa stessa.The next tutorial demonstrates how to create a route query with restrictions like mode of travel or type of cargo, then display multiple routes on the same map.