Best practice per 3D Maps

Questa guida fornisce uno sguardo dettagliato ai componenti web di Maps 3D e alle considerazioni da fare durante l'integrazione con la tua applicazione.

Esempio di ricerca di luoghi e ricerca di percorsi.

Considerazioni sulle prestazioni

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

Caricare la mappa

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

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

Canvas di sfondo > Riquadri ridotti > Mesh del terreno > Mesh della superficie (ad es. edifici) > Etichette di PDI e strade, elementi personalizzati caricati in parallelo (indicatori, modelli 3D e così via)

• Interazione 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 smette di interagire. Evita di visualizzare o aggiornare i contenuti di overlay (come indicatori o poligoni) mentre l'utente esegue la panoramica o lo zoom della mappa, evitando di visualizzare o aggiornare i contenuti di overlay contenuti (come indicatori o poligoni) ascoltando gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange.

• Utilizza requestAnimationFrame() (rAF) per gli 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 FPS e un consumo energetico ridotto.
  • Evita un lavoro di disegno intensivo: non eseguire attività pesanti e non di disegno durante l'aggiornamento finale.
  • Logica separata: esegui tutta la logica intensiva prima delle chiamate di aggiornamento dei componenti web minimi all'interno del loop rAF.

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

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

• Visualizzazione del precaricatore: anche se <gmp-map-3d> viene caricato molto rapidamente, potrebbe essere necessario un po' di tempo per visualizzarlo in piena risoluzione per gli utenti con dispositivi di fascia bassa (GPU bassa) o larghezza di banda (4G lento). In questo caso, puoi creare un precaricatore con immagine, animazione o testo con la scena 3D caricata in background. Di seguito sono riportati gli eventi chiave da utilizzare:

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:
  • Una mappa 2D alternativa (SATELLITE) può essere fornita a questi utenti includendo comunque i 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: per il momento, il caricamento di ogni mappa 2D e 3D viene fatturato separatamente, quindi esegui il rendering della seconda mappa solo quando gli utenti intendono interagire con essa.

Prestazioni e gestione degli elementi visivi

Maps 3D offre diversi modi per visualizzare elementi visivi come indicatori, polilinee, poligoni 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 degli indicatori (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 gli indicatori 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 racchiusi nell'elemento <template> prima di essere assegnati allo slot predefinito di Marker3DElement.
  • Per il momento non è possibile aggiungere HTML o CSS semplici.
• Gestire il comportamento di collisione: 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 loro di nascondersi 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à a livello di programmazione) solo per gli indicatori che devono essere visualizzati attraverso edifici o terreni (ad es. un obiettivo di salvataggio, una linea di utilità interrata o l'avatar di un utente).
• Testare l'occlusione:poiché la mappa è in 3D, gli indicatori possono essere oscurati visivamente (occlusi) da edifici o rilievi. Prova diverse angolazioni della videocamera 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 occlusi.
• Sfruttare 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 si ancori correttamente quando la mappa è inclinata o ruotata.

Poligoni e polilinee

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

• Semplificare la geometria: prima del rendering, applica un algoritmo di semplificazione a i dati del percorso. In questo modo si riduce il numero di vertici mantenendo la forma generale, migliorando drasticamente la velocità di rendering, soprattutto per i confini o i 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 esegue lo zoom sull'area. A un livello di zoom basso, è necessaria solo una versione molto semplificata della polilinea o del poligono.
• Precalcola 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.
• Testare le prestazioni di polilinee e poligoni:quando aggiungi numerose polilinee/poligoni complessi, soprattutto se estrusi per il 3D, assicurati che non causino cali di frequenza fotogrammi. Se necessario, limita il numero di vertici o utilizza algoritmi di semplificazione.
• Quando aggiorni una forma, modifica l'intero array del percorso 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 (ove possibile): anche se le polilinee possono utilizzare un valore di altitudine per essere posizionate nello spazio 3D, l'estrusione di una polilinea (ad es. assegnandole stroke-width e un ampio intervallo di altitudine) può essere intensiva dal punto di vista grafico. Quando possibile, utilizza polilinee 2D a terra (RELATIVE_TO_GROUND) o una stroke-width minima per prestazioni migliori.
• Utilizza drawsOccludedSegments solo per gli elementi di routing critici. Per le forme di sfondo o contestuali, consenti loro di essere occluse naturalmente 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à dei modelli 3D .glb, come l'evento gmp-click, sono molto veloci 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 sposta 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 sotto i 5 MB (idealmente meno). Il metodo principale per raggiungere questo obiettivo è applicare la compressione Draco ai dati della mesh all'interno dei file .glb, che può ridurre significativamente le dimensioni dei file (spesso di oltre il 50%) con una perdita minima di 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 si semplificano il posizionamento e la rotazione sulla mappa, assicurando che il modello si ancori 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 dell'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.