Guida introduttiva a 3D Area Explorer

immagine

Panoramica

La soluzione 3D Area Explorer offre un modo completamente nuovo per scoprire ed esplorare luoghi. Questa soluzione sfrutta le funzionalità dei riquadri 3D fotorealistici di Google Maps Platform e dell'API Places per creare ambienti 3D interattivi e accattivanti.

La funzione 3D Area Explorer è progettata per servire a diversi scopi:

  • Migliora l'esplorazione della zona: gli utenti possono esplorare virtualmente i quartieri con un elevato livello di dettagli visivi, ottenendo informazioni sugli elementi e sui punti di riferimento locali.

  • Promuovi le narrazioni basate sulla posizione: la possibilità di incorporare PDI (punti d'interesse) con descrizioni dettagliate consente di creare esperienze basate sulla narrazione che informano e informano gli utenti su luoghi specifici.

  • Ispira lo sviluppo utilizzando le funzionalità 3D di Google Maps: dimostra il potenziale dei dati di mappatura 3D di Google per la creazione di mappe interattive e immersive.

Guida introduttiva:

Attiva

Tecnologie principali

Questa soluzione è basata su due tecnologie chiave:

API di Google Maps Platform:

Utilizziamo diverse API di Google Maps Platform per ottenere la mappa di base e i dati per creare questa esperienza:

  • Riquadri 3D fotorealistici di Google Maps: i modelli 3D ad alta risoluzione di edifici e terreno forniscono una rappresentazione realistica e visivamente coinvolgente degli ambienti urbani.
  • API Places: L'app può identificare e visualizzare informazioni dettagliate sui punti d'interesse (PDI) all'interno dell'area esplorata, arricchendo l'esperienza utente con conoscenze locali.
  • Il completamento automatico aiuta gli utenti a cercare località o aree di interesse specifiche.

CesiumJS

CesiumJS è responsabile del rendering e della visualizzazione del globo 3D ad alta risoluzione. Gestisce il caricamento e la visualizzazione dei riquadri 3D fotorealistici di Google, che forniscono un modello mesh 3D di edifici e terreno.

Gestione videocamera: CesiumJS fornisce gli strumenti per controllare la posizione, l'orientamento e il movimento della videocamera. Include:

  • Impostazione del punto di vista iniziale in modo che si concentri sul quartiere specificato al momento del caricamento dell'app.
  • Implementazione di movimenti dinamici della fotocamera, come animazioni orbitali automatizzate per l'esplorazione.
  • Gestione delle interazioni degli utenti con il globo se queste funzionalità sono incluse (panning, zoom, rotazione).

Scopri come utilizzare un riquadro 3D fotorealistico per utilizzare un renderer di riquadri 3D.

Componenti chiave

L'applicazione è divisa in due diverse app, ovvero:

  • App di amministrazione
  • App demo

Questo diagramma fornisce una panoramica delle differenze e della correlazione tra le due applicazioni:

immagine

Sarebbe utile esaminare ulteriormente ogni app:

App di amministrazione

Questa applicazione fornisce un'interfaccia facile da usare che ti consente di personalizzare l'esperienza 3D:

  • Ricerca di località : utilizza la barra di ricerca integrata di completamento automatico di Google Maps Platform per trovare l'area che vuoi mettere in evidenza. Una volta selezionata, la videocamera si sposta in quell'area.

  • Videocamera: regola la velocità di movimento della videocamera e il tipo di orbita per creare l'esperienza di visualizzazione selezionata.

  • Luoghi (PDI): definisci la densità, il raggio di ricerca e i tipi di punti d'interesse (ad es. ristoranti, bar, punti di riferimento) da mostrare.

Utilizza questa app per personalizzare l'esperienza per i tuoi utenti finali.

È disponibile una descrizione dettagliata di tutte le personalizzazioni di Esplora area 3D.

App demo

Questa è l'ultima applicazione rivolta agli utenti che carica la configurazione che hai creato nell'app di amministrazione. In questo ambiente 3D immersivo, gli utenti potranno esplorare le aree selezionate e scoprire i luoghi che hai evidenziato.

Dopo aver personalizzato l'aspetto utilizzando l'app di amministrazione, puoi scaricare la configurazione ed eseguire l'applicazione personalizzata dal codice sorgente.

Esperienza utente

immagine

Alcune delle funzionalità principali dell'applicazione sono:

  1. Gli utenti possono esplorare in modo interattivo un'area in 3D, inclusi edifici, punti di riferimento e rilievi.
  2. Gli utenti possono cercare e scoprire i luoghi nelle vicinanze (ad es. musei, parchi, ristoranti).
  3. Dopo aver selezionato un luogo, gli utenti possono visualizzare informazioni o narrazioni dettagliate relative a quel luogo.

  4. Gli sviluppatori possono personalizzare la propria esperienza di esplorazione tramite impostazioni e controlli (se utilizzano l'app di amministrazione).

  5. La rotazione automatica è abilitata, consentendo alla fotocamera di ruotare automaticamente intorno al centro dell'area selezionata.

Prerequisiti

  1. Chiave API di Google Maps: devi avere una chiave API valida con le seguenti API abilitate:

  2. Server web: puoi gestire l'applicazione in uno dei seguenti modi:

    • Un server web locale (ad es. utilizzando Node.js o http-server)
    • Un servizio di hosting web statico (l'applicazione viene fornita con un Dockerfile).

Puoi trovare una descrizione dettagliata delle opzioni di deployment nella sezione Leggimi del progetto GitHub.

Deployment

Puoi eseguire il deployment dell'app come applicazione nodo o container Docker in qualsiasi ambiente container, come GKE o GAE. La demo ospitata utilizza la seguente architettura:

immagine

  • In questa architettura, il codice risiede in un progetto GitHub.
  • Cloud Build recupera il codice da qualsiasi push al main e attiva un'operazione di build.
  • Come parte della build, inserisce la chiave API e crea un'immagine che viene quindi archiviata nell'artifact Registry.
  • Infine, esegue il deployment dell'immagine stabile più recente da Artifact Registry a Cloud Run.
  • Inoltre, sono in esecuzione alcuni controlli di integrità e un monitoraggio per verificare l'integrità delle app di cui è stato eseguito il deployment.

Dati di fatturazione

La soluzione 3D Area Explorer utilizza i servizi di Google Maps Platform per offrire un'esperienza immersiva e dinamica. Alcune API potrebbero comportare dei costi. Ecco una panoramica delle API e i link ai prezzi.

API Google Maps Platform - 3D Tiles:

La soluzione Storytelling utilizza l'API 3D Tiles per migliorare l'esperienza visiva con i dati geospaziali. Per i dettagli sui prezzi relativi all'API 3D Tiles, consulta la pagina Prezzi dell'API 3D Tiles di Google Maps Platform.

Google Maps Platform - API Places:

L'API Places viene utilizzata per dati basati sulla posizione, aggiungendo informazioni dettagliate all'esperienza di storytelling. Per conoscere i costi associati all'API Google Places,visita Google Maps Platform - Prezzi dell'API Places.

API Google Maps Platform - Autocomplete:

La funzionalità di completamento automatico migliora l'interazione dell'utente. Per i dettagli sui prezzi relativi all'API Google Maps Autocomplete, visita Google Maps Platform - Places Autocomplete Prices.

CesiumJS:

CesiumJS è utilizzato per la visualizzazione del globo in 3D. Sebbene CesiumJS sia open source, funzionalità o servizi aggiuntivi possono avere i propri costi associati. Fai riferimento alla documentazione di CesiumJS per eventuali offerte premium.

È fondamentale esaminare i dettagli dei prezzi di ogni rispettiva API, poiché gli addebiti vengono determinati individualmente in base all'utilizzo. Tieni presente che Google Maps Platform offre un livello senza costi con un determinato utilizzo senza costi aggiuntivi e le specifiche dei prezzi possono variare in base a fattori quali il numero di richieste e la regione di utilizzo.

Fai sempre riferimento alle pagine dei prezzi ufficiali per le informazioni più accurate e aggiornate sui costi di utilizzo di Google Maps Platform e CesiumJS. Garantisci la conformità ai termini e condizioni delineati da questi servizi per gestire e comprendere efficacemente le spese associate.

Conclusione

Questo documento fornisce una panoramica delle funzionalità, dei componenti, dell'esperienza utente e dei requisiti tecnici di Esplora area 3D.

Sfruttando i riquadri 3D fotorealistici di Google e l'API Places, consente l'esplorazione virtuale di quartieri, la scoperta di punti d'interesse e la conoscenza della storia locale.

Che si tratti di mostrare un'area, migliorare l'esplorazione o promuovere lo storytelling digitale, 3D Area Explorer offre una piattaforma dalla grafica sorprendente.

Prova la demo e personalizzala utilizzando l'app di amministrazione per creare un'esperienza 3D coinvolgente e informativa.