Compartir vía

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>

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

    Algunas cosas que se deben saber sobre JavaScript:

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

    Captura de pantalla en la que se muestra el mapa más básico que se puede crear con una llamada a Map API en el atlas con la clave de suscripción de Azure Maps.

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

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

    Captura de pantalla en la que se muestra un mapa de Los Angeles, con datos del tráfico en las calles.

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

    Algunas cosas que se deben saber sobre JavaScript:

    • 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, 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. Las expresiones se agregan para recuperar la información de la imagen de icono y 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 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
});

    Acerca de 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 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.

    Captura de pantalla en la que se muestra un mapa con una ruta: una lágrima que marca el punto de inicio y un círculo azul, el final.

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 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 search route request
var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
//Make a search route request for a truck vehicle type
var truckRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&travelMode=truck&vehicleWidth=2&vehicleHeight=2&vehicleLength=5&vehicleLoadType=USHazmatClass2&query=${query}`;
fetch(truckRouteUrl, {
    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 the route line to the data source. We want this to render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#2272B9",
            strokeWidth: 9
        }),
        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, la línea de ruta se crea a partir de las coordenadas de cada turno de la respuesta.
    • 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.

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

    var carRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
fetch(carRouteUrl, {
    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 the route line to the data source. This will add the car route after the truck route.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#B76DAB",
            strokeWidth: 5
        })
    );
});

    Acerca de JavaScript:

    • 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, la línea de ruta se crea a partir de las coordenadas de cada turno 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.

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

    Captura de pantalla en la que se muestra una ruta de un vehículo privado y uno comercial en un mapa con 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