Guida introduttiva a 3D Area Explorer

immagine

Panoramica

La soluzione Esplorazione di aree 3D offre un modo completamente nuovo di scoprire ed esplorare i 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.

Esplora area 3D è progettato per servire diversi scopi:

  • Migliora l'esplorazione dell'area: gli utenti possono esplorare virtualmente i quartieri con un elevato grado di dettagli visivi, ottenendo insight su caratteristiche e punti di interesse locali.

  • Promuovere le narrazioni basate sulla località: la possibilità di incorporare i PDI (punti d'interesse) con descrizioni dettagliate consente di creare esperienze basate sulla narrativa che informano e informano gli utenti su località specifiche.

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

Guida introduttiva:

Attiva

Tecnologie chiave

Questa soluzione è stata creata utilizzando due tecnologie chiave:

API di Google Maps Platform:

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

  • Riquadri 3D fotorealistici di Google Maps: I modelli 3D ad alta risoluzione di edifici e terreni offrono 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 la conoscenza locale.
  • 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 terreni.

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

  • Impostazione del punto di vista iniziale in modo che si concentri sul quartiere specificato al momento del caricamento dell'app.
  • L'implementazione di movimenti dinamici della videocamera, ad esempio animazioni automatiche dell'orbita per l'esplorazione.
  • Gestione delle interazioni degli utenti con il globo, se incluse queste funzionalità (panoramica, zoom, rotazione).

Scopri in che modo il riquadro 3D fotorealistico può utilizzare un renderer di riquadri 3D.

Componenti chiave

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

  • App amministratore
  • App demo

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

immagine

Sarebbe utile effettuare ulteriori accertamenti su ogni app:

App amministratore

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

  • Ricerca di località : utilizza la barra di ricerca integrata con completamento automatico di Google Maps Platform per trovare l'area da mostrare. Una volta selezionata una località, la videocamera si attirerà facilmente in quel luogo.

  • 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 includere.

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

È disponibile una descrizione dettagliata di tutte le personalizzazioni di 3D Area Explorer.

App demo

Questa è l'applicazione finale rivolta agli utenti che carica la configurazione creata 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 e il design mediante 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, compresi edifici, punti di riferimento e rilievi.
  2. Gli utenti possono cercare e scoprire luoghi nelle vicinanze (ad es. musei, parchi, ristoranti).
  3. Dopo aver selezionato un luogo, gli utenti possono visualizzare informazioni dettagliate o narrazioni correlate alla località.

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

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

Prerequisiti

  1. Chiave API di Google Maps: è necessaria una chiave API valida con le seguenti API abilitate:

  2. Server web: puoi gestire l'applicazione da:

    • Un server web locale (ad es. utilizzando Node.js, 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, ad esempio GKE o GAE. La demo ospitata utilizza la seguente architettura:

immagine

  • In questa architettura, il codice risiede in un progetto GitHub.
  • Cloud Build acquisisce il codice a ogni push to main e attiva un'operazione di build.
  • Come parte della build, inserisce la chiave API e crea un'immagine che viene quindi archiviata in Artifact Registry.
  • Infine, esegue il deployment dell'ultima immagine stabile da Artifact Registry a Cloud Run.
  • Abbiamo anche eseguito alcuni controlli di integrità e 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 coinvolgente e dinamica. Alcune API potrebbero comportare dei costi. Ecco una panoramica delle API e i link ai prezzi.

Google Maps Platform - API 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 i dati basati sulla posizione e consente di aggiungere informazioni dettagliate all'esperienza di storytelling. Per conoscere i costi associati all'API Google Places,consulta la pagina Prezzi dell'API Places di Google Maps Platform.

Google Maps Platform - API di completamento automatico:

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

CesiumJS:

CesiumJS viene utilizzato per la visualizzazione del globo 3D. Sebbene CesiumJS sia open source, funzionalità o servizi aggiuntivi potrebbero avere 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 una determinata quantità di utilizzo senza costi e le specifiche dei prezzi possono variare in base a fattori come il numero di richieste e la regione di utilizzo.

Per informazioni più accurate e aggiornate sui costi di utilizzo di Google Maps Platform e CesiumJS, consulta sempre le pagine dei prezzi ufficiali. Assicurati di rispettare i termini e le condizioni descritti da questi servizi per gestire e comprendere in modo efficace tutte le spese associate.

Conclusione

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

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

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

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