Partilhar via

Tutorial: Migrar uma aplicação Web a partir do Google Maps

A maioria das aplicações Web, que utilizam o Google Maps, está a utilizar o SDK JavaScript do Google Maps V3. O SDK Web do Azure Maps é o SDK baseado em Azure mais adequado para migração. O SDK da Web do Azure Maps permite personalizar mapas interativos com seu próprio conteúdo e imagens. Você pode executar seu aplicativo em aplicativos Web ou móveis. Este controlo utiliza o WebGL, permitindo-lhe compor grandes conjuntos de dados com elevado desempenho. Desenvolva com este SDK usando JavaScript ou TypeScript. Este tutorial demonstra:

  • Carregar um mapa
  • Localizar um mapa
  • Adicione marcadores, polilinhas e polígonos.
  • Exibir informações em um pop-up ou janela de informações
  • Carregar e exibir dados KML e GeoJSON
  • Marcadores de aglomeração
  • Colocar por cima uma camada de azulejos
  • Mostrar dados de tráfego
  • Adicionar uma sobreposição de solo

Além disso:

  • Como realizar tarefas comuns de mapeamento usando o SDK da Web do Azure Maps.
  • Práticas recomendadas para melhorar o desempenho e a experiência do usuário.
  • Dicas sobre como usar recursos mais avançados disponíveis no Azure Maps.

Se estiver migrando um aplicativo Web existente, verifique se ele está usando uma biblioteca de controle de mapa de código aberto. Exemplos de biblioteca de controle de mapa de código aberto são: Cesium, Leaflet e OpenLayers. Você ainda pode migrar seu aplicativo, mesmo que ele use uma biblioteca de controle de mapa de código aberto e não queira usar o SDK da Web do Azure Maps. Nesse caso, conecte a sua aplicação aos serviços de Renderização do Azure Maps (tiles de estrada | tiles de satélite). Os pontos a seguir detalham como usar o Azure Maps em algumas bibliotecas de controle de mapa de código aberto comumente usadas.

Se desenvolver usando uma estrutura JavaScript, um dos seguintes projetos de código aberto pode ser útil:

Pré-requisitos

Se não tiver uma subscrição do Azure, crie uma conta gratuita antes de começar.

Nota

Para obter mais informações sobre autenticação no Azure Maps, consulte Gerenciar autenticação no Azure Maps.

Suporte para funcionalidades principais

A tabela lista os principais recursos da API no SDK JavaScript do Google Maps V3 e o recurso de API suportado no SDK da Web do Azure Maps.

Funcionalidade Google Maps Suporte do SDK da Web do Azure Maps
Marcadores ✓
Agrupamento de marcadores ✓
Polilinhas & Polígonos ✓
Camadas de dados ✓
Sobreposições de solo ✓
Mapas de calor ✓
Camadas de mosaico ✓
Camada KML ✓
Ferramentas de desenho ✓
Serviço de geocodificador ✓
Serviço de direções ✓
Serviço de Matriz de Distância ✓

Diferenças notáveis nos SDKs da Web

A seguir estão algumas diferenças importantes entre os SDKs da Web do Google Maps e do Azure Maps, para estar ciente:

  • Além de fornecer um endpoint alojado para o acesso ao SDK Web do Azure Maps, um pacote npm encontra-se disponível. Para obter mais informações sobre como incorporar o pacote SDK da Web em aplicativos, consulte Usar o controle de mapa do Azure Maps. Este pacote também inclui definições TypeScript.
  • Primeiro, você precisa criar uma instância da classe Map no Azure Maps. Aguarde que o evento dos mapas ready ou load seja acionado antes de interagir programaticamente com ele. Esta ordem garante que todos os recursos do mapa foram carregados e estão prontos para serem acessados.
  • Ambas as plataformas usam um sistema de mosaico semelhante para os mapas base. Os blocos no Google Maps têm 256 pixels de dimensão; no entanto, os blocos no Azure Maps têm 512 pixels de dimensão. Para obter a mesma vista de mapa no Azure Maps que o Google Maps, subtraia o nível de zoom do Google Maps pelo número um no Azure Maps.
  • As coordenadas no Google Maps são chamadas de latitude,longitude, enquanto o Azure Maps usa longitude,latitude. O formato do Azure Maps está alinhado com o padrão [x, y], que é seguido pela maioria das plataformas GIS.
  • As formas no SDK da Web do Azure Maps são baseadas no esquema GeoJSON. As classes auxiliares são expostas por meio do namespace atlas.data . Há também a classe atlas.Shape. Use essa classe para encapsular objetos GeoJSON, para facilitar a atualização e a manutenção dos dados de forma vinculável.
  • As coordenadas no Azure Maps são definidas como objetos Position. Uma coordenada é especificada como uma matriz numérica no formato [longitude,latitude]. Ou, é especificado usando o novo atlas.data.Position(longitude, latitude).

    Gorjeta

    A classe Position tem um método auxiliar estático para importar coordenadas que estão no formato "latitude, longitude". O método atlas.data.Position.fromLatLng muitas vezes pode ser substituído pelo método new google.maps.LatLng no código do Google Maps.

  • Em vez de especificar informações de estilo em cada forma adicionada ao mapa, o Azure Maps separa estilos dos dados. Os dados são armazenados em uma fonte de dados e são conectados a camadas de renderização. O código do Azure Maps usa fontes de dados para renderizar os dados. Esta abordagem proporciona benefícios de desempenho melhorados. Além disso, muitas camadas suportam estilo orientado por dados, onde a lógica de negócios pode ser adicionada às opções de estilo de camada. Esse suporte altera como formas individuais são renderizadas dentro de uma camada com base nas propriedades definidas na forma.

Exemplos lado a lado do Web SDK

Esta coleção tem exemplos de código para cada plataforma, e cada exemplo abrange um caso de uso comum. Destina-se a ajudá-lo a migrar a sua aplicação Web do SDK JavaScript do Google Maps V3 para o SDK Web do Azure Maps. Exemplos de código relacionados a aplicativos Web são fornecidos em JavaScript. No entanto, o Azure Maps também fornece definições de TypeScript como outra opção por meio de um módulo npm.

Tópicos

Carregar um mapa

Ambos os SDKs têm as mesmas etapas para carregar um mapa:

  • Adicione uma referência ao Map SDK.
  • Adicione uma div tag ao corpo da página, que atua como um espaço reservado para o mapa.
  • Crie uma função JavaScript que seja chamada quando a página for carregada.
  • Crie uma instância da respetiva classe map.

Algumas diferenças fundamentais

  • O Google Maps exige que uma chave de conta seja especificada na referência de script da API. As credenciais de autenticação para o Azure Maps são especificadas como opções da classe de mapa. Essa credencial pode ser uma chave de assinatura ou informações do Microsoft Entra.
  • O Google Maps aceita uma função de retorno de chamada na referência ao script da API, que é usada para chamar uma função de inicialização para que o mapa seja carregado. Com o Azure Maps, deve-se usar o evento onload da página.
  • Ao referir-se ao div elemento onde o mapa é renderizado, a classe Map no Azure Maps requer apenas o valor id, enquanto que o Google Maps requer um objeto HTMLElement.
  • As coordenadas no Azure Maps são definidas como objetos Position, que podem ser especificados como uma matriz numérica simples no formato [longitude, latitude].
  • O nível de zoom no Azure Maps é um nível inferior ao nível de zoom no Google Maps. Esta discrepância deve-se à diferença nos tamanhos do sistema de ladrilhos das duas plataformas.
  • O Azure Maps não adiciona nenhum controle de navegação à tela do mapa. Assim, por padrão, um mapa não tem botões de zoom e botões de estilo de mapa. Mas, há opções de controlo para adicionar um seletor de estilo de mapa, botões de zoom, controlo de bússola ou rotação, e um controlo de inclinação.
  • Um manipulador de eventos é adicionado no Azure Maps para monitorar o ready evento da instância do mapa. Esse evento é acionado quando o mapa termina de carregar o contexto WebGL e todos os recursos necessários. Adicione qualquer código que você deseja executar depois que o mapa concluir o carregamento a este manipulador de eventos.

Os exemplos a seguir usam o Google Maps para carregar um mapa centralizado sobre Nova York em coordenadas. A longitude: -73.985, latitude: 40.747, e o mapa está no nível de zoom de 12.

Antes: Google Maps

Exiba um mapa do Google centralizado e ampliado sobre um local.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(40.747, -73.985),
                zoom: 12
            });
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

A execução desse código em um navegador exibe um mapa semelhante à seguinte imagem:

Google Maps simples

Depois: Azure Maps

Carregue um mapa com a mesma vista no Azure Maps, juntamente com um controle de estilo de mapa e botões de zoom.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-73.985, 40.74],  //Format coordinates as longitude, latitude.
                zoom: 11,   //Subtract the zoom level by one.

                //Specify authentication information when loading the map.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Add zoom controls to bottom right of map.
                map.controls.add(new atlas.control.ZoomControl(), {
                    position: 'bottom-right'
                });

                //Add map style control in top left corner of map.
                map.controls.add(new atlas.control.StyleControl(), {
                    position: 'top-left'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

A execução desse código em um navegador exibe um mapa semelhante à seguinte imagem:

Mapas Simples do Azure

Para obter mais informações sobre como configurar e usar o controle de mapa do Azure Maps em um aplicativo Web, consulte Usar o controle de mapa do Azure Maps.

Nota

Ao contrário do Google Maps, o Azure Maps não requer um centro inicial e um nível de zoom para carregar o mapa. Se essas informações não forem fornecidas ao carregar o mapa, o Azure Maps tentará determinar a cidade do usuário. Irá centralizar e ampliar o mapa nessa localização.

Mais recursos:

  • Para obter mais informações sobre controles de navegação para girar e inclinar a visualização de mapa, consulte Adicionar controles a um mapa.

Localização do mapa

Se o seu público estiver espalhado por vários países/regiões ou falar idiomas diferentes, a localização é importante.

Antes: Google Maps

Para localizar o Google Maps, adicione parâmetros de idioma e região.

<script type="text/javascript" src=" https://maps.googleapis.com/maps/api/js?callback=initMap&key={api-Key}&language={language-code}&region={region-code}" async defer></script>

Aqui está um exemplo do Google Maps com o idioma definido como "fr-FR".

Localização do Google Maps

Depois: Azure Maps

O Azure Maps fornece duas maneiras diferentes de definir o idioma e a exibição regional do mapa. A primeira opção é adicionar essas informações ao namespace do atlas global. Isso faz com que todas as instâncias de controle de mapa em seu aplicativo sejam padronizadas para essas configurações. O seguinte define o idioma para francês ("fr-FR") e a visualização regional em "Auto":

atlas.setLanguage('fr-FR');
atlas.setView('auto');

A segunda opção é passar essas informações para as opções do mapa ao carregar o mapa. Assim:

map = new atlas.Map('myMap', {
    language: 'fr-FR',
    view: 'auto',

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

Nota

Com o Azure Maps, é possível carregar várias instâncias de mapa na mesma página com diferentes configurações de idioma e região. Também é possível atualizar essas configurações no mapa depois que ele for carregado.

Para obter mais informações sobre idiomas suportados, consulte Suporte de localização no Azure Maps.

Aqui está um exemplo de Mapas do Azure com o idioma definido como "fr" e a região do usuário definida como "fr-FR".

Uma captura de tela mostrando uma versão localizada de um mapa do Azure Maps com o idioma definido como francês.

Definindo a visualização do mapa

Os mapas dinâmicos no Azure e no Google Maps podem ser movidos programaticamente para novas localizações geográficas. Para fazer isso, chame as funções apropriadas em JavaScript. Os exemplos mostram como fazer com que o mapa exiba imagens aéreas de satélite, centralize o mapa em um local e altere o nível de zoom para 15 no Google Maps. São utilizadas as seguintes coordenadas de localização: longitude: -111,0225 e latitude: 35,0272.

Nota

O Google Maps usa blocos com 256 pixels de dimensões, enquanto o Azure Maps usa um bloco maior de 512 pixels. Assim, o Azure Maps requer menos número de solicitações de rede para carregar a mesma área de mapa que o Google Maps. Devido à forma como as pirâmides de mosaico funcionam nos controlos de mapa, tem de subtrair o nível de zoom utilizado no Google Maps pelo número um quando utiliza o Azure Maps. Essa operação aritmética garante que blocos maiores no Azure Maps renderizem a mesma área de mapa que no Google Maps,

Antes: Google Maps

Mova o controle de mapa do Google Maps usando o setOptions método. Este método permite especificar o centro do mapa e um nível de zoom.

map.setOptions({
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    center: new google.maps.LatLng(35.0272, -111.0225),
    zoom: 15
});

Visualização definida do Google Maps

Depois: Azure Maps

No Azure Maps, altere a posição do mapa usando o setCamera método e altere o estilo do mapa usando o setStyle método. As coordenadas no Azure Maps estão no formato "longitude, latitude" e o valor do nível de zoom é subtraído por um.

map.setCamera({
    center: [-111.0225, 35.0272],
    zoom: 14
});

map.setStyle({
    style: 'satellite'
});

Uma captura de ecrã de um mapa do Azure Maps com a propriedade de estilo definida como satélite.

Mais recursos:

Adicionar um marcador

No Azure Maps, há várias maneiras pelas quais os dados de ponto podem ser renderizados no mapa:

  • Marcadores HTML – Renderiza pontos usando elementos DOM tradicionais. Os marcadores HTML suportam o arrastamento.
  • Camada de símbolos – Renderiza pontos com um ícone ou texto dentro do contexto WebGL.
  • Camada de bolhas – Renderiza pontos como círculos no mapa. Os raios dos círculos podem ser dimensionados com base nas propriedades dos dados.

Renderize camadas de símbolo e camadas de bolha dentro do contexto WebGL. Ambas as camadas podem renderizar grandes conjuntos de pontos no mapa. Essas camadas exigem que os dados sejam armazenados em uma fonte de dados. As fontes de dados e as camadas de renderização devem ser adicionadas ao mapa após o ready evento ser acionado. Os marcadores HTML são renderizados como elementos DOM dentro da página e não usam uma fonte de dados. Quanto mais elementos DOM uma página tiver, mais lenta ela se torna. Se estiver a renderizar mais de algumas centenas de pontos em um mapa, é recomendável usar uma das camadas de renderização.

Vamos adicionar um marcador ao mapa com o número 10 sobreposto como um rótulo. Utilize a longitude de -0,2 e uma latitude de 51,5.

Antes: Google Maps

Com o Google Maps, adicione marcadores ao mapa usando a google.maps.Marker classe e especifique o mapa como uma das opções.

//Create a marker and add it to the map.
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.5, -0.2),
    label: '10',
    map: map
});

Marcador do Google Maps

Após: Azure Maps com marcadores HTML

No Azure Maps, use marcadores HTML para exibir um ponto no mapa. Os marcadores HTML são recomendados para aplicativos que só precisam exibir alguns pontos no mapa. Para usar um marcador HTML, crie uma instância da atlas.HtmlMarker classe. Defina as opções de texto e posição e adicione o marcador ao mapa usando o map.markers.add método.

//Create a HTML marker and add it to the map.
map.markers.add(new atlas.HtmlMarker({
    text: '10',
    position: [-0.2, 51.5]
}));

Uma captura de ecrã de um mapa do Azure Maps com um marcador html.

Depois: Azure Maps usando uma camada de símbolos

Para uma camada Symbol, adicione os dados a uma fonte de dados. Anexe a fonte de dados à camada. Além disso, a fonte de dados e a camada devem ser adicionadas ao mapa após o ready evento ter sido acionado. Para renderizar um valor de texto exclusivo acima de um símbolo, as informações de texto precisam ser armazenadas como uma propriedade do ponto de dados. A propriedade deve ser referenciada na opção textField na camada. Essa abordagem é um pouco mais trabalhosa do que usar marcadores HTML, mas é um desempenho melhor.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

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

                //Create a point feature, add a property to store a label for it, and add it to the data source.
                datasource.add(new atlas.data.Feature(new atlas.data.Point([-0.2, 51.5]), {
                    label: '10'
                }));

                //Add a layer for rendering point data as symbols.
                map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                    textOptions: {
                        //Use the label property to populate the text for the symbols.
                        textField: ['get', 'label'],
                        color: 'white',
                        offset: [0, -1]
                    }
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Uma captura de ecrã de um mapa do Azure Maps com alfinete azul apresentado.

Mais recursos:

Adicionar um marcador personalizado

Você pode usar imagens personalizadas para representar pontos em um mapa. O mapa a seguir usa uma imagem personalizada para exibir um ponto no mapa. O ponto é exibido na latitude: 51,5 e longitude: -0,2. A âncora desloca a posição do marcador, de modo que a ponta do ícone de alfinete se alinhe com a posição correta no mapa.

imagem de tacha amarela
alfinete-amarelo.png

Antes: Google Maps

Crie um marcador personalizado especificando um Icon objeto que contenha o url para a imagem. Especifique um anchor ponto para alinhar o ponto da imagem de alfinete com a coordenada no mapa. O valor da âncora no Google Maps é relativo ao canto superior esquerdo da imagem.

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.5, -0.2),
    icon: {
        url: 'https://samples.azuremaps.com/images/icons/ylw-pushpin.png',
        anchor: new google.maps.Point(5, 30)
    },
    map: map
});

Marcador personalizado do Google Maps

Após: Azure Maps com marcadores HTML

Para personalizar um marcador HTML, passe um HTML string ou HTMLElement para a htmlContent opção do marcador. Use a anchor opção para especificar a posição relativa do marcador, em relação à coordenada da posição. Atribua um dos nove pontos de referência definidos à anchor opção. Esses pontos definidos são: "centro", "topo", "baixo", "esquerda", "direita", "topo-esquerda", "topo-direita", "baixo-esquerda", "baixo-direita". O conteúdo é ancorado no centro inferior do conteúdo html por padrão. Para facilitar a migração de código do Google Maps, defina anchor como "canto superior esquerdo", e, em seguida, use a opção pixelOffset com o mesmo deslocamento usado no Google Maps. Os deslocamentos no Azure Maps movem-se na direção contrária aos deslocamentos no Google Maps. Assim, multiplique as compensações por menos um.

Gorjeta

Adicione pointer-events:none como um estilo no conteúdo html para desativar o comportamento de arrastar padrão no Microsoft Edge, que exibirá um ícone indesejado.

map.markers.add(new atlas.HtmlMarker({
    htmlContent: '<img src="https://samples.azuremaps.com/images/icons/ylw-pushpin.png" style="pointer-events: none;" />',
    anchor: 'top-left',
    pixelOffset: [-5, -30],
    position: [-0.2, 51.5]
}));

Uma captura de ecrã de um mapa do Azure Maps com um alfinete amarelo apresentado.

Depois: Azure Maps usando uma camada de símbolos

As camadas de símbolos no Azure Maps também suportam imagens personalizadas. Primeiro, carregue a imagem nos recursos do mapa e atribua-a com um ID exclusivo. Faça referência à imagem na camada de símbolos. Use a offset opção para alinhar a imagem ao ponto correto no mapa. Use a anchor opção para especificar a posição relativa do símbolo, em relação às coordenadas da posição. Utilize um dos nove pontos de referência definidos. Esses pontos são: "centro", "topo", "baixo", "esquerda", "direita", "topo-esquerda", "topo-direita", "baixo-esquerda", "baixo-direita". O conteúdo é ancorado no centro inferior do conteúdo html por padrão. Para facilitar a migração de código do Google Maps, defina anchor como "canto superior esquerdo", e, em seguida, use a opção offset com o mesmo deslocamento usado no Google Maps. Os deslocamentos no Azure Maps movem-se na direção contrária aos deslocamentos no Google Maps. Assim, multiplique as compensações por menos um.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Load the custom image icon into the map resources.
                map.imageSprite.add('my-yellow-pin', 'https://samples.azuremaps.com/images/icons/ylw-pushpin.png').then(function () {

                    //Create a data source and add it to the map.
                    datasource = new atlas.source.DataSource();
                    map.sources.add(datasource);

                    //Create a point and add it to the data source.
                    datasource.add(new atlas.data.Point([-0.2, 51.5]));

                    //Add a layer for rendering point data as symbols.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Set the image option to the id of the custom icon that was loaded into the map resources.
                            image: 'my-yellow-pin',
                            anchor: 'top-left',
                            offset: [-5, -30]
                        }
                    }));
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Uma captura de ecrã de um mapa do Azure Maps, com um alfinete amarelo apresentado no mapa em Londres.

Gorjeta

Para renderizar pontos personalizados avançados, use várias camadas de renderização juntas. Por exemplo, digamos que você queira ter vários pinos com o mesmo ícone em círculos coloridos diferentes. Em vez de criar um monte de imagens para cada sobreposição de cor, adicione uma camada de símbolo sobre uma camada de bolhas. Faça com que os pinos façam referência à mesma fonte de dados. Esta abordagem será mais eficiente do que criar e manter um monte de imagens diferentes.

Mais recursos:

Adicionando uma polilinha

Use polilinhas para representar uma linha ou caminho no mapa. Vamos criar uma polilinha tracejada no mapa.

Antes: Google Maps

A classe Polyline aceita um conjunto de opções. Passe uma matriz de coordenadas na path opção da polilinha.

//Get the center of the map.
var center = map.getCenter();

//Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
};

//Create the polyline.
var line = new google.maps.Polyline({
    path: [
        center,
        new google.maps.LatLng(center.lat() - 0.5, center.lng() - 1),
        new google.maps.LatLng(center.lat() - 0.5, center.lng() + 1)
    ],
    strokeColor: 'red',
    strokeOpacity: 0,
    strokeWeight: 4,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '20px'
    }]
});

//Add the polyline to the map.
line.setMap(map);

Polilinha do Google Maps

Depois: Azure Maps

Polilinhas são chamadas objetos LineString ou MultiLineString. Esses objetos podem ser adicionados a uma fonte de dados e renderizados usando uma camada de linha. Adicione LineString a uma fonte de dados e, em seguida, adicione a fonte de dados a a LineLayer para renderizá-la.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a line and add it to the data source.
datasource.add(new atlas.data.LineString([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5]
]));

//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 4,
    strokeDashArray: [3, 3]
}));

Uma captura de tela de um mapa do Azure Maps com um traço vermelho mostrado para demonstrar uma polilinha.

Mais recursos:

Adicionando um polígono

O Azure Maps e o Google Maps fornecem suporte semelhante para polígonos. Polígonos são usados para representar uma área no mapa. Os exemplos a seguir mostram como criar um polígono que forma um triângulo com base na coordenada central do mapa.

Antes: Google Maps

A classe Polygon aceita um conjunto de opções. Passe uma matriz de coordenadas para a paths opção do polígono.

//Get the center of the map.
var center = map.getCenter();

//Create a polygon.
var polygon = new google.maps.Polygon({
    paths: [
        center,
        new google.maps.LatLng(center.lat() - 0.5, center.lng() - 1),
        new google.maps.LatLng(center.lat() - 0.5, center.lng() + 1),
        center
    ],
    strokeColor: 'red',
    strokeWeight: 2,
    fillColor: 'rgba(0, 255, 0, 0.5)'
});

//Add the polygon to the map
polygon.setMap(map);

Polígono do Google Maps

Depois: Azure Maps

Adicione um Polygon ou um MultiPolygon objeto a uma fonte de dados. Renderize o objeto no mapa usando camadas. Renderize a área de um polígono usando uma camada de polígono. E renderize o contorno de um polígono usando uma camada de linha.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a polygon and add it to the data source.
datasource.add(new atlas.data.Polygon([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5],
    center
]));

//Add a polygon layer for rendering the polygon area.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
    fillColor: 'rgba(0, 255, 0, 0.5)'
}));

//Add a line layer for rendering the polygon outline.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 2
}));

Uma captura de tela de um mapa do Azure Maps com uma linha vermelha sólida formando um triângulo preenchido com verde semitransparente mostrado para demonstrar um polígono.

Mais recursos:

Exibir uma janela de informações

Informações adicionais para uma entidade podem ser exibidas no mapa como uma google.maps.InfoWindow classe no Google Maps. No Azure Maps, essa funcionalidade pode ser obtida usando a atlas.Popup classe. Os próximos exemplos adicionam um marcador ao mapa. Quando o marcador é clicado, uma janela de informações ou um pop-up é exibido.

Antes: Google Maps

Instancie uma janela de informações usando o google.maps.InfoWindow construtor.

<!-- Google Maps Script Reference -->
<script async src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&loading=async"></script>

<script type='text/javascript'>

    async function initMap() {
        // Request needed libraries.
        const { Map, InfoWindow } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker",);

        const map = new Map(document.getElementById("myMap"), {
            zoom: 12,
            center: { lat: 47.608458, lng: -122.335077 },
            disableDefaultUI: true,
            mapId: "4504f8b37365c3d0",
        });

        // Create an info window to share between markers.
        const infoWindow = new InfoWindow();

        // Create the marker.
        const pin = new PinElement();
        const marker = new AdvancedMarkerElement({
            position: { lat: 47.608458, lng: -122.335077 },
            map,
            title: "<B>Hello World!</B>",
            content: pin.element,
            gmpClickable: true,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener("click", ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    }
</script>

Pop-up do Google Maps

Depois: Azure Maps

Vamos usar pop-up para exibir informações adicionais sobre o local. Passe um objeto HTML string ou HTMLElement na opção content do pop-up. Se desejar, os pop-ups podem ser exibidos independentemente de qualquer forma. Assim, os Popups requerem um position valor a ser especificado. Especifique o valor position. Para exibir um pop-up, chame o método open e passe map onde o pop-up deve ser exibido.

//Add a marker to the map in which to display a popup for.
var marker = new atlas.HtmlMarker({
    position: [-122.33, 47.6]
});

//Add the marker to the map.
map.markers.add(marker);

//Create a popup.
var popup = new atlas.Popup({
    content: '<div style="padding:5px"><b>Hello World!</b></div>',
    position: [-122.33, 47.6],
    pixelOffset: [0, -35]
});

//Add a click event to the marker to open the popup.
map.events.add('click', marker, function () {
    //Open the popup
    popup.open(map);
});

Uma captura de tela de um mapa do Azure Maps com um pino azul com um pop-up mostrando hello world nele.

Nota

Você pode fazer a mesma coisa com uma camada de símbolo, bolha, linha ou polígono, passando a camada escolhida para o código de evento do mapa em vez de um marcador.

Mais recursos:

Importar um arquivo GeoJSON

O Google Maps suporta o carregamento e o estilo dinâmico de dados GeoJSON através da google.maps.Data classe. A funcionalidade dessa classe se alinha mais com o estilo controlado por dados do Azure Maps. Mas há uma diferença fundamental. Com o Google Maps, você especifica uma função de retorno de chamada. A lógica de negócios para estilizar cada funcionalidade é processada individualmente na thread da interface do utilizador. Mas no Azure Maps, as camadas suportam a especificação de expressões controladas por dados como opções de estilo. Essas expressões são processadas em tempo de renderização em um thread separado. A abordagem do Azure Maps melhora o desempenho de renderização. Essa vantagem é notada quando conjuntos de dados maiores precisam ser renderizados rapidamente.

Os exemplos a seguir carregam um feed GeoJSON de todos os terremotos nos últimos sete dias do USGS. Os dados de terremotos são renderizados como círculos dimensionados no mapa. A cor e a escala de cada círculo são baseadas na magnitude de cada terremoto, que é armazenada na "mag" propriedade de cada característica no conjunto de dados. Se a magnitude for maior ou igual a cinco, o círculo é vermelho. Se for maior ou igual a três, mas inferior a cinco, o círculo é laranja. Se for inferior a três, o círculo é verde. O raio de cada círculo é o exponencial da magnitude multiplicada por 0,1.

Antes: Google Maps

Especifique uma única função de retorno no método map.data.setStyle. Dentro da função de retorno de chamada, aplique a lógica de negócios a cada recurso. Carregue o feed GeoJSON com o método map.data.loadGeoJson.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2
            });

            //Define a callback to style each feature.
            map.data.setStyle(function (feature) {

                //Extract the 'mag' property from the feature.
                var mag = parseFloat(feature.getProperty('mag'));

                //Set the color value to 'green' by default.
                var color = 'green';

                //If the mag value is greater than 5, set the color to 'red'.
                if (mag >= 5) {
                    color = 'red';
                }
                //If the mag value is greater than 3, set the color to 'orange'.
                else if (mag >= 3) {
                    color = 'orange';
                }

                return /** @type {google.maps.Data.StyleOptions} */({
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,

                        //Scale the radius based on an exponential of the 'mag' value.
                        scale: Math.exp(mag) * 0.1,
                        fillColor: color,
                        fillOpacity: 0.75,
                        strokeWeight: 2,
                        strokeColor: 'white'
                    }
                });
            });

            //Load the data feed.
            map.data.loadGeoJson(earthquakeFeed);
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Google Maps GeoJSON

Depois: Azure Maps

GeoJSON é o tipo de dados base no Azure Maps. Importe-o para uma fonte de dados usando o datasource.importFromUrl método. Use uma camada de bolhas. A camada de bolhas fornece funcionalidade para renderizar círculos dimensionados, com base nas propriedades dos recursos em uma fonte de dados. Em vez de se ter uma função de retorno de chamada, a lógica de negócios é convertida em uma expressão e incorporada às opções de estilo. As expressões definem como a lógica de negócios funciona. As expressões podem ser passadas para outro thread e avaliadas em relação aos dados do recurso. Várias fontes de dados e camadas podem ser adicionadas ao Azure Maps, cada uma com lógica de negócios diferente. Esse recurso permite que vários conjuntos de dados sejam renderizados no mapa de maneiras diferentes.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

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

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

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as scaled circles.
                map.layers.add(new atlas.layer.BubbleLayer(datasource, null, {
                    //Make the circles semi-transparent.
                    opacity: 0.75,

                    color: [
                        'case',

                        //If the mag value is greater than 5, return 'red'.
                        ['>=', ['get', 'mag'], 5],
                        'red',

                        //If the mag value is greater than 3, return 'orange'.
                        ['>=', ['get', 'mag'], 3],
                        'orange',

                        //Return 'green' as a fallback.
                        'green'
                    ],

                    //Scale the radius based on an exponential of the 'mag' value.
                    radius: ['*', ['^', ['e'], ['get', 'mag']], 0.1]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Uma captura de tela de um mapa do mundo do Azure Maps com círculos vermelhos e laranjas de vários tamanhos criados usando a camada de bolhas.

Mais recursos:

Agrupamento de marcadores

Quando muitos pontos de dados aparecem no mapa, os pontos podem se sobrepor, fazendo com que o mapa pareça confuso e difícil de ler e usar. Clustering point data é o processo de combinar pontos de dados que estão próximos uns dos outros e representá-los no mapa como um único ponto de dados clusterizado. À medida que o usuário amplia o mapa, os clusters se dividem em seus pontos de dados individuais. O agrupamento de pontos de dados melhora a experiência do usuário e o desempenho do mapa.

Nos exemplos a seguir, o código carrega um feed GeoJSON de dados de terremotos da semana passada e o adiciona ao mapa. Os clusters são renderizados como círculos dimensionados e coloridos. A escala e a cor dos círculos dependem do número de pontos que contêm.

Nota

O Google Maps e o Azure Maps usam algoritmos de cluster ligeiramente diferentes. Como tal, às vezes a distribuição de pontos nos clusters varia.

Antes: Google Maps

Use a biblioteca MarkerCluster para agrupar marcadores. Os ícones de cluster são limitados a imagens, que têm os números de um a cinco como nome. Eles estão hospedados no mesmo diretório.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        async function initMap() {
            const AdvancedMarkerElement = await google.maps.importLibrary("marker");
            const map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2,
                mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
            });

            //Download the GeoJSON data.
            fetch(earthquakeFeed)
                .then(function (response) {
                    return response.json();
                }).then(function (data) {

                    //Loop through the GeoJSON data and create a marker for each data point.
                    var markers = [];
                    for (var i = 0; i < data.features.length; i++) {
                        markers.push(new google.maps.marker.AdvancedMarkerElement({
                            position: new google.maps.LatLng(data.features[i].geometry.coordinates[1], data.features[i].geometry.coordinates[0])
                        }));
                    }

                    //Create a marker clusterer instance and tell it where to find the cluster icons.
                    var markerCluster = new markerClusterer.MarkerClusterer({map, markers});
                });
        }
    </script>

    <!-- Load the marker cluster library. -->
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&loading=async"></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Agrupamento de Google Maps

Depois: Azure Maps

Adicione e gerencie dados em uma fonte de dados. Conecte fontes de dados e camadas e, em seguida, renderize os dados. A DataSource classe no Azure Maps fornece várias opções de clustering.

  • cluster – Indica à fonte de dados que agrupe dados pontuais.
  • clusterRadius - O raio em pixels para agrupar pontos juntos.
  • clusterMaxZoom - O nível máximo de zoom em que o agrupamento ocorre. Se você aumentar o zoom acima desse nível, todos os pontos serão renderizados como símbolos.
  • clusterProperties - Define propriedades personalizadas que são calculadas através de expressões aplicadas a todos os pontos de cada agrupamento e adicionadas às propriedades de cada ponto dentro do agrupamento.

Quando o clustering está habilitado, a fonte de dados envia pontos de dados clusterizados e não clusterizados para camadas para renderização. A fonte de dados é capaz de agrupar centenas de milhares de pontos de dados. Um ponto de dados clusterizado tem as seguintes propriedades:

Nome da propriedade Tipo Descrição
cluster Booleano Indica se o recurso representa um cluster.
cluster_id "string" Uma ID exclusiva para o cluster que pode ser usada com os métodos DataSource getClusterExpansionZoom, getClusterChildrene getClusterLeaves .
point_count Número O número de pontos que o cluster contém.
point_count_abbreviated "string" Uma cadeia de caracteres que abrevia o point_count valor se ele for longo. (por exemplo, 4.000 torna-se 4K)

A DataSource classe tem a seguinte função auxiliar para acessar informações adicionais sobre um cluster usando o cluster_id.

Método Tipo de retorno Descrição
getClusterChildren(clusterId: number) Promise<Array<Feature<Geometria, qualquer> | Formato>> Obtém os filhos do cluster dado no próximo nível de zoom. Estas crianças podem ser uma combinação de formas e subagrupamentos. Os subclusters são recursos com propriedades correspondentes a ClusteredProperties.
getClusterExpansionZoom(clusterId: number) Promessa<número> Calcula um nível de zoom no qual o cluster começa a se expandir ou se separar.
getClusterLeaves(clusterId: number, limit: number, offset: number) Promise<Array<Feature<Geometria, qualquer> | Formato>> Recupera todos os pontos em um cluster. Defina o limit para retornar um subconjunto dos pontos e utilize o offset para percorrer os pontos.

Ao renderizar dados agrupados no mapa, geralmente é melhor usar duas ou mais camadas. O exemplo a seguir usa três camadas. Uma camada de bolhas para desenhar círculos coloridos dimensionados com base no tamanho dos clusters. Uma camada de símbolo para renderizar o tamanho do cluster como texto. E usa uma segunda camada de símbolos para renderizar os pontos não agrupados. Para obter mais informações sobre outras maneiras de renderizar dados clusterizados, consulte Clustering point data in the Web SDK.

Importe diretamente dados GeoJSON usando a função importDataFromUrl na classe do mapa do Azure Maps.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map, datasource;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

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

            //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(null, {
                    //Tell the data source to cluster point data.
                    cluster: true
                });
                map.sources.add(datasource);

                //Create layers for rendering clusters, their counts and unclustered points and add the layers to the map.
                map.layers.add([
                    //Create a bubble layer for rendering clustered data points.
                    new atlas.layer.BubbleLayer(datasource, null, {
                        //Scale the size of the clustered bubble based on the number of points in the cluster.
                        radius: [
                            'step',
                            ['get', 'point_count'],
                            20,         //Default of 20 pixel radius.
                            100, 30,    //If point_count >= 100, radius is 30 pixels.
                            750, 40     //If point_count >= 750, radius is 40 pixels.
                        ],

                        //Change the color of the cluster based on the value on the point_cluster property of the cluster.
                        color: [
                            'step',
                            ['get', 'point_count'],
                            'lime',            //Default to lime green. 
                            100, 'yellow',     //If the point_count >= 100, color is yellow.
                            750, 'red'         //If the point_count >= 750, color is red.
                        ],
                        strokeWidth: 0,
                        filter: ['has', 'point_count'] //Only rendered data points which have a point_count property, which clusters do.
                    }),

                    //Create a symbol layer to render the count of locations in a cluster.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            image: 'none' //Hide the icon image.
                        },
                        textOptions: {
                            textField: ['get', 'point_count_abbreviated'],
                            offset: [0, 0.4]
                        }
                    }),

                    //Create a layer to render the individual locations.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
                    })
                ]);

                //Retrieve a GeoJSON data set and add it to the data source. 
                datasource.importDataFromUrl(earthquakeFeed);
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Uma captura de ecrã de um mapa do mundo do Azure Maps com círculos vermelhos, verdes e amarelos de vários tamanhos com números. Criado usando três camadas, uma camada de bolha para desenhar círculos coloridos dimensionados com base no tamanho dos clusters. Uma camada de símbolo para renderizar o tamanho do cluster como texto e uma segunda camada de símbolo para renderizar os pontos não agrupados.

Mais recursos:

Adicionar um mapa de calor

Os mapas de calor, também conhecidos como mapas de densidade de pontos, são um tipo de visualização de dados. Eles são usados para representar a densidade de dados usando uma variedade de cores. E eles são frequentemente usados para mostrar os "pontos quentes" de dados em um mapa. Os mapas de calor são uma ótima maneira de renderizar grandes conjuntos de dados de pontos.

Os exemplos a seguir carregam um feed GeoJSON de todos os terremotos no mês passado, do USGS, e os renderizam como um mapa de calor ponderado. A "mag" propriedade é usada como o peso.

Antes: Google Maps

Para criar um mapa de calor, carregue a biblioteca de "visualização" adicionando &libraries=visualization ao URL do script da API. A camada de mapa de calor no Google Maps não suporta dados GeoJSON diretamente. Primeiro, baixe os dados e converta-os em uma matriz de pontos de dados ponderados:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {

            var map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2,
                mapTypeId: 'satellite'
            });

            //Download the GeoJSON data.
            fetch(url).then(function (response) {
                return response.json();
            }).then(function (res) {
                var points = getDataPoints(res);

                var heatmap = new google.maps.visualization.HeatmapLayer({
                    data: points
                });
                heatmap.setMap(map);
            });
        }

        function getDataPoints(geojson, weightProp) {
            var points = [];

            for (var i = 0; i < geojson.features.length; i++) {
                var f = geojson.features[i];

                if (f.geometry.type === 'Point') {
                    points.push({
                        location: new google.maps.LatLng(f.geometry.coordinates[1], f.geometry.coordinates[0]),
                        weight: f.properties[weightProp]
                    });
                }
            }

            return points;
        } 
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&libraries=visualization" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Mapa de calor do Google Maps

Depois: Azure Maps

Carregue os dados GeoJSON em uma fonte de dados e conecte a fonte de dados a uma camada de mapa de calor. A propriedade usada para o peso pode ser passada para a weight opção usando uma expressão. Importe diretamente dados GeoJSON para o Azure Maps usando a importDataFromUrl função na DataSource classe.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,
                style: 'satellite',

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

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

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as a heat map.
                map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
                    weight: ['get', 'mag'],
                    intensity: 0.005,
                    opacity: 0.65,
                    radius: 10
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Uma captura de ecrã de um mapa do mundo do Azure Maps com uma camada de mapa de calor.

Mais recursos:

Colocar por cima uma camada de azulejos

As camadas de mosaico no Azure Maps são conhecidas como sobreposições de imagem no Google Maps. As camadas de mosaico permitem sobrepor imagens grandes que foram divididas em imagens em mosaico mais pequenas, que se alinham com o sistema de mosaico dos mapas. Essa abordagem é comumente usada para sobrepor imagens grandes ou grandes conjuntos de dados.

Os exemplos a seguir sobrepõem uma camada de telha de radar meteorológico da Iowa Environmental Mesonet da Iowa State University.

Antes: Google Maps

No Google Maps, as camadas de mosaico podem ser criadas utilizando a google.maps.ImageMapType classe.

map.overlayMapTypes.insertAt(0, new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
        return "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + coord.x + "/" + coord.y;
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.8
}));

Camada de mosaico do Google Maps

Depois: Azure Maps

Adicione uma camada de mosaico ao mapa da mesma forma que qualquer outra camada. Use um URL formatado que tenha espaços reservados em x, y, zoom; {x}, {y}, {z} para indicar à camada onde acessar os blocos. As camadas de mosaico do Azure Maps também suportam {quadkey}, {bbox-epsg-3857}e {subdomain} espaços reservados.

Gorjeta

No Azure Maps, as camadas podem ser facilmente renderizadas abaixo de outras camadas, incluindo camadas de mapa base. Muitas vezes, é desejável renderizar camadas de mosaico abaixo dos rótulos do mapa para que sejam fáceis de ler. O método map.layers.add aceita um segundo parâmetro que é o ID da camada onde inserir a nova camada abaixo. Para inserir uma camada de mosaico por baixo das etiquetas do mapa, utilize este código: map.layers.add(myTileLayer, "labels");

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256
}), 'labels');

Uma captura de ecrã de um mapa do mundo do Azure Maps com uma camada de mosaico.

Gorjeta

As solicitações de teselas podem ser capturadas usando a opção transformRequest do mapa. Isso permitirá que você modifique ou adicione cabeçalhos à solicitação, se desejar.

Mais recursos:

Mostrar dados de tráfego

Os dados de tráfego podem ser sobrepostos ao Azure e ao Google Maps.

Antes: Google Maps

Sobreponha os dados de tráfego no mapa usando a camada de tráfego.

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

Tráfego do Google Maps

Depois: Azure Maps

O Azure Maps fornece várias opções diferentes para exibir o tráfego. Exiba incidentes de trânsito, como fechamentos de estradas e acidentes, como ícones no mapa. Sobreponha o fluxo de tráfego e as estradas codificadas por cores no mapa. As cores podem ser modificadas com base no limite de velocidade publicado, em relação ao atraso normal esperado, ou atraso absoluto. Os dados de incidentes no Azure Maps são atualizados a cada minuto e os dados de fluxo são atualizados a cada dois minutos.

Atribua os valores desejados às opções setTraffic.

map.setTraffic({
    incidents: true,
    flow: 'relative'
});

Uma captura de tela de um mapa do Azure Maps mostrando o tráfego.

Se você selecionar um dos ícones de tráfego no Azure Maps, mais informações serão exibidas em um pop-up.

Uma captura de tela de um mapa do Azure Maps mostrando o tráfego com um pop-up mostrando os detalhes de um incidente de trânsito específico.

Mais recursos:

Adicionar uma sobreposição de solo

O Azure e o Google Maps suportam a sobreposição de imagens georreferenciadas no mapa. As imagens georreferenciadas são movidas e dimensionadas à medida que você desloca e amplia o mapa. No Google Maps, as imagens georreferenciadas são conhecidas como sobreposições de solo, enquanto no Azure Maps são chamadas de camadas de imagem. Eles são ideais para construir plantas baixas, sobrepor mapas antigos ou imagens de um drone.

Antes: Google Maps

Especifique o URL para a imagem que você deseja sobrepor e uma caixa delimitadora para vincular a imagem no mapa. Este exemplo sobrepõe uma imagem de mapa de Newark, Nova Jersey, de 1922 no mapa.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map, historicalOverlay;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(40.740, -74.18),
                zoom: 12
            });

            var imageBounds = {
                north: 40.773941,
                south: 40.712216,
                east: -74.12544,
                west: -74.22655
            };

            historicalOverlay = new google.maps.GroundOverlay(
                'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
                imageBounds);
            historicalOverlay.setMap(map);
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

A execução desse código em um navegador exibe um mapa semelhante à seguinte imagem:

Sobreposição de imagens do Google Maps

Depois: Azure Maps

Use a atlas.layer.ImageLayer classe para sobrepor imagens georreferenciadas. Esta classe requer um URL para uma imagem e um conjunto de coordenadas para os quatro cantos da imagem. A imagem deve estar hospedada no mesmo domínio ou ter CORs habilitados.

Gorjeta

Se você tiver apenas informações de norte, sul, leste, oeste e rotação, e não tiver coordenadas para cada canto da imagem, poderá usar o método estático atlas.layer.ImageLayer.getCoordinatesFromEdges .

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 type='text/javascript'>
        var map;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-74.18, 40.740],
                zoom: 12,

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

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an image layer and add it to the map.
                map.layers.add(new atlas.layer.ImageLayer({
                    url: 'newark_nj_1922.jpg',
                    coordinates: [
                        [-74.22655, 40.773941], //Top Left Corner
                        [-74.12544, 40.773941], //Top Right Corner
                        [-74.12544, 40.712216], //Bottom Right Corner
                        [-74.22655, 40.712216]  //Bottom Left Corner
                    ]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Uma captura de tela de um mapa do Azure Maps mostrando uma imagem sobreposta sobre o mapa.

Mais recursos:

Adicionar dados KML ao mapa

O Azure e o Google Maps podem importar e renderizar dados KML, KMZ e GeoRSS no mapa. O Azure Maps também suporta GPX, GML, ficheiros CSV espaciais, GeoJSON, Texto Bem Conhecido (WKT), Serviços de Cartografia Web (WMS), Serviços de Mosaico de Cartografia Web (WMTS) e Serviços de Funcionalidades de Cartografia Web (WFS). O Azure Maps lê os arquivos localmente na memória e, na maioria dos casos, pode lidar com arquivos KML maiores.

Antes: Google Maps

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map, historicalOverlay;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(0, 0),
                zoom: 1
            });

             var layer = new google.maps.KmlLayer({
              url: 'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml',
              map: map
            });
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

A execução desse código em um navegador exibe um mapa semelhante à seguinte imagem:

Google Maps KML

Depois: Azure Maps

No Azure Maps, GeoJSON é o principal formato de dados usado no SDK da Web, mais formatos de dados espaciais podem ser facilmente integrados usando o módulo de E/S espacial. Este módulo tem funções para leitura e gravação de dados espaciais e também inclui uma camada de dados simples que pode facilmente renderizar dados de qualquer um desses formatos de dados espaciais. Para ler os dados de um ficheiro de dados espaciais, passe uma URL ou dados brutos como string ou blob na função atlas.io.read. Isso retorna todos os dados analisados do arquivo que podem ser adicionados ao mapa. KML é um pouco mais complexo do que a maioria dos formatos de dados espaciais, pois inclui muito mais informações de estilo. A SpatialDataLayer classe suporta a maioria desses estilos, no entanto, as imagens de ícones precisam ser carregadas no mapa antes de carregar os dados do recurso, e as sobreposições de solo precisam ser adicionadas como camadas ao mapa separadamente. Ao carregar dados através de uma URL, devem ser hospedados num endpoint habilitado para CORs, ou um serviço de proxy deve ser passado como opção na função de leitura.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

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

            //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 simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read a KML file from a URL or pass in a raw KML string.
                atlas.io.read('https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml').then(async r => {
                    if (r) {

                        //Check to see if there are any icons in the data set that need to be loaded into the map resources.
                        if (r.icons) {
                            //For each icon image, create a promise to add it to the map, then run the promises in parallel.
                            var imagePromises = [];

                            //The keys are the names of each icon image.
                            var keys = Object.keys(r.icons);

                            if (keys.length !== 0) {
                                keys.forEach(function (key) {
                                    imagePromises.push(map.imageSprite.add(key, r.icons[key]));
                                });

                                await Promise.all(imagePromises);
                            }
                        }

                        //Load all features.
                        if (r.features && r.features.length > 0) {
                            datasource.add(r.features);
                        }

                        //Load all ground overlays.
                        if (r.groundOverlays && r.groundOverlays.length > 0) {
                            map.layers.add(r.groundOverlays);
                        }

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({ bounds: r.bbox, padding: 50 });
                        }
                    }
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Uma captura de tela de um mapa do Azure Maps demonstrando KML com linhas coloridas diferentes representando diferentes trilhos ferroviários originários de um porto em Chicago para vários destinos diferentes, todos os dados provenientes do arquivo KM.

Mais recursos:

Mais exemplos de código

A seguir estão mais alguns exemplos de código relacionados à migração do Google Maps:

Serviços:

Mapeamento de classes do Google Maps V3 para o SDK da Web do Azure Maps

O apêndice a seguir fornece uma referência cruzada das classes comumente usadas no Google Maps V3 e no SDK da Web do Azure Maps equivalente.

Classes principais

Mapas do Google Azure Maps
google.maps.Map Atlas. Mapa
google.maps.InfoWindow Atlas. Pop-up
google.maps.InfoWindowOptions Atlas. PopupOptions
google.maps.LatLng atlas.data.Posição
google.maps.LatLngBounds atlas.data.BoundingBox
google.maps.MapOptions Atlas. Opções de câmara
Atlas. CameraBoundsOptions
Atlas. Opções de Serviço
Atlas. Opções de estilo
Atlas. UserInteractionOptions
google.maps.Point Atlas. Píxel

Classes de sobreposição

Mapas do Google Azure Maps
google.maps.Marker Atlas. HtmlMarker
atlas.data.Ponto
google.maps.MarkerOptions Atlas. HtmlMarkerOptions
atlas.layer.SymbolLayer
Atlas. SymbolLayerOptions
Atlas. IconOptions
Atlas. Opções de texto
atlas.layer.BubbleLayer
Atlas. BubbleLayerOptions
google.maps.Polygon atlas.data.Polygon
google.maps.PolygonOptions atlas.layer.PolygonLayer
Atlas. PolygonLayerOptions
atlas.layer.LineLayer
Atlas. LineLayerOptions
google.maps.Polyline atlas.data.LineString
google.maps.PolylineOptions atlas.layer.LineLayer
Atlas. LineLayerOptions
google.maps.Circle Consulte Adicionar um círculo ao mapa
google.maps.ImageMapType Atlas. Camada de telha
google.maps.ImageMapTypeOptions Atlas. TileLayerOptions
google.maps.GroundOverlay atlas.layer.ImageLayer
Atlas. ImageLayerOptions

Classes de serviço

O SDK da Web do Azure Maps inclui um módulo de serviços, que pode ser carregado separadamente. Este módulo encapsula os serviços REST do Azure Maps com uma API Web e pode ser usado em JavaScript, TypeScript e aplicativos Node.js.

Mapas do Google Azure Maps
google.maps.Geocoder atlas.service.SearchUrl
google.maps.GeocoderRequest Atlas.SearchAddressOptions
[Atlas. SearchAddressReverseOptions]
Atlas. SearchAddressReverseCrossStreetOptions
Atlas. SearchAddressStructuredOptions
Atlas. SearchAlongRouteOptions
Atlas.SearchFuzzyOptions
" Atlas. OpçõesDePesquisaDentroDaGeometria
atlas.OpçõesDePesquisaNasProximidades
Atlas. SearchPOIOptions
Atlas. SearchPOICategoryOptions
google.maps.DirectionsService atlas.service.RouteUrl
google.maps.DirectionsRequest Atlas. CalculateRouteDirectionsOptions
google.maps.places.PlacesService f

Bibliotecas

As bibliotecas adicionam mais funcionalidade ao mapa. Muitas dessas bibliotecas estão no SDK principal do Azure Maps. Aqui estão algumas classes equivalentes para usar no lugar dessas bibliotecas do Google Maps

Mapas do Google Azure Maps
Biblioteca de desenhos Módulo de ferramentas de desenho
Biblioteca de geometria atlas.math
Biblioteca de visualização Camada de mapa de calor

Limpar recursos

Não há recursos para serem limpos.

Próximos passos

Saiba mais sobre como migrar para o Azure Maps:

Migrar um serviço Web