Best practice per 3D Maps

Questa guida fornisce una panoramica dettagliata dei componenti web di 3D Maps e delle considerazioni da fare per l'integrazione con la tua applicazione.

Esempio di Place Search e ricerca percorsi.

Considerazioni sulle prestazioni

Per garantire un'esperienza fluida e reattiva per l'interattività e gli elementi visivi, prendi in considerazione i seguenti approcci.

Carica la mappa

La configurazione iniziale del caricamento e del rendering delle mappe 3D combina tecniche di configurazione del browser e best practice per l'interfaccia utente per un'esperienza utente ottimale.

• Caricamento API: utilizza il caricamento dinamico asincrono di 3D Maps per caricare l'API Maps JavaScript al caricamento iniziale della pagina.
• Librerie: carica le librerie in modo programmatico dove necessario, ad esempio google.maps.importLibrary("maps3d"). In alternativa, se utilizzi componenti web come <gmp-map-3d> direttamente nella tua pagina HTML con il caricamento diretto degli script, le librerie verranno caricate automaticamente al momento opportuno.
• Gestisci le funzionalità della mappa base:utilizza un mapId personalizzato per filtrare i PDI della mappa base (modalità HYBRID) e controllarne la densità, soprattutto se l'applicazione ha un proprio insieme di elementi personalizzati, come indicatori o polilinee. In questo modo si evita il disordine visivo e la potenziale sovrapposizione. In alternativa, puoi disattivare le funzionalità dei riquadri vettoriali della mappa base, come i POI, le polilinee delle strade, i nomi delle strade e i nomi delle vie (modalità SATELLITE).
• Eventi: ascolta gli eventi gmp-steadystate o gmp-error per creare la logica successiva, ad esempio il caricamento degli indicatori o l'animazione della fotocamera.

Background canvas > Minified tiles > Terrain mesh > Surface mesh (e.g.:buildings) > Points of Interest & Road labels, Custom elements being loaded in parallel (markers, 3d models, etc.)

• Interazione dell'utente:attendi l'evento gmp-steadystate prima di apportare modifiche ai contenuti della mappa. Se un utente inizia a interagire (panoramica, zoom) con la mappa prima dell'evento gmp-steadystate iniziale, l'evento verrà attivato solo dopo che l'utente interrompe l'interazione. Evita di visualizzare o aggiornare i contenuti in overlay (come indicatori o poligoni) mentre l'utente fa una panoramica o uno zoom della mappa, evita di visualizzare o aggiornare i contenuti in overlay (come indicatori o poligoni) ascoltando gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange, gmp-tiltchange.

• Utilizza requestAnimationFrame() (rAF) per aggiornamenti continui e separa rigorosamente i calcoli intensivi dalle chiamate di disegno.

  • Utilizza rAF: sincronizza gli aggiornamenti con la frequenza di visualizzazione del browser per un'animazione fluida a 60 f/s e un consumo energetico ridotto.
  • Evita operazioni di disegno intensive: non eseguire attività pesanti non di disegno durante l'aggiornamento finale.
  • Separa la logica: esegui tutta la logica intensiva prima delle chiamate di aggiornamento dei componenti web minimi all'interno del loop rAF.

• Impostazioni iniziali della scena: le impostazioni della fotocamera <gmp-map-3d>, come l'inclinazione, influiscono sulla velocità di caricamento. Più la scena viene ingrandita o inclinata, più poligoni dettagliati verranno visualizzati e dovranno essere caricati. Il livello di dettaglio dipenderà anche dalla località (ad es. una città con molti edifici rispetto a una campagna con solo elementi naturali).

  • Preferisci visualizzazioni meno ingrandite (altitudine elevata), basse o non inclinate.
  • Aggiungi i limiti (esempio) alla mappa in modo che gli utenti rimangano concentrati su un'area specifica e i riquadri possano essere caricati completamente.

• Immagine di precaricamento: sebbene <gmp-map-3d> si carichi molto velocemente, potrebbe essere necessario un po' di tempo per visualizzarlo alla massima risoluzione per gli utenti con dispositivi di fascia bassa (GPU bassa) o larghezza di banda ridotta (4G lento). In questo caso, puoi creare un precaricatore con un'immagine, un'animazione o un testo con la scena 3D caricata in background. Consulta l'evento chiave da utilizzare di seguito:

Esempio di precaricatore

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

• Mappa 2D:
  • A questi utenti può essere fornita una mappa 2D alternativa (SATELLITE) che include comunque i tuoi dati geografici, ad esempio gli indicatori.

• In alternativa, è possibile visualizzare una mappa statica 2D complementare in modalità SATELLITE per consentire agli utenti di visualizzare un determinato luogo durante il caricamento.

Nota: al momento, ogni caricamento di mappe 2D e 3D viene fatturato separatamente, quindi esegui il rendering della seconda mappa solo quando gli utenti intendono interagire con essa.

Rendimento e gestione degli elementi visivi

3D Maps offre diversi modi per visualizzare elementi visivi come indicatori, polilinee e modelli 3D con prestazioni ottimali e tempi di rendering minimi, anche per immagini di volume più elevato.

Indicatori

Scenario di esempio: 150-300 ms per caricare 300 indicatori con 41 glifi di indicatori svg diversi (laptop moderno: macOS M3 Pro, Chrome)

• Scelta di personalizzazione ottimale:
  • PinElement: per le modifiche di base dei segnaposto (colore, scala, bordo, glifo di testo), utilizza l'elemento <gmp-pin> o la classe PinElement. Questo è il metodo di personalizzazione più efficiente.
  • Utilizza con parsimonia i marker HTMLImageElement o SVGElement: utilizzali per una maggiore personalizzazione, ad esempio per aggiungere trasparenza o inserire un'immagine come un'icona in un SVGElement (richiede la codifica base64). Verranno rasterizzati al caricamento e comporteranno un overhead delle prestazioni. HTMLImageElement e SVGElement devono essere inseriti nell'elemento <template> prima di essere assegnati allo slot predefinito di Marker3DElement.
  • Al momento non è possibile aggiungere HTML o CSS semplice.
• Gestisci il comportamento della sovrapposizione: sfrutta la proprietà collisionBehavior dell'indicatore. Per gli indicatori critici che devono essere sempre visibili, imposta il comportamento di conseguenza. Per gli indicatori meno importanti, consenti di nasconderli per mantenere un'esperienza di mappa più pulita e meno disordinata, soprattutto a livelli di zoom elevati.
• Solo PDI critici: utilizza drawsWhenOccluded (o imposta la proprietà in modo programmatico) solo per i marker che devono essere visti attraverso edifici o terreno (ad es. un obiettivo di salvataggio, una linea di servizi pubblici interrata o l'avatar di un utente).
• Testa l'occlusione: poiché la mappa è in 3D, gli indicatori possono essere oscurati visivamente (occlusi) da edifici o dal terreno. Testa diverse angolazioni della fotocamera e altitudini degli indicatori per assicurarti che i PDI cruciali rimangano visibili o implementa la logica per regolare la visibilità e l'altitudine quando sono nascosti.
• Sfrutta l'altitudine:nelle mappe 3D, gli indicatori devono utilizzare la posizione con un valore di altitudine. Per gli indicatori associati al terreno o agli edifici, utilizza altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' o impostazioni simili per assicurarti che l'indicatore sia ancorato correttamente quando la mappa viene inclinata o ruotata.

Poligoni e polilinee

Scenario di esempio: 100-150 ms per caricare 1000 poligoni (laptop moderno: macOS M3 Pro, Chrome)

• Semplifica la geometria: prima del rendering, applica un algoritmo di semplificazione ai dati del percorso. In questo modo, il numero di vertici viene ridotto, mantenendo la forma generale e migliorando drasticamente la velocità di rendering, soprattutto per confini o percorsi complessi.
• Decimazione per livello di zoom: per set di dati molto grandi, valuta la possibilità di caricare la geometria con dettagli più elevati solo quando l'utente aumenta lo zoom sull'area. A un livello di zoom basso, è necessaria solo una versione molto semplificata della polilinea o del poligono.
• Precalcola per i poligoni estrusi: se i poligoni sono estrusi (extruded: true), i dati del percorso definiscono un volume 3D (una mesh). L'elaborazione di poligoni complessi con un numero elevato di vertici è costosa dal punto di vista computazionale. Assicurati che i dati di origine dei poligoni siano il più semplici possibile.
• Testa le prestazioni di polilinee e poligoni: quando aggiungi polilinee/poligoni numerosi o complessi, soprattutto se estrusi per il 3D, assicurati che non causino cali della frequenza fotogrammi. Limita il numero di vertici o utilizza algoritmi di semplificazione, se necessario.
• Quando aggiorni una forma, modifica l'intero array path in un'unica operazione anziché eseguire un loop e modificare i singoli elementi. Una singola operazione di assegnazione (ad es. polyline.path = newPathArray;) è molto più efficiente di più aggiornamenti iterativi.
• Evita le polilinee estruse (dove possibile): sebbene le polilinee possano utilizzare un valore di altitudine per essere posizionate nello spazio 3D, l'estrusione di una polilinea (ad esempio, assegnandole una larghezza del tratto e un intervallo di altitudine elevato) può essere graficamente intensiva. Quando possibile, utilizza polilinee 2D sul terreno (RELATIVE_TO_GROUND) o una larghezza del tratto minima per migliorare le prestazioni.
• Utilizza drawsOccludedSegments solo per gli elementi di routing critici. Per le forme di sfondo o contestuali, consenti che vengano naturalmente nascoste dalla geometria 3D della mappa. La visualizzazione della geometria nascosta non critica aggiunge una complessità di rendering non necessaria.

Modelli 3D

Il rendering e l'interattività del modello 3D .glb, ad esempio l'evento di clic gmp-click, sono molto rapidi in <gmp-map-3d>.

Scenario di esempio: sono necessari circa 2 secondi per visualizzare 1000 occorrenze di un modello 3D leggero (200 kB) che si muove lungo un percorso. (laptop moderno: macOS M3 Pro, Chrome)

• Riduci al minimo le dimensioni dei file con la compressione: per garantire un caricamento rapido, soprattutto sulle reti mobili, mantieni i file di modelli .glb complessi al di sotto di 5 MB (idealmente meno). Il metodo principale per raggiungere questo obiettivo è applicare la compressione Draco ai dati della mesh all'interno dei file .glb, il che può ridurre significativamente le dimensioni del file (spesso di oltre il 50%) con una perdita minima della qualità visiva.
• Centra l'origine del modello:assicurati che il software di modellazione 3D esporti il modello con l'origine (punto 0, 0, 0) centrata alla base del modello. In questo modo, il posizionamento e la rotazione sulla mappa sono più semplici e il modello viene ancorato correttamente alle coordinate di latitudine e longitudine.
• Gestisci CORS: se i file del modello sono ospitati su un dominio o una CDN diversi da quelli della tua applicazione web, devi configurare il server di hosting in modo che includa le intestazioni CORS (Cross-Origin Resource Sharing) necessarie (ad es. Access-Control-Allow-Origin: *). In caso contrario, la mappa non può caricare il modello.