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 integrar com seu aplicativo.

Exemplo de pesquisa de lugar e como encontrar um trajeto.

Considerações sobre desempenho

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

Carregar o mapa

A configuração inicial de carregamento e renderização dos mapas 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 dos mapas 3D para carregar a API Maps JavaScript no carregamento inicial da página.
• Bibliotecas: carregue bibliotecas de maneira programática quando necessário, como google.maps.importLibrary("maps3d"). Como alternativa, se você usar componentes da Web, como <gmp-map-3d>, diretamente na sua página HTML com carregamento direto de script, as bibliotecas serão carregadas automaticamente no momento adequado.
• Gerenciar recursos do mapa de base:use um mapId personalizado para filtrar PDIs do mapa de base (modo HÍBRIDO) e controlar a densidade deles, principalmente se o aplicativo tiver um conjunto próprio de elementos personalizados, como marcadores ou polilinhas. Isso evita poluição visual e possível sobreposição. Como alternativa, desative os recursos de blocos vetoriais do mapa de base, como POIs, polilinhas de vias, nomes de vias e nomes de ruas (modo SATÉLITE).
• Eventos: detecte 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 vias, elementos personalizados 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 evento inicial gmp-steadystate, o evento só será acionado depois que o usuário parar de interagir. Evite mostrar ou atualizar conteúdo de sobreposição (como marcadores ou polígonos) enquanto o usuário move ou aumenta o zoom do mapa. Para isso, ouça os eventos gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange e gmp-tiltchange.

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

  • Use o 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 trabalho de desenho intenso: 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 das chamadas de atualização mínimas de componentes da Web no loop rAF.

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

  • Prefira imagens menos ampliadas (alta altitude) e com pouca ou nenhuma inclinação.
  • Adicione limites (exemplo) ao mapa para que os usuários fiquem focados em uma área específica e os blocos possam ser carregados por completo.

• Visualização do pré-carregador: embora o <gmp-map-3d> carregue muito rápido, pode levar algum tempo para ser exibido em resolução total para usuários com dispositivos de baixo custo (GPU baixa) ou largura de banda (4G lento). Nesse caso, você pode criar um pré-carregador com imagem, animação ou texto com o carregamento da cena 3D 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.

• Outra opção é mostrar um mapa estático 2D complementar no modo SATÉLITE para que os usuários visualizem um determinado lugar enquanto ele carrega.

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

Performance e gerenciamento de elementos visuais

Os mapas 3D oferecem várias maneiras de mostrar elementos visuais, como marcadores, polilinhas, polígonos 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 marcador svg diferentes (laptop 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). Elas serão rasterizadas no carregamento e envolvem sobrecarga de desempenho. HTMLImageElement e SVGElement precisam ser envolvidos em um elemento <template> antes de serem atribuídos ao slot padrão do Marker3DElement.
  • No momento, não é possível adicionar HTML ou CSS simples.
• Gerenciar o comportamento em caso de conflito: 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 POIs críticos: use drawsWhenOccluded (ou defina a propriedade de forma programática) apenas para marcadores que precisam ser vistos através de edifícios ou terrenos (por exemplo, um alvo de resgate, uma linha de utilidade enterrada ou o avatar de um usuário).
• Teste de 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 POIs importantes permaneçam visíveis ou implemente uma lógica para ajustar a visibilidade e a altitude quando estiverem ocultos.
• Aproveitar a altitude:em mapas 3D, os marcadores devem usar a posição com um valor de altitude. Para marcadores associados ao terreno ou a 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 for inclinado ou girado.

Polígonos e polilinhas

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

• Simplificar geometria: antes da renderização, aplique um algoritmo de simplificação aos dados de caminho. Isso reduz o número de vértices, mantendo a forma geral e 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, carregue a geometria de maior detalhe somente quando o usuário aumentar o 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é-cálculo para polígonos extrudados: se os polígonos forem extrudados (extruded: true), os dados de caminho vão definir um volume 3D (uma malha). O processamento de polígonos complexos com muitos vértices é caro do ponto de vista computacional. Verifique se os dados de origem dos seus polígonos são o mais simples possível.
• Teste o desempenho de polilinhas e polígonos:ao adicionar várias polilinhas/polígonos complexos, principalmente 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 caminhos 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, extrudar uma polilinha (por exemplo, atribuindo a ela uma largura de traço e um grande intervalo de altitude) pode ser graficamente intenso. Sempre que possível, use polilinhas 2D no chão (RELATIVE_TO_GROUND) ou uma largura de traço mínima para melhorar a performance.
• 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 de modelos 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. (laptop moderno: macOS M3 Pro, Chrome)

• Minimize o tamanho do arquivo com compactação: para garantir um carregamento rápido, especialmente em redes móveis, mantenha arquivos de modelo .glb complexos com menos de 5 MB (idealmente menos). O principal método para isso é aplicar a compactação Draco aos dados de malha nos 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. Isso simplifica o posicionamento e a rotação no mapa, garantindo que o modelo seja ancorado corretamente nas coordenadas de latitude e longitude.
• Gerenciar CORS: se os arquivos do modelo estiverem hospedados em um domínio ou CDN diferente do aplicativo da Web, configure o servidor de hospedagem para incluir os cabeçalhos necessários de compartilhamento de recursos entre origens (CORS), por exemplo, Access-Control-Allow-Origin: *). Caso contrário, o mapa não poderá carregar o modelo.