Ruta a un punto de interés mediante Azure MapsRoute to a point of interest using Azure Maps

En este tutorial se muestra cómo usar la cuenta de Azure Maps y el SDK de Route Service para buscar la ruta al punto de interés.This tutorial shows how to use your Azure Maps account and the Route Service SDK to find the route to your point of interest. En este tutorial, aprenderá a:In this tutorial, you learn how to:

  • Crear una nueva página web con Map Control APICreate a new web page using the map control API
  • Establecer las coordenadas de direcciónSet address coordinates
  • Consultar en Route Service direcciones a un punto de interésQuery Route Service for directions to point of interest

Requisitos previosPrerequisites

Antes de continuar, siga los pasos del tutorial anterior Create your Azure Maps account (Creación de una cuenta con Azure Maps) y Get the subscription key for your account (Obtención de la clave principal para la cuenta).Before you proceed, follow the steps in the previous tutorial to create your Azure Maps account, and get the subscription key for your account.

Creación de un nuevo mapaCreate a new map

En los pasos siguientes se muestra cómo crear una página HTML estática insertada con Map Control API.The following steps show you how to create a static HTML page embedded with the Map Control API.

  1. En la máquina local, cree un nuevo archivo y asígnele el nombre MapRoute.html.On your local machine, create a new file and name it MapRoute.html.

  2. Agregue los siguientes componentes HTML al archivo: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/mapcontrol/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>
    

    Observe que el encabezado HTML incluye los archivos de recursos CSS y JavaScript hospedados por la biblioteca de Control de mapa de Azure.Notice that the HTML header includes the CSS and JavaScript resource files hosted by the Azure Map Control library. Observe el evento onload en el cuerpo de la página, el cual llamará a la función GetMap cuando el cuerpo de la página se haya cargado.Note the onload event on the body of the page, which will call the GetMap function when the body of the page has loaded. Esta función contendrá el código JavaScript insertado para acceder a las API de Azure Maps.This function will contain the inline JavaScript code to access the Azure Maps APIs.

  3. Agregue el siguiente código JavaScript a la función GetMap.Add the following JavaScript code to the GetMap function. Reemplace la cadena <Your Azure Maps Key> por la clave principal que copió de la cuenta de Maps.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 proporciona el control para un mapa web visual e interactivo, y es un componente de la API de Control de mapa de 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. Guarde el archivo y ábralo en el explorador.Save the file and open it in your browser. En este punto, tiene un mapa básico que puede desarrollar aún más.At this point, you have a basic map that you can develop further.

    Visualización del mapa básico

Definición de cómo se representará la rutaDefine how the route will be rendered

En este tutorial, se representará una ruta simple mediante un icono de símbolo para el inicio y el final de la ruta, y una línea para el trazado de la ruta.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. Después de inicializar el mapa, agregue el siguiente código JavaScript.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.
        }));
    });
    

    En el controlador de eventos ready de los mapas, se crea un origen de datos para almacenar las líneas de las rutas, así como los puntos inicial y final.In the maps ready event handler, a data source is created to store the route line as well as the start and end points. Se crea una capa de línea y se asocia al origen de datos para definir cómo se representará la línea de la ruta.A line layer is created and attached to the data source to defined how the route line will be rendered. La línea de ruta tendrá una bonita tonalidad azul con un ancho de 5 píxeles y uniones de líneas y extremos redondeados.The route line will be rendered a nice shade of blue with a width of 5 pixels and rounded line joins and caps. Al agregar la capa al mapa, se pasa un segundo parámetro con el valor 'labels' que especifica que esta capa se debe representar por debajo de las etiquetas del mapa.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. Esto garantiza que la línea de ruta no cubrirá las etiquetas de la carretera.This will ensure that the route line doesn't cover up the road labels. Se crea una capa de símbolos y se asocia al origen de datos.A symbol layer is created and attached to the data source. Esta capa especifica cómo se representarán los puntos inicial y final. En este caso, se han agregado expresiones para recuperar la imagen del icono y la información de la etiqueta de texto a partir de las propiedades de cada objeto de 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. En este tutorial, establezca como punto inicial Microsoft y como punto final una gasolinera de Seattle.For this tutorial, set the start point as Microsoft, and the end point as a gas station in Seattle. En el controlador de eventos ready de los mapas, agregue el código siguiente.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
    });
    

    Este código crea dos objetos de punto de GeoJSON para representar los puntos inicial y final de la ruta y agrega estos puntos al origen de datos.This code creates two GeoJSON Point objects to represent the start and end points of the route and adds the points to the datasource. Se agrega una propiedad title y icon a cada punto.A title and icon property is added to each point. El último bloque establece la vista de la cámara con la información de latitud y longitud de los puntos inicial y final, mediante la propiedad setCamera del mapa.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. Guarde el archivo MapRoute.html y actualice el explorador.Save the MapRoute.html file and refresh your browser. Ahora el mapa se centra en Seattle, y puede ver como la chincheta azul marca el punto inicial y otra chincheta azul redonda, el punto final.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.

    Visualización del mapa con los puntos de inicio y fin marcados

Obtención de las direccionesGet directions

En esta sección, se muestra cómo usar Route Service API de Azure Maps para buscar la ruta desde un punto inicial determinado hasta el punto final.This section shows how to use Azure Maps route service API to find the route from a given start point to end point. El servicio de ruta proporciona las API para planear la ruta más rápida, más corta, ecológica o emocionante entre dos ubicaciones.The route service provides APIs to plan fastest, shortest, eco, or thrilling routes between two locations. También permite a los usuarios planear rutas futuras mediante el uso de bases de datos que contienen un historial amplio del tráfico y la predicción de duraciones de una ruta en cualquier día y a cualquier hora.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. Para más información, consulte Obtención de direcciones de ruta.For more information, see Get route directions. Todas las funcionalidades siguientes deben agregarse dentro del elemento eventListener preparado para mapas para asegurarse de que se cargan cuando ya se puede acceder a los recursos del mapa.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. En la función GetMap, agregue lo siguiente al código JavaScript.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 SubscriptionKeyCredentialPolicy para autenticar las solicitudes HTTP en Azure Maps con la clave de suscripción.The SubscriptionKeyCredential creates a SubscriptionKeyCredentialPolicy to authenticate HTTP requests to Azure Maps with the subscription key. atlas.service.MapsURL.newPipeline() toma la directiva SubscriptionKeyCredential y crea una instancia de canalización.The atlas.service.MapsURL.newPipeline() takes in the SubscriptionKeyCredential policy and creates a Pipeline instance. routeURL representa una dirección URL para las operaciones Route de Azure Maps.The routeURL represents a URL to Azure Maps Route operations.

  2. Después de configurar las credenciales y la dirección URL, agregue el siguiente código JavaScript para construir la ruta desde el punto inicial hasta el final.After setting up credentials and the URL, add the following JavaScript code to construct the route from start to end point. routeURL solicita a Route Service de Azure Maps que calcule las direcciones de la ruta.The routeURL requests the Azure Maps route service to calculate route directions. Se extrae una colección de características de GeoJSON de la respuesta con el método geojson.getFeatures() y se agregan al origen de datos.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. Guarde el archivo MapRoute.html y actualice el explorador web.Save the MapRoute.html file and refresh your web browser. Para conectarse correctamente con las API de Maps, debe ver un mapa similar al siguiente.For a successful connection with the Maps APIs, you should see a map similar to the following.

    Control de mapa y Route Service de Azure

Pasos siguientesNext steps

En este tutorial aprendió lo siguiente:In this tutorial, you learned how to:

  • Crear una nueva página web con Map Control APICreate a new web page using the map control API
  • Establecer las coordenadas de direcciónSet address coordinates
  • Consultar en el servicio de ruta las direcciones a un punto de interésQuery the route service for directions to point of interest

En el siguiente tutorial se muestra cómo crear una consulta de ruta con restricciones, como el modo de desplazamiento o el tipo de carga y, después, visualizar varias rutas en el mismo mapa.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.