Tutorial: Como exibir o trajeto de rota usando o serviço Roteiros do Azure Mapas e o Controle de Mapeamento

  • Artigo

Esse tutorial mostra como usar a API do serviço Roteiros do Azure Mapas e o Controle de Mapeamento para exibir o trajeto de rota do ponto inicial ao final. Este tutorial demonstra como:

Confira o tutorial de rota no GitHub para obter o código-fonte. Confira Rotear para um destino para ver um exemplo ao vivo.

Pré-requisitos

Criar e exibir o Controle de Mapeamento

As etapas a seguir mostram como criar e exibir o Controle de Mapeamento em uma página da Web.

  1. Em seu computador local, crie um novo arquivo e nomeie-o como MapRoute.html.

  2. Adicione o seguinte HTML ao arquivo:

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

    Algumas coisas a saber sobre o HTML acima:

    • O cabeçalho HTML inclui arquivos de recurso CSS e JavaScript hospedados pela biblioteca de Controle de Mapeamento do Azure.
    • Observe o evento onload no corpo da página que chamará a função GetMap quando o corpo da página for carregado.
    • A função GetMap contém o código JavaScript embutido para acessar as APIs do Azure Mapas. Ela é adicionada na próxima etapa.

  3. Então adicione o código JavaScript a seguir à função GetMap, logo abaixo do código adicionado na última etapa. Esse código cria um controle de mapeamento e o inicializa usando as chaves de assinatura do Azure Mapas que você fornece. Substitua substituir a cadeia de caracteres <Your Azure Maps Key> pela chave primária do Azure Mapas que você copiou de sua Mapas conta.

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

    Algumas coisas a saber sobre o JavaScript acima:

    • esse é o núcleo da função GetMap, que inicializa a API de Controle de Mapeamento para sua chave de conta do Azure Mapas.
    • atlas é o namespace que contém a API do Azure Mapas e os componentes visuais relacionados.
    • atlas.Map fornece o controle para um mapa visual e interativo na Web.

  4. Salve suas alterações no arquivo e abra a página HTML em um navegador. O mapa mostrado é o mais básico que você pode fazer chamando atlas.Map e usando a sua chave de assinatura de conta do Azure Mapas.

    A screenshot showing the most basic map that you can make by calling `atlas.Map` using your Azure Maps account key.

Definir renderização de exibição de rota

Neste tutorial, a rota é renderizada usando uma camada de linha. Os pontos inicial e final são renderizados usando uma camada de símbolo. Para obter mais informações sobre como adicionar camadas de linha, confira Adicionar uma camada de linha a um mapa. Para saber mais sobre camadas de símbolo, confira Adicionar uma camada de símbolo a um mapa.

  1. Na função GetMap, depois de inicializar o mapa, adicione o código JavaScript a seguir.

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

    Algumas coisas a saber sobre o JavaScript acima:

    • Esse código implementa o manipulador de eventos ready do Controle de Mapeamento. O restante do código neste tutorial está colocado no manipulador de eventos ready.
    • No manipulador de eventos ready do Controle de Mapeamento, uma fonte de dados é criada para armazenar a rota do ponto inicial ao final.
    • Para definir como a linha de rota é renderizada, uma camada de linhas será criada e anexada à fonte de dados. Para garantir que a linha de rota não cubra os rótulos de estrada, passe um segundo parâmetro com o valor de 'labels'.

    Em seguida, uma camada de símbolo é criada e anexada à fonte de dados. Essa camada especifica como os pontos inicial e final são renderizados. As expressões foram adicionadas para recuperar a imagem de ícone e as informações de rótulo de texto das propriedades em cada objeto de ponto. Para saber mais sobre as expressões, confira Expressões de estilo controladas por dados.

  2. A seguir, defina o ponto inicial como Microsoft e o ponto final como um posto de gasolina em Seattle. O início e os pontos são criados acrescentando o seguinte código no manipulador de eventos ready do controle de mapa:

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

    Algumas coisas a saber sobre o JavaScript acima:

    • Esse código cria dois objetos de Ponto GeoJSON para representar os pontos inicial e final, que são então adicionados à fonte de dados.
    • O último bloco de código define a exibição da câmera usando a latitude e a longitude dos pontos inicial e final.
    • Os pontos de partida e chegada são adicionados à fonte de dados.
    • A caixa delimitadora dos pontos de partida e chegada é calculada com a função atlas.data.BoundingBox.fromData. Essa caixa delimitadora é usada para definir o modo de exibição das câmeras por toda a rota usando a função map.setCamera.
    • Um preenchimento é adicionado para compensar as dimensões de pixel dos ícones de símbolo.

    Para obter mais informações sobre a propriedade setCamera do controle Map, consulte setCamera(CameraOptions | CameraBoundsOptions & AnimationOptions).

  3. Salve MapRoute.html e atualize o navegador. Agora o mapa está centralizado em Seattle. O alfinete azul em formato de lágrima marca o ponto inicial. O pino redondo azul marca o ponto de extremidade.

    A screenshot showing a map with a route containing a blue teardrop pin marking the start point at Microsoft in Redmond Washington and a blue round pin marking the end point at a gas station in Seattle.

Obter trajeto de rota

Esta seção mostra como usar a API de Direções de Rota do Azure Mapas para obter direções de rota e o tempo estimado de chegada de um ponto para outro.

Dica

Os serviços Roteiros do Azure Mapas fornecem APIs para planejar rotas com base em diferentes tipos de rota, como mais rápidas, mais curtas, econômicas ou emocionantes com base na distância, nas condições de tráfego e no meio de transporte usado. O serviço também permite que os usuários planejem rotas futuras com base nas condições históricas de tráfego. Os usuários podem ver a previsão de durações de rota para qualquer determinado horário. Para obter mais informações, confira API de Obtenção de trajeto de rota.

  1. Na função GetMap, dentro do manipulador de eventos ready do controle, 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 a URL, acrescente o código a seguir no fim do manipulador de eventos ready do controle.

    //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
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
    //Get data features from response
    var data = directions.geojson.getFeatures();
    datasource.add(data);
});

    Algumas coisas a saber sobre o JavaScript acima:

    • Esse código constrói a rota do ponto inicial ao final.
    • O routeURL solicita à API do serviço Roteiros do Azure Mapas que calcule os trajetos de rota.
    • Um conjunto de recursos GeoJSON da resposta é então extraído usando o método geojson.getFeatures() e adicionada à fonte de dados.

  3. Salve o arquivo MapRoute.html e atualize seu navegador da Web. O mapa agora deve exibir a rota dos pontos inicial ao final.

    A screenshot showing a map that demonstrates the Azure Map control and Route service.

  • Para ver o código completo usado neste tutorial, confira o tutorial de rota no GitHub.
  • Para exibir este exemplo ao vivo, confira Rotear para um destino no site de Exemplos de código do Azure Mapas.

Próximas etapas

O tutorial a seguir demonstra como criar uma consulta de rota com restrições como modo de viagem ou tipo de carga. Em seguida, é possível exibir várias rotas no mesmo mapa.

Localizar rotas para diferentes modos de viagem