Tutorial: Cómo mostrar direcciones de ruta mediante el servicio Route de Azure Maps y el Control de mapa

  • Artículo

En este tutorial se muestra cómo usar la API del servicio Route de Azure Maps y el Control de mapa para mostrar las direcciones de ruta de principio a fin. En este tutorial se muestra cómo:

  • Crear y mostrar el Control de mapa en una página web.
  • Definir la representación de pantalla de la ruta mediante la definición de capas de símbolo y capas de línea.
  • Crear y agregar objetos GeoJSON al mapa para representar los puntos inicial y final.
  • Obtener las direcciones de ruta desde los puntos inicial y final mediante Get Route directions API.

Consulte el tutorial de ruta en GitHub para el código fuente. Consulte Enrutamiento a un destino para obtener un ejemplo en directo.

Requisitos previos

Creación y muestra del Control de mapa

En los pasos siguientes se muestra cómo crear y mostrar el Control de mapa en una página web.

  1. En la máquina local, cree un nuevo archivo y asígnele el nombre MapRoute.html.

  2. Agregue el código HTML siguiente al archivo:

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

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

    Algunos aspectos que debe saber sobre el código HTML anterior:

    • El encabezado HTML incluye los archivos de recursos CSS y JavaScript hospedados por la biblioteca de Control de mapa de Azure.
    • El evento onload en el cuerpo de la página llama a la función GetMap cuando el cuerpo de la página se haya cargado.
    • La función GetMap contiene el código JavaScript insertado que se usa para acceder a las API de Azure Maps. Se agrega en el paso siguiente.

  3. A continuación, agregue el siguiente código JavaScript a la función GetMap, justo debajo del código agregado en el último paso. Este código crea un control de mapa y lo inicializa mediante las claves de suscripción de Azure Maps proporcionadas. Asegúrese de reemplazar la cadena <Your Azure Maps Key> por la clave principal de Azure Maps que copió de la cuenta de Maps.

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

    Algunos aspectos que debe saber sobre el código JavaScript anterior:

    • Este es el núcleo de la función GetMap, que inicializa la API de Control de mapa para la clave de cuenta de Azure Maps.
    • atlas es el espacio de nombres que contiene la API de Azure Maps y los componentes visuales relacionados.
    • atlas.Map proporciona el control para un mapa visual e interactivo.

  4. Guarde los cambios en el archivo y abra la página HTML en un explorador. El mapa mostrado es el más básico que puede crear con una llamada a atlas.Map mediante la clave de suscripción de su cuenta de Azure Maps.

    A screenshot showing the most basic map that you can make by calling `atlas.Map` using your Azure Maps account key.

Definición de la representación de la visualización de ruta

En este tutorial, se representa la ruta mediante una capa de línea. Los puntos inicial y final se representan mediante una capa de símbolos. Para obtener más información sobre cómo agregar capas de línea, vea Adición de una capa de línea al mapa. Para obtener más información acerca de las capas de símbolo, consulte Adición de una capa de símbolo a un mapa.

  1. En la función GetMap, después de inicializar el mapa, agregue el siguiente código JavaScript.

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

    Algunos aspectos que debe saber sobre el código JavaScript anterior:

    • Este código implementa el controlador de eventos ready del Control de mapa. El resto del código de este tutorial se coloca dentro del controlador de eventos ready.
    • En el controlador de eventos ready del Control de mapa, se crea un origen de datos para almacenar la ruta desde los puntos inicial y final.
    • Para definir cómo se representa la línea de la ruta, se crea una capa de línea y se adjunta al origen de datos. Para asegurarse de que la línea de ruta no cubre las etiquetas de la carretera, pase un segundo parámetro con el valor de 'labels'.

    A continuación, se crea una capa de símbolo y se adjunta al origen de datos. Esta capa especifica cómo se representan los puntos inicial y final. 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. Para más información sobre las expresiones, consulte Expresiones de estilo basadas en datos.

  2. A continuación, establezca como punto inicial Microsoft y como punto final una gasolinera de Seattle. El inicio y los puntos se crean anexando el siguiente código en el controlador de eventos ready del control de Maps:

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

    Algunos aspectos que debe saber sobre el código JavaScript anterior:

    • Este código crea dos objetos de punto de GeoJSON para representar los puntos inicial y final, que se agregan al origen de datos.
    • El último bloque de código establece la vista de la cámara con la latitud y longitud de los puntos inicial y final.
    • Los puntos inicial y final se agregan al origen de datos.
    • El rectángulo delimitador de los puntos inicial y final se calcula utilizando la función atlas.data.BoundingBox.fromData. Este rectángulo delimitador se usa para establecer la vista de las cámaras del mapa sobre la ruta completa mediante la función map.setCamera.
    • Para compensar las dimensiones de píxeles de los iconos de símbolos, se agrega relleno.

    Para obtener más información sobre el conjunto del control Map Cámara propiedad, vea set Cámara(Cámara Options | Cámara BoundsOptions & AnimationOptions) Propiedad.

  3. Guarde el archivo MapRoute.html y actualice el explorador. Ahora el mapa se centra en Seattle. La chincheta azul en forma de lágrima marca el punto inicial. La chincheta azul redonda marca el punto final.

    A screenshot showing a map with a route containing a blue teardrop pin marking the start point at Microsoft in Redmond Washington and a blue round pin marking the end point at a gas station in Seattle.

Obtención de direcciones de ruta

En esta sección se muestra cómo usar Route Directions API de Azure Maps para obtener instrucciones de ruta y el tiempo estimado de llegada de un punto a otro.

Sugerencia

El servicio Azure Maps Route ofrece API para planear rutas según el tipo, por ejemplo, más rápidas, más cortas, ecológicas o emocionantes de acuerdo con la distancia, las condiciones de tráfico y el modo de transporte usado. El servicio también permite a los usuarios planear rutas futuras según las condiciones del tráfico histórico. Los usuarios pueden ver la predicción de las duraciones de ruta en un momento dado. Para más información, consulte Get Route directions API.

  1. En la función GetMap, dentro del controlador de eventos ready del control, agregue lo siguiente al código de JavaScript.

    //Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));

//Construct the RouteURL object
var routeURL = new atlas.service.RouteURL(pipeline);

  2. Después de configurar las credenciales y la dirección URL, anexe el código siguiente al final del controlador de eventos ready del control.

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

    Algunos aspectos que debe saber sobre el código JavaScript anterior:

    • Este código crea la ruta desde el inicio hasta el punto final.
    • routeURL solicita a la API del servicio Route de Azure Maps que calcule las direcciones de la ruta.
    • 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.

  3. Guarde el archivo MapRoute.html y actualice el explorador web. El mapa ya debería mostrar la ruta desde el inicio hasta los puntos finales.

    A screenshot showing a map that demonstrates the Azure Map control and Route service.

  • Para obtener el código completo que se usa en este tutorial, consulte el tutorial de ruta en GitHub.
  • Para ver este ejemplo en directo, consulte Ruta a un destino en el sitio de ejemplos de código de Azure Maps.

Pasos siguientes

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. Después, puede mostrar varias rutas en el mismo mapa.

Búsqueda de rutas para diferentes modos de desplazamiento