Compartir por

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

  • Artigo

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>

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

    Algunas cosas que se deben saber sobre el código HTML:

    • 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 finaliza la carga del cuerpo de la página.
    • La función GetMap contiene el código JavaScript insertado que se usa para acceder a las API de Azure Maps. Esta función se agrega en el siguiente paso.

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

    Algunas cosas que se deben saber sobre JavaScript:

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

    Captura de pantalla en la que se muestra el mapa más básico que puede crear con una llamada a `atlas.Map` usando la clave de la cuenta de Azure Maps.

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

    Algunas cosas que se deben saber sobre JavaScript:

    • 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 agregaron expresiones para recuperar la información de la imagen de icono y de la etiqueta de texto 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
});

    Algunas cosas que se deben saber sobre JavaScript:

    • 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 la propiedad setCamera del control Map, consulte la propiedad setCamera(CameraOptions | CameraBoundsOptions y AnimationOptions).

  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.

    Captura de pantalla en la que se muestra un mapa con una ruta: una lágrima azul marca el punto inicial en Microsoft en Redmond Washington y un círculo azul, el final en una gasolinera de 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.

    var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
var url = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;

//Make a search route request
fetch(url, {
    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 route line to the datasource
    datasource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates)));
});

    Algunas cosas que se deben saber sobre JavaScript:

    • Este código crea la ruta desde el inicio hasta el punto final.
    • El url consulta la API del servicio Route de Azure Maps para calcular las direcciones de ruta.
    • A continuación, se extrae una matriz de coordenadas de la respuesta y se agrega al origen de datos.

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

    Captura de pantalla en la que se muestra un mapa con el control de Azure Map y el servicio Route.

  • 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