Tutorial: Búsqueda y visualización de rutas para diferentes modos de desplazamiento mediante Azure Maps

  • Artículo

En este tutorial se muestra cómo utilizar el servicio Azure Maps Route y Control de mapa para mostrar direcciones de ruta para vehículos privados y comerciales (camiones) con el tipo de carga USHazmatClass2.

En este tutorial, aprenderá a:

  • Crear y mostrar el control de mapa en una página web.
  • Representar datos de tráfico en tiempo real en un mapa.
  • Solicitar y mostrar las rutas de vehículos privados y comerciales en un mapa.

Requisitos previos

Nota

Para más información sobre la autenticación en Azure Maps, consulte Administración de la autenticación en Azure Maps.

Crear una nueva página web con Map Control API

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 MapTruckRoute.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 la API de Azure Maps.

  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 Subscription Key> por la clave de suscripción de Azure Maps que copió de la cuenta de Maps.

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

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

    • Este código es el núcleo de la función GetMap, que inicializa la API de Control de mapa para la 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 el archivo y ábralo en el explorador. El explorador muestra un mapa básico mediante una llamada a atlas.Map con la clave de la suscripción de Azure Maps.

    A screenshot that shows the most basic map you can make by calling the atlas Map API, using your Azure Maps subscription key.

Representar datos de tráfico en tiempo real en un mapa.

  1. En la función GetMap, después de inicializar el mapa, agregue el siguiente código JavaScript. Este código implementa el controlador de eventos ready del Control de mapa.

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

    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 mapa, la configuración del flujo de tráfico en el mapa se ha establecido en relative, que es la velocidad de la carretera en relación con el flujo libre.
    • Para ver más opciones de tráfico, consulte la interfaz de TrafficOptions.

  2. Guarde el archivo MapTruckRoute.html y actualice la página en el explorador. Si acerca cualquier ciudad (por ejemplo, Los Ángeles), las calles muestran los datos actuales de flujo de tráfico.

    A screenshot that shows a map of Los Angeles, with the streets displaying traffic flow data.

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

En este tutorial, se calculan dos rutas en el mapa. La primera ruta se calcula para un vehículo privado (automóvil). La segunda ruta se calcula para que un vehículo comercial (camión) muestre la diferencia entre los resultados. Cuando se representa, el mapa muestra un icono de símbolo para los puntos inicial y final de la ruta, así como geometrías de líneas de ruta con distintos colores para cada ruta de acceso. 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 el controlador de eventos ready del Control de mapa, anexe el código siguiente.

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

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

    • En el controlador de eventos ready del control de mapa, se creará un origen de datos para almacenar la ruta de principio a fin.
    • Para recuperar la anchura y el color de línea a partir de las propiedades de la característica de línea de ruta, se utilizan expresiones.
    • Para asegurarse de que la línea de ruta no cubre las etiquetas de la carretera, hemos pasado 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 el punto inicial en una empresa ficticia de Seattle llamada Fabrikam y el punto final en una oficina de Microsoft. En el controlador de eventos ready del Control de mapa, anexe el código siguiente.

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

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

    Información 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 más información, consulte la función setCamera en la documentación técnica de Microsoft.

  3. Guarde el archivo TruckRoute.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 that shows a map with a route containing a blue teardrop pin marking the start point and a blue round pin marking the end point.

Solicitar y mostrar las rutas de vehículos privados y comerciales en un mapa

En esta sección se muestra cómo usar el servicio Azure Maps Route para obtener direcciones de un punto a otro según el modo de transporte. Se utilizan dos modos de transporte: camión y coche.

Sugerencia

El servicio Route proporciona las API para planear rutas que sean más rápidas, más cortas, ecológicas o emocionantes en función de la distancia, las condiciones del tráfico y el modo de transporte utilizado. Este 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, agregue el siguiente código JavaScript para crear una ruta de camión del punto inicial a los puntos finales. Esta ruta se creará y mostrará para un camión que transporta una carga clasificada como USHazmatClass2.

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

    Información sobre el código JavaScript anterior:

    • El código anterior consulta el servicio Route de Azure Maps mediante Route Directions API de Azure Maps.
    • A continuación, se extrae la línea de ruta de la colección de características de GeoJSON de la respuesta extraída con el método geojson.getFeatures().
    • La línea de ruta se agrega entonces al origen de datos.
    • Se agregan dos propiedades a la línea de ruta del camión: un color de trazo azul #2272B9 y un ancho de trazo de nueve píxeles.
    • También se agrega un índice de 0 a la línea de ruta para asegurarse de que la ruta del camión se representa antes que otras líneas en el origen de datos. Esto se hace porque el cálculo de la ruta del camión suele ser más lento que el de la ruta de un automóvil. Si la línea de ruta del camión se agrega al origen de datos después de la ruta del turismo, se representará sobre ella.

    Sugerencia

    Para ver todas las opciones y valores posibles de Route Directions API de Azure Maps, consulte Parámetros de URI para Post Route Directions.

  3. A continuación, anexe el siguiente código JavaScript con el fin de crear una ruta para un automóvil.

    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. This will add the car route after the truck route.  
    datasource.add(routeLine);
});

    Información sobre el código JavaScript anterior:

    • El código anterior consulta el servicio de enrutamiento de Azure Maps mediante el método de Route Directions API de Azure Maps.
    • A continuación, se extrae la línea de ruta de la colección de características de GeoJSON de la respuesta extraída con el método geojson.getFeatures() y se agrega al origen de datos.
    • Se agregan dos propiedades a la línea de ruta del camión: un color de trazo púrpura #B76DAB y un ancho de trazo de cinco píxeles.

  4. Guarde el archivo TruckRoute.html y actualice el explorador web. El mapa debería mostrar ahora las rutas de camión y de automóvil.

    A screenshot that displays both a private as well as a commercial vehicle route on a map using the Azure Route Service.

    • La ruta del camión se muestra con una línea azul gruesa y la ruta del automóvil se muestra con una línea púrpura fina.
    • La ruta de automóvil transcurre por Lake Washington a través de la I-90 y pasa por túneles bajo zonas residenciales. Como los túneles están en las zonas residenciales, se restringe el transporte de residuos peligrosos. La ruta del camión, que especifica el tipo de carga USHazmatClass2, se redirige a una ruta diferente que no tiene esta restricción.

Pasos siguientes

En el siguiente tutorial se muestra el proceso de creación de un localizador de tiendas sencillo mediante Azure Maps.

Creación de un localizador de almacén mediante Azure Maps