Práticas recomendadas do SDK da Web do Azure Maps

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

O SDK da Web do Azure Maps fornece uma tela poderosa para renderizar grandes conjuntos de dados espaciais de muitas maneiras diferentes. Em alguns casos, há várias maneiras de renderizar dados da mesma maneira, mas dependendo do tamanho do conjunto de dados e da funcionalidade desejada, um método pode ter um desempenho melhor do que outros. Este artigo destaca as melhores práticas, dicas e truques para maximizar o desempenho e criar uma experiência de usuário suave.

Geralmente, ao procurar melhorar o desempenho do mapa, procure maneiras de reduzir o número de camadas e fontes, e a complexidade dos conjuntos de dados e estilos de renderização que estão sendo usados.

Melhores práticas de segurança

Para obter mais informações sobre práticas recomendadas de segurança, consulte Práticas recomendadas de autenticação e autorização.

Usar as versões mais recentes do Azure Maps

Os SDKs do Azure Maps passam por testes de segurança regulares, juntamente com quaisquer bibliotecas de dependência externas usadas pelos SDKs. Qualquer problema de segurança conhecido é corrigido em tempo hábil e liberado para produção. Se o seu aplicativo apontar para a versão principal mais recente da versão hospedada do SDK da Web do Azure Maps, ele receberá automaticamente todas as atualizações de versão secundária que incluem correções relacionadas à segurança.

Se hospedar automaticamente o SDK da Web do Azure Maps por meio do módulo npm, certifique-se de usar o símbolo de acento circunflexo (^) em combinação com o número da versão do pacote npm do Azure Maps em seu package.json arquivo para que ele aponte para a versão secundária mais recente.

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

Gorjeta

Use sempre a versão mais recente do npm Azure Maps Control. Para obter mais informações, consulte azure-maps-control na documentação do npm.

Otimizar a carga inicial do mapa

Quando uma página da Web está carregando, uma das primeiras coisas que você deseja fazer é começar a renderizar algo o mais rápido possível para que o usuário não fique olhando para uma tela em branco.

Assista ao evento de mapas prontos

Da mesma forma, quando o mapa é carregado inicialmente, é desejável carregar dados nele o mais rápido possível, para que o usuário não esteja olhando para um mapa vazio. Como o mapa carrega recursos de forma assíncrona, você precisa esperar até que o mapa esteja pronto para ser interagido antes de tentar renderizar seus próprios dados nele. Há dois eventos que você pode esperar, um load evento e um ready evento. O evento load será acionado depois que o mapa terminar de carregar a visualização inicial do mapa e cada bloco do mapa tiver sido carregado. Se você vir um erro "O estilo não terminou de carregar", use o load evento e aguarde que o estilo seja totalmente carregado.

O evento ready é acionado quando os recursos mínimos do mapa necessários para começar a interagir com o mapa. Mais precisamente, o ready evento é acionado quando o mapa está carregando os dados de estilo pela primeira vez. O evento ready pode ser acionado na metade do tempo do evento de carregamento e, portanto, permitir que você comece a carregar seus dados no mapa mais cedo. Evite fazer alterações no estilo ou idioma do mapa neste momento, pois isso pode desencadear uma recarga de estilo.

Carregar com preguiça o SDK da Web do Azure Maps

Se o mapa não for necessário imediatamente, carregue o SDK da Web do Azure Maps até que seja necessário. Isso atrasa o carregamento dos arquivos JavaScript e CSS usados pelo SDK da Web do Azure Maps até que seja necessário. Um cenário comum em que isso ocorre é quando o mapa é carregado em uma guia ou painel suspenso que não é exibido no carregamento da página.

O exemplo de código Lazy Load the Map mostra como atrasar o carregamento do SDK da Web do Azure Maps até que um botão seja pressionado. Para obter o código-fonte, consulte Lazy Load the Map sample code.

Adicionar um espaço reservado para o mapa

Se o mapa demorar um pouco para carregar devido a limitações de rede ou outras prioridades em seu aplicativo, considere adicionar uma pequena imagem de plano de fundo ao mapa div como um espaço reservado para o mapa. Isso preenche o vazio do mapa div enquanto ele está carregando.

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

Muitas vezes, os aplicativos querem carregar o mapa para um local ou estilo específico. Às vezes, os desenvolvedores esperam até que o mapa seja carregado (ou aguarde o ready evento) e, em seguida, usam as setCamera funções ou setStyle do mapa. Isso geralmente leva mais tempo para chegar à visualização de mapa inicial desejada, já que muitos recursos acabam sendo carregados por padrão antes que os recursos necessários para a visualização de mapa desejada sejam carregados. Uma abordagem melhor é passar as opções de câmera e estilo de mapa desejadas para o mapa ao inicializá-lo.

Otimizar fontes de dados

O SDK da Web tem duas fontes de dados,

• Origem GeoJSON: A DataSource classe gerencia dados de localização brutos no formato GeoJSON localmente. Bom para pequenos e médios conjuntos de dados (mais de centenas de milhares de recursos).
• Origem do mosaico vetorial: A VectorTileSource classe carrega dados formatados como mosaicos vetoriais para a vista de mapa atual, com base no sistema de mosaico de mapas. Ideal para conjuntos de dados grandes a massivos (milhões ou bilhões de recursos).

Use soluções baseadas em blocos para grandes conjuntos de dados

Se estiver trabalhando com conjuntos de dados maiores contendo milhões de recursos, a maneira recomendada de obter o desempenho ideal é expor os dados usando uma solução do lado do servidor, como o serviço de mosaico de imagem vetorial ou raster.
Os blocos vetoriais são otimizados para carregar apenas os dados que estão em exibição com as geometrias cortadas na área de foco do bloco e generalizadas para corresponder à resolução do mapa para o nível de zoom do bloco.

A plataforma Azure Maps Creator recupera dados em formato de mosaico vetorial. Outros formatos de dados podem estar usando ferramentas como Tippecanoe. Para obter mais informações sobre como trabalhar com blocos vetoriais, consulte o Leiame awesome-vector-tiles do Mapbox no GitHub.

Também é possível criar um serviço personalizado que renderiza conjuntos de dados como blocos de imagem raster no lado do servidor e carregar os dados usando a classe TileLayer no SDK de mapa. Isso proporciona um desempenho excecional, pois o mapa só precisa carregar e gerenciar algumas dezenas de imagens no máximo. No entanto, há algumas limitações com o uso de blocos raster, uma vez que os dados brutos não estão disponíveis localmente. Um serviço secundário é muitas vezes necessário para potencializar qualquer tipo de experiência de interação, por exemplo, descobrir em que forma um usuário clicou. Além disso, o tamanho do arquivo de um bloco raster geralmente é maior do que um bloco vetorial compactado que contém geometrias generalizadas e otimizadas para o nível de zoom.

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

Combine vários conjuntos de dados em uma única fonte de bloco vetorial

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 bloco, a combinação de duas fontes de bloco vetorial juntas reduz o número de solicitações HTTP para recuperar os blocos pela metade, e a quantidade total de dados seria um pouco menor, já que há apenas um cabeçalho de arquivo.

A combinação de vários conjuntos de dados em uma única fonte de mosaico vetorial pode ser obtida usando uma ferramenta como Tippecanoe. Os conjuntos de dados podem ser combinados em uma única coleção de recursos ou separados em camadas separadas dentro do bloco vetorial conhecido como camadas de origem. Ao conectar uma fonte de bloco vetorial 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 a atualizações de dados

Há várias maneiras pelas quais os dados de uma DataSource classe 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 add de dados 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 de tela de 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 looping em um conjunto de dados e chamar essa função para cada recurso.
• A função de fontes de setShapes dados pode ser usada para substituir todas as formas em uma fonte de dados. Nos bastidores, ele combina as fontes clear de dados e add as funções e faz uma única atualização de tela de mapa em vez de duas, o que é mais rápido. Certifique-se de usar essa função quando quiser atualizar todos os dados em uma fonte de dados.
• A função de fontes importDataFromUrl de dados pode ser usada para carregar um arquivo GeoJSON através de uma URL em uma fonte de dados. Depois que os dados forem baixados, eles serão passados para a função de fontes add de dados. Se o arquivo GeoJSON estiver hospedado em um domínio diferente, certifique-se de que o outro domínio ofereça suporte a solicitações entre domínios (CORs). Se não considerar copiar os dados para um arquivo local no seu domínio ou criar um serviço de proxy que tenha CORs habilitados. Se o arquivo for grande, considere convertê-lo em uma fonte de bloco vetorial.
• Se os recursos forem encapsulados com a Shape classe, o addProperty, setCoordinatese setProperties as funções da forma acionarão uma atualização na fonte de dados e uma atualização na tela do mapa. Todos os recursos retornados pelas fontes getShapes de dados e getShapeById funções são automaticamente encapsulados com a Shape classe. Se você quiser atualizar várias formas, é mais rápido convertê-las em JSON usando a função de fontes toJson de dados, editando o GeoJSON e, em seguida, passando esses dados para a função de fontes setShapes de dados.

Evite chamar as fontes de dados de função clear desnecessariamente

Chamar a função clear da classe causa uma atualização de tela de DataSource mapa. Se a clear função for chamada várias vezes seguidas, pode ocorrer um atraso enquanto o mapa aguarda que cada atualização ocorra.

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 seguintes alternativas seriam melhores.

• Limpe os dados antes de baixar os novos dados e, em seguida, passe os novos dados para as fontes add de dados ou setShapes função. Se este for o único conjunto de dados no mapa, o mapa estará vazio enquanto os novos dados são baixados.
• Transfira os novos dados e, em seguida, passe-os para a função de fontes de setShapes dados. Isso substitui todos os dados no mapa.

Remover recursos e propriedades não utilizados

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

• Reduz a quantidade de dados que precisam ser baixados.
• Reduz o número de recursos que precisam ser repetidos ao renderizar os dados.
• Às vezes, pode ajudar a simplificar ou remover expressões e filtros orientados por dados, o que significa menos processamento necessário no tempo de renderização.

Quando os recursos têm várias propriedades ou conteúdo, é muito mais eficiente limitar o que é adicionado à fonte de dados apenas àqueles necessários para renderização e ter um método ou serviço separado para recuperar a outra propriedade ou conteúdo quando necessário. Por exemplo, se você tiver um mapa simples exibindo locais em um mapa quando selecionado, um monte de conteúdo detalhado será exibido. Se você quiser usar o estilo controlado por dados para personalizar como os locais são renderizados no mapa, carregue apenas as propriedades necessárias na fonte de dados. 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ê poderá reduzir a quantidade de dados que precisam ser baixados quando o mapa for carregado inicialmente usando um serviço para recuperá-lo de forma assíncrona.

Além disso, reduzir o número de dígitos significativos nas coordenadas dos recursos também pode reduzir significativamente o tamanho dos dados. Não é incomum que as coordenadas contenham 12 ou mais casas decimais; No entanto, seis casas decimais têm uma precisão de cerca de 0,1 metros, que muitas vezes é mais precisa do que a localização que a coordenada representa (seis casas decimais são recomendadas ao trabalhar com pequenos dados de localização, como layouts de edifícios internos). Ter mais de seis casas decimais provavelmente não fará diferença na forma como os dados são renderizados e exige que o usuário baixe mais dados sem nenhum benefício adicional.

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 coisas como mostrar atualizações ao vivo de dados de streaming ou recursos de animação. Quando uma fonte de dados é atualizada, o mecanismo de renderização faz um loop e renderiza todos os recursos na fonte de dados. Melhore o desempenho geral separando dados estáticos de dados que mudam rapidamente em diferentes fontes de dados, reduzindo o número de recursos rerenderizados durante cada atualização.

Se estiver usando blocos vetoriais com dados dinâmicos, uma maneira fácil de oferecer suporte a atualizações é usar o cabeçalho de expires resposta. Por padrão, qualquer fonte de mosaico vetorial ou camada de mosaico raster recarregará automaticamente os blocos quando a expires data. O fluxo de tráfego e os blocos de incidentes no mapa usam esse recurso para garantir que novos dados de tráfego em tempo real sejam exibidos no mapa. Este recurso pode ser desativado 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 DataSource classe converte dados de localização brutos em blocos vetoriais locais para renderização imediata. Esses blocos vetoriais locais cortam os dados brutos para os limites da área do bloco com um pouco de buffer para garantir uma renderização suave entre blocos. Quanto menor for a buffer opção, menos dados sobrepostos são armazenados nos blocos vetoriais locais e melhor desempenho, no entanto, maior a mudança de artefatos de renderização ocorrendo. Tente ajustar essa opção para obter a combinação certa de desempenho com artefatos de renderização mínimos.

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

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

A DataSource classe converte dados de localização brutos em blocos vetoriais locais para renderização imediata. Por padrão, ele faz isso até o nível de zoom 18, momento em que, quando ampliado mais perto, ele coleta amostras de dados dos blocos gerados para o nível de zoom 18. Isso funciona bem para a maioria dos conjuntos de dados que precisam ter alta resolução quando ampliados nesses níveis. No entanto, ao trabalhar com conjuntos de dados que têm maior probabilidade de serem visualizados quando reduzidos mais, como ao visualizar polígonos de estado ou província, definir a minZoom opção da fonte de dados para um valor menor, como 12 reduz a quantidade de computação, a geração de blocos locais que ocorre e a memória usada pela fonte de dados e aumenta 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 em linha dentro do JavaScript, no entanto, isso usa mais memória, pois cópias dele são armazenadas na variável que você criou para esse objeto e na instância da fonte de dados, que o gerencia em um web worker separado. Exponha o GeoJSON ao seu aplicativo usando uma URL e a fonte de dados carregará uma única cópia dos dados diretamente no web worker das fontes de dados.

Otimizar camadas de renderização

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

Crie camadas uma vez e reutilize-as

O SDK da Web do Azure Maps é orientado por dados. Os dados vão para fontes de dados, que são então conectadas a camadas de renderização. Se você quiser alterar os dados no mapa, atualize os dados na fonte de dados ou altere as opções de estilo em uma camada. Isso geralmente é mais rápido do que remover e, em seguida, recriar camadas a cada alteração.

Considere a camada de bolhas sobre a camada de símbolos

A camada de bolhas renderiza pontos como círculos no mapa e pode facilmente ter seu raio e cor estilizados usando uma expressão orientada por dados. Como o círculo é uma forma simples para o WebGL desenhar, o mecanismo de renderização é capaz de renderizá-lo mais rápido do que uma camada de símbolos, que precisa carregar e renderizar uma imagem. A diferença de desempenho dessas duas camadas de renderização é percetível ao renderizar dezenas de milhares de pontos.

Use marcadores HTML e Popups com moderação

Ao contrário da maioria das camadas no controle Web do Azure Maps que usam WebGL para renderização, Marcadores HTML e Popups usam elementos DOM tradicionais para renderização. Como tal, quanto mais marcadores HTML e Popups adicionaram uma página, mais elementos DOM existem. O desempenho pode degradar-se depois de adicionar algumas centenas de marcadores HTML ou pop-ups. Para conjuntos de dados maiores, considere agrupar seus dados ou usar um símbolo ou uma camada de bolhas.

O exemplo de código Reutilizando pop-up com vários pinos mostra como criar um único pop-up e reutilizá-lo atualizando seu conteúdo e posição. Para obter o código-fonte, consulte Reutilizando o código de exemplo de pop-up com vários pinos.

Dito isto, se você tiver apenas alguns pontos para renderizar no mapa, a simplicidade dos marcadores HTML pode ser preferida. Além disso, os marcadores HTML podem ser facilmente arrastados, se necessário.

Combinar camadas

O mapa é capaz de renderizar centenas de camadas, no entanto, quanto mais camadas houver, mais tempo leva para renderizar uma cena. Uma estratégia para reduzir o número de camadas é combinar camadas que tenham estilos semelhantes ou que possam ser estilizadas usando estilos controlados por dados.

Por exemplo, considere um conjunto de dados onde todos os recursos têm uma isHealthy propriedade que pode ter um valor de true ou false. Se estiver criando uma camada de bolhas que renderiza bolhas coloridas diferentes com base nessa propriedade, há várias maneiras de fazer isso, conforme mostrado na lista a seguir, de menos eficiente a mais eficiente.

• Divida os dados em duas fontes de dados com base no isHealthy valor e anexe uma camada de bolhas com uma opção de cor codificada a cada fonte de dados.
• Coloque todos os dados em uma única fonte de dados e crie duas camadas de bolha com uma opção de cor codificada isHealthy e um filtro com base na propriedade.
• Coloque todos os dados em uma única fonte de dados, crie uma única camada de bolha com uma case expressão de estilo para a opção de cor com base na isHealthy propriedade. Aqui está 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'
    ]
});

Crie animações suaves da camada de símbolos

As camadas de símbolos têm a deteção de colisão ativada por padrão. Esta deteção de colisão visa garantir que não há sobreposição de dois símbolos. As opções de ícone e texto de uma camada de símbolo têm duas opções,

• allowOverlap - especifica se o símbolo é visível quando colide com outros símbolos.
• ignorePlacement - especifica se os outros símbolos podem colidir com o símbolo.

Ambas as opções são definidas como false por padrão. Ao animar um símbolo, os cálculos de deteção de colisão são executados em cada quadro da animação, o que pode tornar a animação mais lenta e torná-la menos fluida. Para suavizar a animação, defina estas opções como true.

O exemplo de código de 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, consulte 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 seguintes critérios, 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 de níveis de zoom.

• Se os dados forem provenientes de uma fonte de bloco vetorial, muitas vezes as camadas de origem para diferentes tipos de dados só estão disponíveis por meio de uma variedade de níveis de zoom.
• Se estiver usando uma camada de blocos que não tenha blocos para todos os níveis de zoom de 0 a 24 e você quiser que ela seja renderizada apenas nos níveis em que tem blocos, e não tente preencher blocos ausentes com blocos de outros níveis de zoom.
• Se você quiser renderizar apenas uma camada em determinados níveis de zoom. Todas as camadas têm uma minZoom opção e maxZoom onde a camada é renderizada quando 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 mosaico e intervalo de zoom de origem

Por padrão, as camadas de mosaico carregam blocos em todo o mundo. No entanto, se o serviço de mosaico tiver apenas mosaicos para uma determinada área, o mapa tentará carregar mosaicos quando estiver fora desta área. Quando isso acontece, uma solicitação para cada bloco é feita e aguarda uma resposta que pode bloquear outras solicitações que estão sendo feitas pelo mapa e, assim, retardar a renderização de outras camadas. Especificar os limites de uma camada de mosaico resulta no mapa apenas solicitando blocos que estão dentro dessa caixa delimitadora. Além disso, se a camada de mosaico 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 cubra 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 fazer isso é quando a sobreposição de um bloco de globo inteiro em não tem opacidade ou área transparente acima do mapa base.

Anime suavemente a imagem ou as camadas de mosaico

Se você quiser animar através de uma série de camadas de imagem ou mosaico no mapa. Muitas vezes, é mais rápido criar uma camada para cada imagem ou camada de mosaico e alterar a opacidade do que atualizar a origem de uma única camada em cada quadro de animação. Ocultar uma camada definindo a opacidade como zero e mostrando uma nova camada definindo sua opacidade para um valor maior que zero é 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 do desvanecimento da camada como zero, caso contrário, ele anima a camada ao exibi-la, o que causa um efeito de cintilação, já que a camada anterior fica oculta antes que a nova camada se torne visível.

Tweak Symbol layer collision detection logic

A camada de símbolos tem duas opções que existem para o ícone e o texto chamado allowOverlap e ignorePlacement. Estas duas opções especificam se o ícone ou o texto de um símbolo pode sobrepor-se ou ser sobreposto. Quando definida 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 isso acontecer, não renderize o símbolo de colisão. Isso é bom para reduzir a desordem no mapa e reduzir o número de objetos renderizados. Ao definir essas opções como false, essa lógica de deteçã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.

Agrupar grandes conjuntos de dados pontuais

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 apenas parcialmente visíveis, se for o caso. Clustering é o processo de agrupar pontos que estão próximos uns dos outros e representá-los como um único ponto agrupado. À medida que o usuário amplia o mapa, os clusters se dividem em seus pontos individuais. Isso pode reduzir significativamente a quantidade de dados que precisam ser renderizados, fazer com que o mapa pareça menos confuso e melhorar o desempenho. A DataSource classe tem opções para agrupar dados localmente. Além disso, muitas ferramentas que geram blocos vetoriais também têm opções de clustering.

Além disso, aumente o tamanho do raio do cluster para melhorar o desempenho. Quanto maior o raio do cluster, menos pontos agrupados há para acompanhar e renderizar. Para obter mais informações, consulte Clustering point data in the Web SDK.

Usar mapas de calor agrupados ponderados

A camada de mapa de calor pode renderizar dezenas de milhares de pontos de dados facilmente. Para conjuntos de dados maiores, considere habilitar o clustering na fonte de dados e usar um pequeno raio de cluster e use a propriedade clusters point_count como um peso para o mapa de altura. Quando o raio do cluster tem apenas alguns pixels de tamanho, há 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, consulte Clustering e a camada de mapas de calor.

Mantenha os recursos de imagem pequenos

As imagens podem ser adicionadas ao sprite de imagem de mapas para renderizar ícones em uma camada de símbolos ou padrões em uma camada de polígono. Mantenha essas imagens pequenas para minimizar a quantidade de dados que precisam ser baixados e a quantidade de espaço que elas ocupam no sprite de imagem dos mapas. Ao usar uma camada de símbolo que dimensiona o ícone usando a size opção, use uma imagem que seja o tamanho máximo que seu plano exiba no mapa e não maior. Isso garante que o ícone seja renderizado com alta resolução, minimizando os recursos que ele usa. Além disso, SVGs também podem ser usados como um formato de arquivo menor para imagens de ícones simples.

Otimizar expressões

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

Reduza a complexidade dos filtros

Os filtros fazem um loop sobre todos os dados em uma fonte de dados e verificam se cada filtro corresponde à lógica no filtro. Se os filtros se tornarem complexos, isso pode causar problemas de desempenho. Algumas estratégias possíveis para resolver este problema incluem o seguinte.

• Se estiver usando blocos vetoriais, divida os dados em diferentes camadas de origem.
• Se estiver usando a DataSource classe, divida esses dados em fontes de dados separadas. Tente equilibrar o número de fontes de dados com a complexidade do filtro. Muitas fontes de dados 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 o uso de várias camadas com expressões de estilo para reduzir a complexidade do filtro. Evite criar um monte de camadas com estilos codificados quando expressões de estilo podem ser usadas como um grande número de camadas também pode causar problemas de desempenho.

Certifique-se de que as expressões não produzem erros

As expressões são frequentemente usadas para gerar código para executar cálculos ou operações lógicas em tempo de renderização. Assim como o código no resto do seu aplicativo, certifique-se de que os cálculos e a lógica façam sentido e não estejam propensos a erros. Erros nas expressões causam problemas na avaliação da expressão, o que pode resultar em problemas de desempenho e renderização reduzidos.

Um erro comum a ser observado é ter uma expressão que depende de uma propriedade de recurso que pode não existir em todos os recursos. Por exemplo, o código a seguir usa uma expressão para definir a propriedade color de uma camada de bolha para a myColor propriedade 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 myColor propriedade 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 que todos os recursos têm uma cor válida em uma myColor propriedade. Dito isso, para tornar esse código seguro contra erros, uma case expressão pode ser usada com a has expressão para verificar se o recurso tem a myColor propriedade. Se isso acontecer, a to-color expressão de tipo pode ser usada para tentar converter o valor dessa propriedade em uma cor. Se a cor for inválida, uma cor de fallback pode ser usada. O código a seguir demonstra como fazer isso e define a cor de fallback como 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 booleanas do mais específico para o menos específico

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

Simplifique expressões

As expressões podem ser poderosas e, por 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]. Neste caso, se a propriedade que está sendo verificada for um valor booleano, uma get expressão seria ainda mais simples ['get','isRestaurant'].

Solução de problemas do SDK da Web

A seguir estão algumas dicas para depurar alguns dos problemas comuns encontrados ao desenvolver com o SDK da Web do Azure Maps.

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

Coisas a verificar:

• Certifique-se de concluir as opções de autenticação no mapa. Sem autenticação, o mapa carrega uma tela em branco e retorna um erro 401 na guia rede das ferramentas de desenvolvedor do navegador.
• Certifique-se de que tem uma ligação à 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 seu aplicativo.
• Certifique-se de que está a utilizar um browser suportado.

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

As coordenadas, também conhecidas como posições, nos SDKs do Azure Maps estão alinhadas com o formato padrão do setor geoespacial de [longitude, latitude]. Este mesmo formato é também como as coordenadas são definidas no esquema GeoJSON; os dados principais formatados usados nos SDKs do Azure Maps. Se os seus dados estão a aparecer no lado oposto do mundo, é mais provável que seja devido aos valores de longitude e latitude estarem a ser invertidos nas suas informações de coordenadas/posição.

Por que os marcadores HTML estão aparecendo no lugar errado no controle da Web?

Coisas a verificar:

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

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

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

Se o símbolo só estiver fora do lugar quando o mapa estiver inclinado/inclinado, marque a pitchAlignment opção. Por padrão, os símbolos permanecem na posição vertical no visor dos mapas quando o mapa é inclinado ou inclinado. No entanto, dependendo do seu cenário, pode ser desejável bloquear o símbolo no passo do mapa definindo a pitchAlignment opção como map.

Porque é que nenhum dos meus dados aparece no mapa?

Coisas a verificar:

• Verifique se há erros no console nas ferramentas de desenvolvedor do navegador.
• 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 em seu 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 expressões controladas por dados da camada de renderização. É possível que um deles tenha um erro que esteja causando o problema.

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

Sim.

Obter suporte

A seguir estão as diferentes maneiras de obter suporte para o Azure Maps, dependendo do seu problema.

Como faço para relatar um problema de dados ou um problema com um endereço?

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

Nota

Cada problema enviado gera um URL exclusivo para rastreá-lo. 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, serão atualizados mensalmente.

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

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

Onde posso obter ajuda técnica para o Azure Maps?

• Para perguntas relacionadas ao visual do Power BI do Azure Maps, entre em contato com o suporte do Power BI.

• Para todos os outros serviços do Azure Maps, contacte o suporte do Azure.

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

Próximos passos

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

Torne a sua aplicação acessível

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

Glossário do Azure Maps