Tutorial: Encontrar e exibir rotas para diferentes modos de viagem utilizando Azure Maps

Este tutorial mostra-lhe como utilizar o serviço Azure Maps Route e o controlo do Mapa para exibir as direções da rota tanto para veículos particulares como para veículos comerciais (camiões) com USHazmatClass2 tipo de carga.

Neste tutorial, ficará a saber como:

  • Criar e exibir o controlo do Mapa numa página web
  • Renderizar dados de tráfego em tempo real num mapa
  • Solicitar e exibir rotas de veículos particulares e comerciais num mapa

Pré-requisitos

  1. Uma conta Azure Maps.

  2. Uma chave de subscrição primária Azure Maps, também conhecida como a chave primária ou a chave de subscrição. Para obter mais informações sobre a autenticação em Azure Maps, consulte a autenticação em Azure Maps.

Criar uma nova página Web com a API de Controlo de Mapas

Os passos a seguir mostram-lhe como criar e exibir o controlo do Mapa numa página web.

  1. No seu computador local, crie um novo ficheiro e dê-lhe o nome MapTruckRoute.html.

  2. Adicione o seguinte HTML ao ficheiro:

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

    Algumas coisas a saber sobre o HTML acima:

    • O cabeçalho HTML inclui ficheiros de recursos CSS e JavaScript que são hospedados pela biblioteca Azure Map Control.
    • O onload evento no corpo da página chama a GetMap função quando o corpo da página está carregado.
    • A GetMap função conterá o código JavaScript inline utilizado para aceder à API Azure Maps.
  3. Em seguida, adicione o seguinte código JavaScript à GetMap função, logo abaixo do código adicionado no último passo. Este código cria um controlo de mapa e inicializa-o utilizando as chaves de subscrição primária Azure Maps que fornece. Certifique-se de que a cadeia <Your Azure Maps Key> é a Azure Maps chave primária que copiou da sua conta Maps.

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

    Algumas coisas a saber sobre o JavaScript acima:

    • Este código é o núcleo da GetMap função, que inicializa a API de Controlo de Mapas para a sua conta Azure Maps.
    • atlas é o espaço de nome que contém a API Azure Maps e componentes visuais relacionados.
    • atlas.Map fornece o controlo para um mapa Web interativo e visual.
  4. Guarde o ficheiro e abra-o no browser. O navegador apresentará um mapa básico chamando atlas.Map a sua chave de subscrição primária Azure Maps.

    Uma imagem que mostra o mapa mais básico que pode fazer chamando a API do mapa atlas, usando a sua chave de subscrição primária Azure Maps.

Renderizar dados de tráfego em tempo real num mapa

  1. Na função GetMap, após inicializar o mapa, adicione o seguinte código JavaScript. Este código implementa o manipulador de eventos do controlo do ready mapa.

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

    Algumas coisas a saber sobre o JavaScript acima:

    • Este código implementa o manipulador de eventos do controlo do ready mapa. O resto do código neste tutorial será colocado dentro do manipulador do ready evento.
    • No manipulador de eventos do mapa ready , a definição do fluxo de tráfego no mapa está definida para relative, que é a velocidade da estrada em relação ao fluxo livre.
    • Para mais opções de tráfego, consulte a interface TrafficOptions.
  2. Guarde o ficheiro MapTruckRoute.html e atualize a página no browser. Se você aproximar-se de qualquer cidade, como Los Angeles, verá que as ruas exibem dados atuais do fluxo de tráfego.

    Uma imagem que mostra um mapa de Los Angeles, com as ruas a exibirem dados de fluxo de tráfego.

Definir renderização do ecrã de rota

Neste tutorial, dois trajetos serão calculados e processados no mapa. A primeira rota será calculada para um veículo particular (carro). A segunda rota será calculada para que um veículo comercial (caminhão) demonstre a diferença entre os resultados. Quando renderizado, o mapa apresentará um ícone de símbolo para os pontos de partida e final da rota, e geometrias da linha de rota com cores diferentes para cada caminho de rota. Para obter mais informações sobre a adição de camadas de linha, consulte Adicionar uma camada de linha a um mapa. Para saber mais sobre as camadas de símbolos, consulte Adicione uma camada de símbolo a um mapa.

  1. No manipulador de eventos do controlo do ready mapa, apece o seguinte código.

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

    Algumas coisas a saber sobre o JavaScript acima:

    • No manipulador de eventos do Controlo do Mapa, é criada uma fonte de ready dados para armazenar a rota do início ao fim.
    • As expressões são usadas para recuperar a largura e cor da linha de linha a partir de propriedades na linha de rota.
    • Para garantir que a linha de rota não cubra as etiquetas da estrada, passamos um segundo parâmetro com o valor de 'labels'.

    Em seguida, uma camada de símbolo é criada e anexada à fonte de dados. Esta camada especifica como os pontos de partida e final são renderizados. Foram adicionadas expressões para recuperar a imagem do ícone e a informação do rótulo de texto a partir de propriedades em cada objeto de ponto. Para saber mais sobre expressões, consulte expressões de estilo orientadas por Dados.

  2. Em seguida, definir o ponto de partida como uma empresa fictícia em Seattle chamada Fabrikam, e o ponto final como um escritório da Microsoft. No manipulador de eventos do controlo do ready mapa, apece o seguinte código.

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

    Sobre o JavaScript acima:

    • Este código cria dois objetos GeoJSON Point para representar pontos de partida e de fim, que são adicionados à fonte de dados.
    • O último bloco de código define a vista da câmara utilizando a latitude e longitude dos pontos de partida e de fim.
    • Os pontos de início e de fim são adicionados à origem de dados.
    • A caixa delimitadora para os pontos de início e de fim é calculada com a função atlas.data.BoundingBox.fromData. Esta caixa de delimitação é usada para definir a visualização das câmaras de mapa em toda a rota utilizando a map.setCamera função.
    • O estofamento é adicionado para compensar as dimensões dos pixels dos ícones do símbolo.
    • Para obter mais informações, consulte a função setCamera na documentação técnica da Microsoft.
  3. Guarde TruckRoute.html e refresque o seu navegador. O mapa está agora centrado em Seattle. O pino azul rasga o ponto de partida. O pino azul redondo marca o ponto final.

    Uma imagem que mostra um mapa com uma rota contendo um pino de lágrima azul marcando o ponto de partida e um pino redondo azul marcando o ponto final.

Solicitar e exibir rotas de veículos particulares e comerciais num mapa

Esta secção mostra-lhe como utilizar o serviço Azure Maps Route para obter direções de um ponto para o outro, com base no seu modo de transporte. Vamos usar dois modos de transporte: camião e carro.

Dica

O serviço Route fornece APIs para planear rotas mais rápidas, curtas, ecológicas ou emocionantes com base na distância, condições de tráfego e modo de transporte utilizado. O serviço permite ainda aos utilizadores planearem futuras rotas com base em condições históricas de tráfego. Os utilizadores podem ver a previsão das durações da rota durante qualquer momento. Para mais informações, consulte a API de direções da Rota.

  1. Na função GetMap , dentro do manipulador de eventos do ready controlo, adicione o seguinte ao código 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. Depois de configurar as credenciais e o URL, adicione o seguinte código JavaScript para construir uma rota de caminhão do início aos pontos finais. Esta rota é criada e exibida para um caminhão que transporta USHazmatClass2 carga classificada.

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

    Sobre o JavaScript acima:

    • Este código consulta o serviço Azure Maps Route através da API Azure Maps Rota.
    • A linha de rota é então extraída da coleção de recursos GeoJSON da resposta que é extraída usando o geojson.getFeatures() método.
    • A linha de rota é então adicionada à fonte de dados.
    • Duas propriedades são adicionadas à linha de rota do caminhão: uma cor #2272B9de traçado azul, e uma largura de traçado de nove pixels.
    • A linha de rota é dada um índice de 0 para garantir que a rota do caminhão é feita antes de qualquer outra linha na fonte de dados. A razão é que o cálculo da rota do camião será muitas vezes mais lento do que o cálculo da rota automóvel. Se a linha de rota do caminhão for adicionada à fonte de dados após a rota do carro, ela renderá acima dela.

    Dica

    Para ver todas as opções e valores possíveis para a API de Direções de Rota Azure Maps, consulte parâmetros URI para Direções de Rota Pós-Rota.

  3. Em seguida, apeia o seguinte código JavaScript para criar uma rota para um carro.

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

    Sobre o JavaScript acima:

    • Este código consulta o serviço de encaminhamento Azure Maps através do método API Azure Maps Rota.
    • A linha de rota é então extraída da recolha de recursos GeoJSON da resposta que é extraída usando o geojson.getFeatures() método e depois é adicionada à fonte de dados.
    • Duas propriedades são adicionadas à linha da rota do caminhão: uma cor #B76DABde traçado roxo, e uma largura de traçado de cinco píxeis.
  4. Guarde o ficheiro TruckRoute.html e atualize o seu navegador web. O mapa deve agora mostrar as rotas do caminhão e do carro.

    Uma imagem que exibe uma rota privada e comercial num mapa utilizando o Serviço de Rota Azure.

    • A rota do caminhão é exibida usando uma linha azul grossa e a rota do carro é exibida usando uma linha roxa fina.
    • A rota do carro atravessa o Lago Washington através da I-90, passando por túneis sob áreas residenciais. Como os túneis estão em áreas residenciais, a carga de resíduos perigosos é restrita. A rota do caminhão, que especifica um tipo de USHazmatClass2 carga, é direcionada para usar uma rota diferente que não tem esta restrição.

Passos seguintes

O próximo tutorial demonstra o processo de criação de um localizador de loja simples utilizando Azure Maps.