Práticas recomendadas do SDK da Web do Azure Mapas

Este documento se concentra nas práticas recomendadas do SDK da Web do Azure Mapas. No entanto, muitas das práticas e otimizações descritas podem ser aplicadas a todos os outros SDKs do Azure Mapas.

O SDK da Web do Azure Mapas fornece uma tela avançada para renderizar de várias formas grandes conjuntos de dados espaciais. Em alguns casos, existem várias maneiras de renderizar os dados da mesma forma, mas, dependendo do tamanho do conjunto de dados e da funcionalidade desejada, um método pode ter um desempenho melhor que o outro. Este artigo destaca as práticas recomendadas e dicas e truques para maximizar o desempenho e criar uma experiência do usuário tranquila.

Em geral, ao tentar melhorar o desempenho do mapa, procure maneiras de reduzir o número de camadas e fontes e a complexidade dos conjuntos de dados e dos estilos de renderização usados.

Melhores práticas de segurança

Para mais informações sobre as melhores práticas de segurança, confira Melhores práticas de autenticação e autorização.

Usar as versões mais recentes do Azure Mapas

Os SDKs do Azure Mapas passam por testes de segurança regulares, juntamente com as bibliotecas de dependências externas usadas pelos SDKs. Os problemas de segurança conhecidos são corrigidos em tempo hábil e liberados para produção. Se o aplicativo apontar para a versão principal mais recente da versão hospedada do SDK da Web do Azure Mapas, ele receberá automaticamente todas as atualizações de versão secundária que incluem correções relacionadas à segurança.

Se estiver fazendo auto-hospedagem do SDK da Web do Azure Mapas via módulo npm, certifique-se de usar o símbolo de circunflexo (^) em combinação com o número da versão do pacote npm do Azure Mapas no arquivo package.json para que ele aponte para a versão secundária mais recente.

"dependencies": {
  "azure-maps-control": "^3.0.0"
}

Dica

Sempre use a versão mais recente de controle do Azure Mapas no npm. Para obter mais informações, confira azure-maps-control na documentação do npm.

Otimizar o carregamento do mapa inicial

Quando uma página da Web está carregando, uma das primeiras coisas que se deseja fazer é processar algo o mais rápido possível, para que o usuário não fique parado olhando para uma tela em branco.

Assistir o evento de mapas prontos

Da mesma forma, quando o mapa é carregado inicialmente, é desejável carregar os dados o mais rápido possível, para que o usuário não veja um mapa vazio. Como o mapa carrega recursos de forma assíncrona, é preciso esperar até que ele fique pronto para interagir, para então renderizar seus próprios dados nele. Há dois eventos que você pode esperar, um evento load e um evento ready. O evento carregado será acionado assim que o mapa terminar de carregar a exibição inicial e todas as peças do mapa tiverem sido carregadas. Se você vir um erro "O estilo não terminou de carregar", deverá usar o evento load e esperar que o estilo seja totalmente carregado.

O evento pronto é acionado quando houver os recursos mínimos de mapa necessários para começar a interação. Mais precisamente, o evento ready é disparado quando o mapa está carregando os dados de estilo pela primeira vez. Esse evento pronto geralmente pode ser acionado na metade do tempo do evento de carregamento, permitindo dessa forma que você comece a carregar mais cedo seus dados no mapa. Evite fazer alterações no estilo ou idioma do mapa neste momento, pois isso pode disparar um recarregamento de estilo.

Carregamento lento do SDK da Web do Azure Mapas

Se o mapa não for necessário imediatamente, faça um carregamento lento do SDK da Web do Azure Mapas para quando que ele for necessário. Isso atrasa o carregamento dos arquivos JavaScript e CSS usados pelo SDK da Web do Azure Mapas até que eles sejam necessários. Um cenário comum em que essa situação ocorre é quando o mapa é carregado em uma guia ou painel de submenu que não é exibido no carregamento da página.

O exemplo de código Carregamento lento do mapa mostra como atrasar o carregamento do SDK da Web do Azure Mapas até que um botão seja pressionado. Para obter o código-fonte, confira Carregar lentamente o código de exemplo do mapa.

Adicionar um espaço reservado para o mapa

Se o mapa demorar um pouco para carregar, devido às limitações da rede ou outras prioridades do aplicativo, considere adicionar ao mapa uma pequena imagem de fundo div como um espaço reservado para o mapa. Isso preencherá o vazio do mapa div durante o carregamento.

Definir as opções de estilo de mapa inicial e a câmera na inicialização

Geralmente, os aplicativos desejam carregar o mapa em um local ou estilo específico. Às vezes, os desenvolvedores aguardam o carregamento do mapa (ou aguardam o evento ready) e, em seguida, usam as funções setCamera ou setStyle do mapa. Normalmente, isso leva mais tempo para obter a exibição do mapa inicial desejada, pois muitos recursos acabam carregados por padrão antes que os recursos necessários para exibição do mapa desejado sejam carregados. Uma abordagem melhor é passar a câmera de mapa e as opções de estilo desejadas para o mapa ao inicializá-lo.

Otimizar fontes de dados

O SDK da Web tem duas fontes de dados,

• Fonte GeoJSON: a classe DataSource gerencia localmente os dados brutos de localização no formato GeoJSON. Boa para conjuntos de dados pequenos a médios (com mais de centenas de milhares de recursos).
• Origem do bloco vetor: a classe VectorTileSource carrega os dados formatados como mapeamentos vetoriais para a exibição do mapa atual, com base no sistema de mapeamento de mapas. Ideal para conjuntos de dados grandes a enormes (milhões ou bilhões de recursos).

Usar soluções em peças para conjuntos de dados grandes

Se estiver trabalhando com conjuntos de dados maiores, com milhões de recursos, a maneira recomendada para obter o desempenho ideal é expor os dados usando uma solução do servidor, como o serviço de peça de imagem de vetor ou de varredura.
As peças de vetor são otimizadas para carregar somente os dados em exibição com as geometrias recortadas na área de foco da peça e são generalizadas para corresponder à resolução do mapa no nível de zoom da peça.

A plataforma Criador do Azure Mapas recupera dados no formato de peça de vetor. Outros formatos de dados podem estar usando ferramentas como o Tippecanoe. Para obter mais informações sobre como trabalhar com peças de vetor, confira o readme awesome-vector-tiles do Mapbox no GitHub.

Da mesma forma, é possível criar um serviço personalizado que renderize os conjuntos de dados como peças de imagem de varredura no servidor e carregue os dados usando a classe TileLayer no SDK do mapa. Isso fornece um desempenho excepcional, pois o mapa vai precisar apenas carregar e gerenciar no máximo algumas dúzias de imagens. No entanto, há algumas limitações no uso de peças de varredura, pois os dados brutos não ficam disponíveis localmente. Geralmente, é necessário um serviço secundário para ativar qualquer tipo de experiência de interação, por exemplo, descobrir em que forma o usuário clicou. Além disso, o tamanho do arquivo de uma peça de varredura é geralmente maior que uma peça de vetor compactada que contém geometrias generalizadas e otimizadas no nível de zoom.

Para obter mais informações sobre as fontes de dados, confira Criar uma fonte de dados.

Combinar vários conjuntos de dados em uma única fonte de peça de vetor

Quanto menos fontes de dados o mapa tiver que gerenciar, mais rápido ele poderá processar todos os recursos a serem exibidos. Em particular, quando se trata de fontes de peça, combinar duas fontes de peça de vetor cortará pela metade o número de solicitações HTTP para recuperar as peças, ficando a quantidade total de dados ligeiramente menor, já que haverá apenas um cabeçalho de arquivo.

A combinação de vários conjuntos de dados em uma única fonte de peça de vetor pode ser obtida usando uma ferramenta como Tippecanoe. Os conjuntos de dados podem ser combinados em uma única coleção de recursos ou separados então em camadas separadas na peça de vetor, conhecidas como camadas de origem. Ao conectar uma fonte de peça de vetor a uma camada de renderização, você deve especificar a camada de origem que contém os dados que deseja renderizar com a camada.

Reduzir o número de atualizações de tela devido às atualizações de dados

Há várias maneiras pelas quais os dados em uma classe DataSource podem ser adicionados ou atualizados. A lista a seguir mostra os diferentes métodos e algumas considerações para garantir um bom desempenho.

• A função de fontes de dados add pode ser usada para adicionar um ou mais recursos a uma fonte de dados. Cada vez que essa função é chamada, ela aciona uma atualização da tela do mapa. Se adicionar muitos recursos, combine-os em uma matriz ou coleção de recursos e passe-os para essa função uma vez, em vez de fazer um loop em um conjunto de dados e chamar essa função para cada recurso.
• A função de fontes de dados setShapes pode ser usada para substituir todas as formas em uma fonte de dados. De forma subjacente, ela combina as funções de fontes de dados clear e add e faz uma única atualização da tela do mapa em vez de duas, o que é muito mais rápido. Use essa função quando quiser atualizar todos os dados em uma fonte de dados.
• A função de fontes de dados importDataFromUrl pode ser usada para carregar um arquivo GeoJSON por meio de uma URL em uma fonte de dados. Depois que os dados são baixados, eles são passados para a função add de fontes de dados. Se o arquivo GeoJSON estiver hospedado em um domínio diferente, verifique se o outro domínio oferece suporte a solicitações entre domínios (CORs). Caso isso não ocorra, considere copiar os dados para um arquivo local em seu domínio ou criar um serviço de proxy que tenha o CORs habilitado. Se o arquivo for grande, considere a possibilidade de convertê-lo em uma fonte de peça de vetor.
• Se os recursos forem encapsulados com a classe Shape, as funções addProperty, setCoordinates e setProperties da forma acionarão uma atualização na fonte de dados e uma atualização da tela do mapa. Todos os recursos retornados pelas funções de fontes de dados getShapes e getShapeById são automaticamente encapsulados com a classe Shape. Se você quiser atualizar várias formas, será mais rápido convertê-las em JSON usando a função toJson das fontes de dados, editando o GeoJSON e, em seguida, passando esses dados para a função setShapes das fontes de dados.

Evitar chamar a função de limpeza das fontes de dados sem necessidade

Chamar a função de limpeza da classe DataSource causa uma atualização da tela do mapa. Se a função clear for chamada várias vezes em uma linha, poderá ocorrer um atraso enquanto o mapa aguardar a ocorrência de cada atualização.

Esse é um cenário comum em aplicativos que limpam a fonte de dados, baixam novos dados, limpam a fonte de dados novamente e adicionam os novos dados à fonte de dados. Dependendo da experiência do usuário desejada, as alternativas a seguir podem ser melhores.

• Limpar os dados antes de baixar os novos dados e, em seguida, passar os novos dados para a função das fontes de dados add ou setShapes. Se esse for o único conjunto de dados no mapa, o mapa ficará vazio enquanto os novos dados são baixados.
• Baixar os novos dados e, em seguida, passá-los para a função das fontes de dados setShapes. Isso substitui todos os dados no mapa.

Remover recursos e propriedades não utilizados

Se o seu conjunto de dados contiver recursos que não serão usados em seu aplicativo, remova-os. Da mesma forma, remova todas as propriedades dos recursos que não são necessárias. Isso tem várias vantagens:

• Reduz a quantidade de dados que têm que ser baixados.
• Reduz o número de recursos que precisam ser efetuados em loop ao renderizar os dados.
• Pode ajudar também simplificar ou remover filtros e expressões controladas por dados, o que significa menor necessidade de processamento no momento da renderização.

Quando os recursos têm muitas propriedades ou conteúdo, é muito mais eficaz adicionar à fonte de dados apenas as propriedades e conteúdo necessários para a renderização e, havendo necessidade, ter um método ou serviço separado para recuperar as outras propriedades ou conteúdo quando necessário. Por exemplo, se tiver um mapa simples exibindo locais, quando uma quantidade selecionada de conteúdo detalhado é exibida. Se quiser usar o estilo controlado por dados para personalizar a forma como os locais serão renderizados no mapa, carregue na fonte de dados apenas as propriedades necessárias. Quando quiser exibir o conteúdo detalhado, use a ID do recurso para recuperar o outro conteúdo separadamente. Se o conteúdo estiver armazenado no servidor, você pode reduzir a quantidade de dados que precisam ser baixados quando o mapa é carregado inicialmente usando um serviço para recuperá-lo de forma assíncrona.

Além disso, a redução do número de dígitos significativos nas coordenadas dos recursos também pode reduzir consideravelmente o tamanho dos dados. É comum que as coordenadas contenham 12 ou mais casas decimais; no entanto, seis casas decimais têm uma precisão de cerca de 0,1 metro, que geralmente é mais precisa do que a localização representada pela coordenada (seis casas decimais são recomendadas para se trabalhar com dados de local pequenos, como layouts de construção de interior). Ter mais de seis casas decimais provavelmente não fará qualquer diferença na forma como os dados serão renderizados e exigirá que o usuário baixe mais dados, sem acrescentar qualquer benefício.

Aqui está uma lista de ferramentas úteis para trabalhar com dados GeoJSON.

Usar uma fonte de dados separada para alterar rapidamente os dados

Às vezes, há a necessidade de atualizar rapidamente os dados no mapa para eventos, como mostrar atualizações dinâmicas de dados de streaming ou recursos de animação. Quando uma fonte de dados é atualizada, o mecanismo de renderização executará um loop e renderiza todos os recursos na fonte de dados. Melhore o desempenho geral separando os dados estáticos de alteração rápida em diferentes fontes de dados, reduzindo o número de recursos renderizados em cada atualização.

Se estiver usando peças de vetor com dados dinâmicos, uma maneira fácil de dar suporte a atualizações é usar o cabeçalho de resposta expires. Por padrão, qualquer origem da peça de vetor ou camada de vetor de varredura recarregará as peças automaticamente quando a data expires. As peças de fluxo de tráfego e de incidentes no mapa usam esse recurso para garantir que os dados de tráfego em tempo real sejam exibidos no mapa. Esse recurso pode ser desabilitado definindo a opção de serviço de mapas refreshExpiredTiles como false.

Ajustar as opções de buffer e tolerância em fontes de dados GeoJSON

A classe DataSource converte dados de local brutos em peças de vetor locais para renderização imediata. Essas peças de vetor locais cortam os dados brutos nos limites da área da peça com um pouco de buffer, para garantir uma renderização suave entre as peças. Quanto menor for a opção buffer, menos dados sobrepostos serão armazenados nas peças de vetor locais e melhor será o desempenho. No entanto, ocorrerá uma maior alteração dos artefatos de renderização. Tente ajustar essa opção para obter a combinação certa de desempenho com o mínimo de artefatos de renderização.

A classe DataSource também tem uma opção tolerance que é usada com o algoritmo de simplificação de Douglas-Peucker ao reduzir a resolução de geometrias para fins de renderização. O aumento desse valor de tolerância reduz a resolução de geometrias e, por sua vez, melhora o desempenho. Ajuste essa opção para obter a combinação certa de resolução de geometria e desempenho para o conjunto de dados.

Definir a opção de zoom máximo de fontes de dados GeoJSON

A classe DataSource converte dados de local brutos em peças de vetor locais para renderização imediata. Por padrão, isso é feito até o nível de zoom 18, momento em que, quando for aplicado um zoom mais próximo, serão obtidos dados de amostra das peças geradas para o nível de zoom 18. Esse procedimento funciona bem para a maioria dos conjuntos de dados que precisam ter alta resolução quando forem ampliados nesses níveis. No entanto, ao trabalhar com conjuntos de dados com maior probabilidade de serem exibidos com mais zoom, como ao exibir polígonos de estado ou província, definir a opção minZoom da fonte de dados para um valor menor, como 12, reduzirá a quantidade de computação, a geração de peças locais e a memória usada pela fonte de dados, aumentando assim o desempenho.

Minimizar a resposta GeoJSON

Ao carregar dados GeoJSON de um servidor por meio de um serviço ou carregando um arquivo simples, certifique-se de ter os dados minimizados, para remover caracteres de espaço desnecessários que tornam o tamanho do download maior do que o necessário.

Acessar GeoJSON bruto usando uma URL

É possível armazenar objetos GeoJSON embutidos no JavaScript. No entanto, esse procedimento usa muita memória, pois as cópias são armazenadas na variável criada para esse objeto e instância da fonte de dados, que executa o gerenciamento em uma função de trabalho separada. Use uma URL para expor o GeoJSON ao aplicativo, pois a fonte de dados carregará uma única cópia dos dados diretamente na função de trabalho das fontes de dados.

Otimizar camadas de renderização

Os mapas do Azure fornecem várias camadas diferentes para renderização de dados em um mapa. Há muitas otimizações que você pode aproveitar para adaptar essas camadas ao seu cenário e aumentar o desempenho e a experiência geral do usuário.

Criar camadas uma vez e reutilizá-las

O SDK da Web do Azure Mapas é controlado por dados. Os dados são inseridos nas fontes de dados, que são então conectadas às camadas de renderização. Se quiser alterar os dados no mapa, atualize-os na fonte de dados ou altere as opções de estilo em uma camada. Geralmente, é mais rápido fazer dessa forma do que remover e criar novamente camadas a cada alteração.

Considerar uma camada de bolhas em vez de uma camada de símbolo

A camada de bolhas renderiza pontos como círculos no mapa e pode facilmente caracterizar os raios e cores usando uma expressão controlada por dados. Como o círculo é uma forma simples para o WebGL desenhar, o mecanismo de renderização pode renderizá-lo muito mais rápido do que uma camada de símbolo, que tem que carregar e renderizar uma imagem. A diferença de desempenho dessas duas camadas de renderização é perceptível ao renderizar dezenas de milhares de pontos.

Usar marcadores HTML e pop-ups com moderação

Ao contrário da maioria das camadas no controle da Web do Azure Mapas, que usam o WebGL para a renderização, os marcadores HTML e pop-ups usam os elementos DOM tradicionais. Assim, quanto mais marcadores HTML e pop-ups forem adicionados a uma página, mais elementos DOM existirão. O desempenho poderá ser prejudicado após adicionar algumas centenas de marcadores HTML ou pop-ups. Para conjuntos de dados maiores, considere a criação de cluster dos dados ou o uso de uma camada de símbolo ou bolhas.

O exemplo de código Reutilização de pop-up com várias marcações mostra como criar um único pop-up e reutilizá-lo atualizando seu conteúdo e posição. Para obter o código-fonte, confira Código de exemplo da reutilização de pop-ups com várias marcações.

Dito isso, se você tiver apenas alguns pontos para renderização no mapa, talvez seja preferível a simplicidade dos marcadores HTML. Além disso, eles podem ser facilmente arrastados, se for necessário.

Combinar camadas

O mapa é capaz de renderizar centenas de camadas. No entanto, quanto mais camadas houver, mais tempo levará para renderizar uma cena. Uma estratégia para reduzir o número de camadas é combinar camadas que têm estilos semelhantes ou que podem ser estilizadas usando estilos controlados por dados.

Por exemplo, considere um conjunto de dados em que todos os recursos têm uma propriedade isHealthy que pode ter um valor de true ou false. Há várias maneiras de criar uma camada de bolhas que renderiza bolhas de cores diferentes com base nessa propriedade; como mostrado na lista a seguir, do menos performático ao mais performático.

• Divida os dados em duas fontes de dados com base no valor isHealthy e anexe uma camada de bolhas com uma opção de cor embutida em código para cada fonte de dados.
• Coloque todos os dados em uma única fonte de dados e crie duas camadas de bolhas com uma opção de cor embutida em código e um filtro com base na propriedade isHealthy.
• Coloque todos os dados em uma única fonte de dados, crie uma única camada de bolhas, com uma expressão de estilo case para a opção de cor com base na propriedade isHealthy. Veja um exemplo de código que demonstra isso.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Get the 'isHealthy' property from the feature.
        ['get', 'isHealthy'],

        //If true, make the color 'green'. 
        'green',

        //If false, make the color red.
        'red'
    ]
});

Criar animações suaves de camada de símbolo

As camadas de símbolo têm a detecção de colisão habilitada por padrão. Essa detecção visa garantir que dois símbolos não se sobreponham. As opções de ícone e texto da camada têm duas opções,

• allowOverlap: especifica se o símbolo fica visível ao colidir com outros símbolos.
• ignorePlacement - especifica se os outros símbolos têm permissão para colidir com o símbolo.

Essas duas opções são definidas para false por padrão. Ao animar um símbolo, os cálculos de detecção de colisão são executados em cada quadro da animação, o que pode deixar a animação mais lenta e menos fluida. Para suavizar a animação, defina essas opções como true.

O exemplo de código Animação de símbolo simples demonstra uma maneira simples de animar uma camada de símbolo. Para obter o código-fonte deste exemplo, confira Código de exemplo de animação de símbolo simples.

Especificar intervalo de nível de zoom

Se os dados atenderem a um dos critérios a seguir, especifique o nível de zoom mínimo e máximo da camada, para que o mecanismo de renderização possa ignorá-lo quando estiver fora do intervalo do nível de zoom.

• Se os dados forem provenientes de uma fonte de peça de vetor, muitas vezes as camadas de origem para tipos de dados diferentes só ficarão disponíveis por meio de um intervalo de níveis de zoom.
• Se estiver usando uma camada de peças que não tenha peças para todos os níveis de zoom de 0 a 24 e quiser renderizar apenas nos níveis que houver peças e não haja a tentativa de preencher a ausência das peças com peças de outros níveis de zoom.
• Se quiser renderizar uma camada apenas em determinados níveis de zoom. Todas as camadas têm uma opção minZoom e maxZoom, em que a camada é renderizada quando estiver entre esses níveis de zoom com base na lógica maxZoom > zoom >= minZoom.

Exemplo

//Only render this layer between zoom levels 1 and 9. 
var layer = new atlas.layer.BubbleLayer(dataSource, null, {
    minZoom: 1,
    maxZoom: 10
});

Especificar limites da camada de peça e intervalo de zoom de origem

Por padrão, as camadas de peça carregam as peças em todo o globo. No entanto, se o serviço de peça tiver apenas peças para uma determinada área, o mapa tentará carregar as peças quando estiver fora dessa área. Quando isso acontece, é feita uma solicitação para cada peça e espera-se por uma resposta que pode bloquear outras solicitações feitas pelo mapa, o que desacelera a renderização de outras camadas. A especificação dos limites de uma camada de peças fará com que o mapa solicite apenas as peças que estão dentro da caixa delimitadora. Além disso, se a camada de peça estiver disponível apenas entre determinados níveis de zoom, especifique o zoom de origem mínimo e máximo pelo mesmo motivo.

Exemplo

var tileLayer = new atlas.layer.TileLayer({
    tileUrl: 'myTileServer/{z}/{y}/{x}.png',
    bounds: [-101.065, 14.01, -80.538, 35.176],
    minSourceZoom: 1,
    maxSourceZoom: 10
});

Usar um estilo de mapa em branco quando o mapa base não estiver visível

Se uma camada for sobreposta no mapa que cobre completamente o mapa base, considere definir o estilo do mapa para blank ou blank_accessible, para que o mapa base não seja renderizado. Um cenário comum para isso ocorre quando a sobreposição de uma peça do mundo inteiro não possui opacidade ou área transparente sobre o mapa base.

Animar de forma suave camadas de imagem ou peças

Se quiser que a animação seja feita por meio de uma série de camadas de imagem ou peça no mapa. Geralmente, é mais rápido criar uma camada para cada imagem ou camada de peças e alterar a opacidade do que atualizar a fonte de uma única camada em cada quadro de animação. Ocultar uma camada definindo a opacidade como zero e mostrar uma nova camada definindo sua opacidade como um valor maior que zero é bem mais rápido do que atualizar a fonte na camada. Como alternativa, a visibilidade das camadas pode ser alternada, mas certifique-se de definir a duração de esmaecimento da camada como zero. Caso contrário, ela animará a camada ao exibi-la, o que causará um efeito de cintilação, já que a camada anterior é ocultada antes de a nova camada se tornar visível.

Ajustar a lógica de detecção de colisão da camada de símbolo

A camada de símbolo tem duas opções para o ícone e o texto denominadas allowOverlap e ignorePlacement. Essas duas opções especificam se o ícone ou o texto de um símbolo pode se sobrepor ou ser sobreposto. Quando definido como false, a camada de símbolos faz cálculos ao renderizar cada ponto para ver se ele colide com qualquer outro símbolo já renderizado na camada e, se sim, não renderiza o símbolo que está colidindo. Isso é bom para reduzir a desordem no mapa e também o número de objetos renderizados. Ao definir essas opções como false, essa lógica de detecção de colisão é ignorada e todos os símbolos são renderizados no mapa. Ajuste esta opção para obter a melhor combinação de desempenho e experiência do usuário.

Criar cluster de conjuntos grandes de dados de ponto

Ao trabalhar com grandes conjuntos de pontos de dados, você pode descobrir que, quando renderizados em determinados níveis de zoom, muitos dos pontos se sobrepõem e são visíveis apenas parcialmente, se é que são visíveis. A criação de cluster é o processo de agrupar pontos bem próximos e representá-los como um único ponto agrupado. À medida que o usuário amplia o mapa, os clusters são separados em pontos individuais. Isso pode reduzir significativamente a quantidade de dados que precisam ser renderizados, fazer com que o mapa fique menos congestionado e ainda melhorar o desempenho. A classe DataSource tem opções para criar cluster de dados localmente. Além disso, muitas ferramentas que geram peças de vetor também têm opções para criar cluster.

Outra contribuição é aumentar o tamanho do raio do cluster para melhorar o desempenho. Quanto maior o raio do cluster, menos pontos clusterizados haverá para acompanhar e renderizar. Para obter mais informações, confiraClustering de dados de ponto no SDK da Web.

Usar mapas de calor em cluster ponderados

A camada do mapa de calor pode renderizar com facilidade dezenas de milhares de pontos de dados. Para conjuntos de dados maiores, considere habilitar a criação de cluster na fonte de dados usando um raio pequeno. Use a propriedade point_count de clusters como peso para o mapa de altura. Quando o raio do cluster tiver apenas alguns pixels de tamanho, haverá pouca diferença visual no mapa de calor renderizado. O uso de um raio de cluster maior melhora mais o desempenho, mas pode reduzir a resolução do mapa de calor renderizado.

var layer = new atlas.layer.HeatMapLayer(source, null, {
   weight: ['get', 'point_count']
});

Para obter mais informações, confira Clustering e a camada de mapas de calor.

Manter os recursos de imagem pequenos

As imagens podem ser adicionadas ao sprite de imagem de mapas para renderizar ícones em uma camada de símbolo ou padrões em uma camada de polígono. Mantenha essas imagens pequenas para minimizar a quantidade de dados que precisa ser baixada e a quantidade de espaço que eles ocupam no sprite de imagem de mapas. Ao usar uma camada de símbolo que dimensione o ícone usando a opção size, use uma imagem com o tamanho máximo que planeja exibir no mapa e não uma maior. Isso garante a renderização do ícone com alta resolução, minimizando os recursos que ele usa. Além disso, os arquivos SVG também podem ser usados como um formato de arquivo menor para imagens de ícone simples.

Otimizar expressões

As expressões de estilo controladas por dados fornecem flexibilidade e potência para filtrar e estilizar dados no mapa. Há muitas maneiras pelas quais as expressões podem ser otimizadas. Aqui estão algumas dicas.

Reduzir a complexidade dos filtros

Os filtros executam loop de todos os dados em uma fonte de dados e verificam se cada filtro corresponde à lógica no filtro. Se eles se tornarem complexos, poderá haver problemas de desempenho. Algumas estratégias possíveis para resolver essa questão incluem o seguinte.

• Se estiver usando peças de vetor, divida os dados em diferentes camadas de origem.
• Se estiver usando a classe DataSource, divida esses dados em fontes de dados separadas. Tente balancear o número de fontes de dados com a complexidade do filtro. Fontes de dados em demasiado também podem causar problemas de desempenho. Portanto, talvez seja necessário fazer alguns testes para descobrir o que funciona melhor para o seu cenário.
• Ao usar um filtro complexo em uma camada, considere usar várias camadas com expressões de estilo para reduzir a complexidade do filtro. Evite criar várias camadas com estilos codificados quando puder usar expressões de estilo, já que um grande número de camadas também pode causar problemas de desempenho.

Verificar se as expressões não produzem erros

As expressões geralmente são usadas para gerar código a fim de executar cálculos ou operações lógicas no momento da renderização. Assim como o código no restante do seu aplicativo, certifique-se de que os cálculos e a lógica façam sentido e não sejam propensos a erros. Os erros em expressões causam problemas na avaliação da expressão, o que pode resultar em desempenho inferior e problemas de renderização.

Um erro comum que se deve prestar atenção é ter uma expressão que dependa de uma propriedade de um recurso que possa não existir em todos os recursos. Por exemplo, o código a seguir usa uma expressão para definir a propriedade de cor de uma camada de bolha para a propriedade myColor de um recurso.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: ['get', 'myColor']
});

O código acima funciona bem se todos os recursos na fonte de dados tiverem uma propriedade myColor e o valor dessa propriedade for uma cor. Isso pode não ser um problema se você tiver controle total dos dados na fonte de dados e souber com certeza que todos os recursos têm uma cor válida em uma propriedade myColor. Dito isso, para tornar esse código livre de erros, uma expressão case pode ser usada com a expressão has para verificar se o recurso tem a propriedade myColor. Se ele tiver, a expressão do tipo to-color poderá ser usada para tentar converter o seu valor em uma cor. Se a cor for inválida, uma cor de fallback poderá ser usada. O código a seguir demonstra como fazer esse procedimento e define a cor de fallback para verde.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Check to see if the feature has a 'myColor' property.
        ['has', 'myColor'],

        //If true, try validating that 'myColor' value is a color, or fallback to 'green'. 
        ['to-color', ['get', 'myColor'], 'green'],

        //If false, return a fallback value.
        'green'
    ]
});

Ordenar expressões boolianas, da mais específica para a menos específica

Reduza o número total de testes condicionais necessários ao usar expressões boolianas que contenham vários testes condicionais, ordenando-os do mais específico para o menos específico.

Simplificar expressões

As expressões podem ser poderosas e, às vezes, complexas. Expressões menos complexas são avaliadas mais rapidamente. Por exemplo, se uma comparação simples for necessária, uma expressão como ['==', ['get', 'category'], 'restaurant'] seria melhor do que usar uma expressão de correspondência como ['match', ['get', 'category'], 'restaurant', true, false]. Nesse caso, se a propriedade que está sendo verificada for um valor booliano, uma expressão get seria ainda mais simples ['get','isRestaurant'].

Solução de problemas do SDK da Web

Veja a seguir algumas dicas para depurar alguns dos problemas comuns encontrados ao desenvolver com o SDK da Web do Azure Mapas.

Por que o mapa não é exibido quando eu carrego o controle da Web?

Verifique a:

• Certifique-se de completar suas opções de autenticação no mapa. Sem autenticação, o mapa carrega uma tela em branco e retorna um erro 401 na guia de rede das ferramentas de desenvolvedor do navegador.
• Verifique se você tem uma conexão com a Internet.
• Verifique se há erros nas ferramentas de desenvolvedor do navegador no console. Alguns erros podem fazer com que o mapa não seja renderizado. Depure o aplicativo.
• Verifique se você está usando um navegador com suporte.

Todos os meus dados estão aparecendo no outro lado do mundo, o que está acontecendo?

As coordenadas, também chamadas de posições, nos SDKs do Azure Mapas se alinham com o formato geoespacial padrão do setor de [longitude, latitude]. Esse mesmo formato também é a forma como as coordenadas são definidas no esquema GeoJSON; os dados principais formatados usados nos SDKs do Azure Mapas. Se seus dados estão aparecendo do outro lado do mundo, provavelmente será devido à inversão dos valores de longitude e latitude em suas informações de coordenadas/posição.

Por que os marcadores HTML aparecem no local errado no controle da Web?

Verifique a:

• Se estiver usando conteúdo personalizado para o marcador, verifique se as opções anchor e pixelOffset estão corretas. Por padrão, o centro inferior do conteúdo fica alinhado com a posição no mapa.
• Verifique se o arquivo CSS do Azure Mapas está carregado.
• Inspecione o elemento DOM do marcador HTML para visualizar se qualquer CSS do seu aplicativo foi anexado ao marcador e está afetando a posição.

Por que os ícones ou o texto na camada de símbolo aparecem no local errado?

Verifique se as opções anchor e offset estão configuradas corretamente para alinhar com a parte da imagem ou texto que você deseja alinhar com a coordenada no mapa. Se o símbolo apenas ficar fora do lugar quando o mapa for girado, verifique a opção rotationAlignment. Por padrão, os símbolos giram com o visor dos mapas para que eles pareçam na vertical para o usuário. Entretanto, dependendo do seu cenário, pode ser desejável bloquear o símbolo para a orientação do mapa definindo a opção rotationAlignment como map.

Se o símbolo apenas ficar fora do lugar quando o mapa estiver inclinado, verifique a opção pitchAlignment. Por padrão, os símbolos permanecem na posição vertical no visor do mapa quando ele é inclinado ou virado. Entretanto, dependendo do cenário, pode ser desejável bloquear o símbolo na inclinação do mapa definindo a opção pitchAlignment para map.

Por que nenhum dos meus dados aparece no mapa?

Verifique a:

• Verifique se há erros nas ferramentas de desenvolvedor do navegador no console.
• Verifique se uma fonte de dados foi criada e adicionada ao mapa e se a fonte de dados está conectada a uma camada de renderização adicionada anteriormente ao mapa.
• Adicione pontos de interrupção no código e percorra-o. Verifique se os dados são adicionados à fonte de dados e se a fonte de dados e as camadas são adicionadas ao mapa.
• Tente remover as expressões controladas por dados da camada de renderização. É possível que uma delas tenha um erro que esteja causando o problema.

Posso usar o SDK da Web do Azure Mapas em um iframe de área restrita?

Sim.

Obter suporte

Veja a seguir as diferentes maneiras de obter suporte para o Azure Mapas, dependendo do problema.

Como relatar um problema de dados ou um problema de endereço?

Relate problemas de dados usando o site de comentários do Azure Mapas. Para obter instruções detalhadas sobre como relatar problemas de dados, consulte Fornecer comentários de dados para o Azure Mapas.

Observação

Cada problema enviado gera uma URL exclusiva para rastreamento. Os tempos de resolução variam dependendo do tipo de problema e do tempo necessário para verificar se a alteração está correta. As alterações aparecerão na atualização semanal dos serviços de renderização, enquanto outros serviços, como geocodificação e roteamento, são atualizados mensalmente.

Como relatar um bug em um serviço ou API?

Relate problemas na página Ajuda + Suporte do Azure selecionando o botão Criar uma solicitação de suporte.

Onde obtenho ajuda técnica para o Azure Mapas?

• Para perguntas relacionadas ao visual do Azure Mapas no Power BI, entre em contato Suporte do Power BI.

• Para todos os outros serviços do Azure Mapas, entre em contato com o suporte do Azure.

• Para perguntas ou comentários sobre recursos específicos do Azure Mapas, use os fóruns de desenvolvedores do Azure Mapas.

Próximas etapas

Consulte os artigos a seguir para obter mais dicas sobre como melhorar a experiência do usuário em seu aplicativo.

Tornar seu aplicativo acessível

Saiba mais sobre a terminologia usada pelo Azure Mapas e pelo setor geoespacial.

Glossário do Azure Mapas