Búsqueda de rutas para diferentes modos de desplazamiento mediante Azure MapsFind routes for different modes of travel using Azure Maps

En este tutorial se muestra cómo usar la cuenta de Azure Maps y servicio de rutas para buscar la ruta al punto de interés, con una prioridad establecida según el modo de desplazamiento.This tutorial shows how to use your Azure Maps account and the route service to find the route to your point of interest, prioritized by your mode of travel. Se muestran dos rutas distintas en el mapa, una para automóviles y otra para camiones que podrían tener restricciones de ruta debido a la altura, el peso o una carga peligrosa.You display two different routes on your map, one for cars and one for trucks that may have route restrictions because of height, weight, or hazardous cargo. 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
  • Visualizar el flujo de tráfico en el mapaVisualize traffic flow on your map
  • Crear consultas de ruta que declaran el modo de desplazamientoCreate route queries that declare mode of travel
  • Mostrar varias rutas en el mapaDisplay multiple routes on your map

Requisitos previosPrerequisites

Antes de continuar, siga los pasos del primer tutorial para la Creación de una cuenta de Azure Maps y la Obtención de la clave de suscripción de la cuenta.Before you proceed, follow the steps in the first 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 MapTruckRoute.html.On your local machine, create a new file and name it MapTruckRoute.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>'
        }
    });
    

    La clase 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 class 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

Visualizar el flujo de tráficoVisualize traffic flow

  1. Agregue la visualización del flujo de tráfico al mapa.Add the traffic flow display to the map. El evento ready de los mapas espera hasta que los recursos de los mapas se han cargado y están listos para interactuar de forma segura con ellos.The maps ready event waits until the maps resources are loaded and ready to safely interact with it.

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

    En el controlador de eventos ready del mapa, la configuración del flujo de tráfico en el mapa está establecida en relative, que es la velocidad de la carretera relativa a la libre circulación.In the map ready event handler, the traffic flow setting on the map is set to relative, which is the speed of the road relative to free-flow. También podría establecerlo en velocidad absolute de la carretera o relative-delay, que muestra la velocidad relativa en el punto en que varía con respecto a la libre circulación.You could also set it to absolute speed of the road or relative-delay, which displays the relative speed where it differs from free-flow.

  2. Guarde el archivo MapTruckRoute.html y actualice la página en el explorador.Save the MapTruckRoute.html file and refresh the page in your browser. Si interactúa con el mapa y lo acerca para centrarse en Los Ángeles, debería ver las calles con los datos de tráfico actuales.If you interact with the map and zoom in to Los Angeles, you should see the streets with the current traffic data.

    Visualización del mapa del tráfico

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

En este tutorial, se calcularán y se representarán dos rutas en el mapa.In this tutorial, two routes will be calculated and rendered on the map. Una ruta con carreteras accesibles para los coches y otra accesible para camiones.One route using roads accessible to cars and the other accessible to trucks. Cuando se representen, aparecerá un icono de inicio y otro de fin de ruta, y diferentes líneas de colores para cada ruta.When rendered we will display a symbol icon for the start and end of the route, and different colored lines for each route path.

  1. Después de inicializar el mapa, agregue el siguiente código JavaScript en el controlador de eventos ready de los mapas.After initializing the map, add the following JavaScript code in the maps ready event handler.

    //Wait until the map resources have fully loaded.
    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: ['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.
        }));
    });
    

    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 lines 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. Las expresiones se usan para recuperar la anchura y el color de línea desde las propiedades de la característica de línea de ruta.Expressions are used to retrieve the line width and color from properties on the route line feature. 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. Para este tutorial, establezca el punto inicial como una compañía ficticia en Seattle llamada Fabrikam y el punto de destino como una oficina de Microsoft.For this tutorial, set the start point as a fictitious company in Seattle called Fabrikam, and the destination point as a Microsoft office. 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 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'
    });
    

    Este código crea dos objetos GeoJSON para representar los puntos inicial y final de la ruta.This code creates two GeoJSON objects to represent the start and end points of the route. Se agrega una propiedad title y icon a cada punto.A title and icon property is added to each point.

  3. A continuación, agregue el siguiente código JavaScript para agregar los marcadores de los puntos inicial y final al mapa:Next, add the following JavaScript code to add the pins for the start and end points to the map:

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

    Los puntos inicial y final se agregan al origen de datos.The start and end points are added to the data source. El rectángulo delimitador de los puntos inicial y final se calcula utilizando la función atlas.data.BoundingBox.fromData.The bounding box for the start and end points is calculated using the atlas.data.BoundingBox.fromData function. 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.This bounding box is used to set the map cameras view over the entire route using the map.setCamera function. Se agrega un relleno para compensar las dimensiones de píxeles de los iconos de símbolos.A padding is added to compensate for the pixel dimensions of the symbol icons.

  4. Guarde el archivo y actualice el explorador para ver los anclajes en el mapa.Save the file and refresh your browser to see the pins displayed on your map. Ahora el mapa se centra en Seattle, y puede ver como la chincheta azul redonda marca el punto de inicio y otra chincheta azul el punto de fin.Now the map is centered over Seattle, and you can see the round blue pin marking the start point and the blue pin marking the finish point.

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

Representar las rutas con una prioridad establecida según el modo de desplazamientoRender routes prioritized by mode of travel

En esta sección se explica cómo usar Route Service API de Maps para buscar varias rutas desde un punto inicial determinado hasta un punto final, según el modo de transporte.This section shows how to use the Maps route service API to find multiple routes from a given start point to the end point based on your mode of transport. El servicio de rutas proporciona varias API para planear la ruta más rápida, más corta, más económica o más emocionante entre dos ubicaciones, teniendo en cuenta las condiciones del tráfico en tiempo real.The route service provides APIs to plan fastest, shortest, eco, or thrilling routes between two locations, considering the current traffic conditions. 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 Direcciones de GetRoute.For more information, see GetRoute Directions. Todos los bloques de código siguientes se deben agregar dentro del elemento eventListener de carga de mapas para asegurarse de que se cargan después de que el mapa se carga completamente.All of the following code blocks should be added within the map load eventListener to ensure that they load after the map loads fully.

  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 una ruta desde el punto inicial al final para un camión que transporta mercancía clasificada como USHazmatClass2 y mostrar los resultados.After setting up credentials and the URL, add the following JavaScript code to construct a route from start to end point for a truck carrying USHazmatClass2 classed cargo and display the results.

    //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. 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(routeLine, 0);
    });
    

    Este fragmento de código anterior consulta el servicio de enrutamiento de Azure Maps con el método getRouteDirections.This code snippet above queries the Azure Maps routing service through the getRouteDirections method. 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().The route line is then extracted from the GeoJSON feature collection from the response that is extracted using the geojson.getFeatures() method. La línea de ruta se agrega entonces al origen de datos.The route line is then added to the data source. También agrega un índice de 0 para asegurarse de que se representa antes que otras líneas en el origen de datos.It also adds an index of 0 to ensure that it is rendered before any other lines in the data source. Esto se hace ya que, a menudo, el cálculo de la ruta del camión será más lento que el de la ruta de un coche, y si la línea de ruta del camión se agrega al origen de datos después de la ruta del coche, esta se representará por encima.This is done as the truck route calculation will often be slower than a car route calculation and if the truck route line is added to the data source after the car route, it will render above it. Se agregan dos propiedades a la línea de ruta del camión, una pincelada con un agradable tono azul y una pincelada de nueve píxeles de ancho.Two properties are added to the truck route line, a stroke color that is a nice shade of blue, and a stroke width of nine pixels.

  3. Agregue el siguiente código JavaScript para construir una ruta para un automóvil y mostrar los resultados.Add the following JavaScript code to construct a route for a car and display the results.

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

    Este fragmento de código anterior consulta el servicio de enrutamiento de Azure Maps con el método getRouteDirections.This code snippet above queries the Azure Maps routing service through the getRouteDirections method. 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().The route line is then extracted from the GeoJSON feature collection from the response that is extracted using the geojson.getFeatures() method. La línea de ruta se agrega entonces al origen de datos.The route line is then added to the data source. Se agregan dos propiedades a la línea de ruta del coche, una pincelada con un tono morado y una pincelada de cinco píxeles de ancho.Two properties are added to the car route line, a stroke color that is a shade of purple, and a stroke width of five pixels.

  4. Guarde el archivo MapTruckRoute.html y actualice el explorador para observar el resultado.Save the MapTruckRoute.html file and refresh your browser to observe the result. Para una conexión correcta 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.

    Rutas con prioridad establecida con Azure Route Service

    La ruta para camión es azul y más gruesa, mientras que la ruta para automóvil es púrpura y más estrecha.The truck route is blue and thicker, while the car route is purple and thinner. La ruta para automóvil transcurre a través de Lake Washington por la I-90, que pasa por túneles en áreas residenciales y por lo que se restringe la carga de residuos peligrosos.The car route goes across Lake Washington via I-90, which goes through tunnels under residential areas and so restricts hazardous waste cargo. La ruta para camión, que especifica un tipo de carga USHazmatClass2, se dirige correctamente para usar una autopista diferente.The truck route, which specifies a USHazmatClass2 cargo type, is correctly directed to use a different highway.

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
  • Visualizar el flujo de tráfico en el mapaVisualize traffic flow on your map
  • Crear consultas de ruta que declaran el modo de desplazamientoCreate route queries that declare mode of travel
  • Mostrar varias rutas en el mapaDisplay multiple routes on your map

En el siguiente tutorial se muestra el proceso de creación de un localizador de almacenamiento sencillo mediante Azure Maps.The next tutorial demonstrates the process of creating a simple store locator by using Azure Maps.

Use data-driven style expressions (Uso de expresiones de estilo controladas por datos)Use data-driven style expressions