Práticas recomendadas para o 3D Maps

Este guia oferece uma análise detalhada dos componentes da Web do Maps 3D e considerações ao fazer a integração com seu aplicativo.

Exemplo de pesquisa de lugar e localização de rotas.

Considerações sobre desempenho

Para garantir uma experiência tranquila e responsiva para interatividade e elementos visuais, considere as seguintes abordagens.

Carregar o mapa

A configuração inicial de carregamento e renderização do Maps 3D combina técnicas de configuração do navegador e práticas recomendadas de interface para uma experiência ideal do usuário.

• Carregamento da API: use o carregamento dinâmico assíncrono do Maps 3D para carregar a API Maps JavaScript no carregamento inicial da página.
• Bibliotecas: carregue bibliotecas programaticamente quando necessário, como google.maps.importLibrary("maps3d"). Como alternativa, se você usar componentes da Web como <gmp-map-3d> diretamente na página HTML com carregamento de script, as bibliotecas serão carregadas automaticamente no momento apropriado.
• Gerenciar recursos do mapa base:use um mapId personalizado para filtrar PDIs do mapa base (modo HÍBRIDO) e controlar a densidade deles, especialmente se o aplicativo tiver um conjunto próprio de elementos personalizados, como marcadores ou polilinhas. Isso evita a poluição visual e a possível sobreposição. Como alternativa, você pode desativar recursos de blocos vetoriais do mapa base, como PDIs, polilinhas de estradas, nomes de estradas e nomes de ruas (modo SATÉLITE).
• Eventos: ouça eventos gmp-steadystate ou gmp-error para criar sua lógica subsequente, como carregar marcadores e animar a câmera.

Tela de fundo > Blocos minimizados > Malha de terreno > Malha de superfície (por exemplo, edifícios) > Pontos de interesse e rótulos de estradas, elementos personalizados sendo carregados em paralelo (marcadores, modelos 3D etc.)

• Interação do usuário:aguarde o evento gmp-steadystate antes de fazer mudanças no conteúdo do mapa. Se um usuário começar a interagir (panorâmica, zoom) com o mapa antes do gmp-steadystate evento inicial, o evento só será acionado depois que o usuário parar de interagir. Evite mostrar ou atualizar o conteúdo da sobreposição (como marcadores ou polígonos) enquanto o usuário faz a panorâmica ou o zoom do mapa. Para isso, ouça gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange.

• Use requestAnimationFrame() (rAF) para atualizações contínuas e separe estritamente cálculos intensivos de chamadas de desenho.

  • Use rAF: sincroniza atualizações com a taxa de exibição do navegador para animação suave de 60 FPS e consumo de energia reduzido.
  • Evite trabalhos de desenho intensivos: não execute tarefas pesadas que não sejam de desenho durante a atualização final.
  • Lógica separada: execute toda a lógica intensiva antes de chamadas de atualização de componentes da Web mínimas no loop rAF.

• Configurações iniciais da cena: <gmp-map-3d> as configurações da câmera, como a inclinação, afetam a velocidade de carregamento. Quanto mais a cena for ampliada ou inclinada, mais polígonos detalhados serão mostrados e exigirão carregamento. O nível de detalhes também depende do local (por exemplo, uma cidade com muitos edifícios em comparação com o campo com apenas recursos naturais).

  • Prefira visualizações menos ampliadas (alta altitude), baixas ou não inclinadas.
  • Adicione limites (exemplo) ao mapa para que os usuários permaneçam focados em uma área específica e os blocos possam ser carregados totalmente.

• Visual do pré-carregador: embora <gmp-map-3d> seja carregado muito rapidamente, pode levar algum tempo para ser mostrado em resolução total para usuários com dispositivos de baixa qualidade (GPU baixa) ou largura de banda (4G lento). Nesse caso, você pode criar um pré-carregador com imagem, animação ou texto com a cena 3D carregando em segundo plano. Confira o evento principal a ser usado abaixo:

Exemplo de pré-carregador

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

• Mapa 2D:
  • Um mapa 2D alternativo (SATÉLITE) pode ser entregue a esses usuários, incluindo seus dados geográficos, como marcadores.

• Como alternativa, um mapa estático 2D complementar no modo SATÉLITE pode ser mostrado para que os usuários visualizem um determinado lugar durante o carregamento.

Observação: cada carregamento de mapa 2D e 3D é cobrado separadamente. Portanto, renderize o segundo mapa apenas quando os usuários quiserem interagir com ele.

Desempenho e gerenciamento de elementos visuais

O Maps 3D oferece várias maneiras de mostrar elementos visuais, como marcadores, polígonos, polilinhas e modelos 3D, com desempenho ideal e tempo mínimo de renderização, mesmo para visuais de maior volume.

Marcadores

Exemplo de cenário: 150 a 300 ms para carregar 300 marcadores com 41 glifos de marcadores SVG diferentes (notebook moderno: macOS M3 Pro, Chrome)

• Opção de personalização ideal:
  • PinElement:para mudanças básicas de marcador (cor, escala, borda, glifo de texto ), use o elemento <gmp-pin> ou a classe PinElement. Esse é o método de personalização mais eficiente.
  • Use marcadores HTMLImageElement ou SVGElement com moderação: use para mais personalização, como adicionar transparência ou inserir uma imagem, como um ícone, em um SVGElement (requer codificação base64). Eles serão rasterizados no carregamento e envolverão sobrecarga de desempenho. HTMLImageElement e SVGElement precisam ser encapsulados no <template> elemento antes de serem atribuídos ao slot padrão do Marker3DElement.
  • A adição de HTML ou CSS simples não está disponível no momento.
• Gerenciar o comportamento de colisão: aproveite a propriedade collisionBehavior do marcador. Para marcadores críticos que precisam estar sempre visíveis, defina o comportamento de acordo. Para marcadores menos importantes, permita que eles sejam ocultados para manter uma experiência de mapa mais limpa e menos confusa, especialmente em níveis de zoom altos.
• Somente PDIs críticos: use drawsWhenOccluded (ou defina a propriedade programaticamente) apenas para marcadores que precisam ser vistos em edifícios ou terrenos (por exemplo, um alvo de resgate, uma linha de utilidade enterrada ou o avatar de um usuário).
• Testar oclusão:como o mapa é 3D, os marcadores podem ser visualmente obscurecidos (ocluídos) por edifícios ou terrenos. Teste diferentes ângulos de câmera e altitudes de marcador para garantir que os PDIs importantes permaneçam visíveis ou implemente uma lógica para ajustar a visibilidade e a altitude quando ocluídos.
• Aproveitar a altitude:em mapas 3D, os marcadores precisam usar a posição com um valor de altitude. Para marcadores associados ao terreno ou edifícios, use altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' ou configurações semelhantes para garantir que o marcador seja ancorado corretamente quando o mapa estiver inclinado ou girado.

Polígonos e polilinhas

Exemplo de cenário: 100 a 150 ms para carregar 1.000 polígonos (notebook moderno: macOS M3 Pro, Chrome)

• Simplificar a geometria: antes da renderização, aplique um algoritmo de simplificação aos dados do caminho. Isso reduz o número de vértices, mantendo a forma geral, melhorando drasticamente a velocidade de renderização, especialmente para limites ou rotas complexas.
• Decimação por nível de zoom: para conjuntos de dados muito grandes, considere carregar a geometria de maior detalhe apenas quando o usuário fizer zoom na área. Em um nível de zoom baixo, apenas uma versão altamente simplificada da polilinha ou do polígono é necessária.
• Pré-calcular polígonos extrudados: se os polígonos forem extrudados (extruded: true), os dados do caminho definirão um volume 3D (uma malha). O processamento de polígonos complexos de alto vértice é caro do ponto de vista computacional. Garanta que os dados de origem dos polígonos sejam o mais simples possível.
• Testar o desempenho de polilinhas e polígonos:ao adicionar polilinhas/polígonos numerosos ou complexos, especialmente quando extrudados para 3D, verifique se eles não causam quedas na taxa de frames. Limite o número de vértices ou use algoritmos de simplificação, se necessário.
• Ao atualizar uma forma, modifique toda a matriz de caminho em uma única operação, em vez de fazer um loop e modificar elementos individuais. Uma única operação de atribuição (por exemplo, polyline.path = newPathArray;) é muito mais eficiente do que várias atualizações iterativas.
• Evite polilinhas extrudadas (sempre que possível): embora as polilinhas possam usar um valor de altitude para serem colocadas no espaço 3D, a extrusão de uma polilinha (por exemplo, a ela uma largura de traço e um grande intervalo de altitude) pode ser graficamente intensa. Sempre que possível, use polilinhas 2D no chão (RELATIVE_TO_GROUND) ou uma largura de traço mínima para melhor desempenho.
• Use drawsOccludedSegments apenas para elementos de roteamento críticos. Para formas de plano de fundo ou contextuais, permita que elas sejam naturalmente ocluídas pela geometria 3D do mapa. Mostrar geometria oculta não crítica adiciona complexidade de renderização desnecessária.

Modelos 3D

A renderização e a interatividade do modelo 3D .glb, como o evento gmp-click, são muito rápidas em <gmp-map-3d>.

Exemplo de cenário: leva cerca de 2 segundos para mostrar 1.000 ocorrências de um modelo 3D leve (200 KB) se movendo ao longo de um caminho. (notebook moderno: macOS M3 Pro, Chrome)

• Minimize o tamanho do arquivo com compactação: para garantir o carregamento rápido, especialmente em redes móveis, mantenha arquivos de modelo .glb complexos com menos de 5 MB (idealmente menos). O método principal para isso é aplicar a compactação Draco nos dados de malha nos seus arquivos .glb, o que pode reduzir significativamente o tamanho do arquivo (geralmente em mais de 50%) com perda mínima de qualidade visual.
• Centralizar a origem do modelo:verifique se o software de modelagem 3D exporta o modelo com a origem (ponto 0, 0, 0) centralizada na base do modelo. Isso simplifica o posicionamento e a rotação no mapa, garantindo que o modelo seja ancorado corretamente nas coordenadas de latitude e longitude.
• Gerenciar o CORS: se os arquivos de modelo estiverem hospedados em um domínio ou CDN diferente do aplicativo da Web, você precisará configurar o servidor de hospedagem para incluir os cabeçalhos de Compartilhamento de recursos entre origens (CORS) necessários (por exemplo, Access-Control-Allow-Origin: *). Caso contrário, o mapa não poderá carregar o modelo.