Guida introduttiva a 3D Area Explorer

immagine

Panoramica

La soluzione 3D Area Explorer ti offre un modo completamente nuovo di scoprire e località dell'esperienza utente. Questa soluzione sfrutta le funzionalità di Google Maps 3D fotorealistico della piattaforma Riquadri e Luoghi dell'API per creare ambienti 3D accattivanti e interattivi.

Esplora area 3D è progettato per servire diversi scopi:

  • Migliora l'esplorazione dell'area: gli utenti possono esplorare i quartieri virtualmente con un elevato livello di dettagli visivi, ottenendo informazioni sulle caratteristiche locali e punti di riferimento.

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

  • Ispira lo sviluppo con le funzionalità 3D di Google Maps: dimostra il potenziale dei dati di mappatura 3D di Google per la creazione di contenuti mappe 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 per creare questa esperienza:

  • Riquadri 3D fotorealistici di Google Maps: I modelli 3D ad alta risoluzione degli edifici e dei rilievi del terreno offrono una una rappresentazione visivamente coinvolgente degli ambienti urbani.
  • API Places: L'app può identificare e visualizzare informazioni dettagliate sui punti di Gli interessi (PDI) all'interno dell'area esplorata, arricchendo l'esperienza utente con conoscenze locali.
  • Completamento automatico aiuta gli utenti a cercare luoghi o aree specifiche di interesse.

CesiumJS

CesiumJS si occupa del rendering e della visualizzazione dei file 3D ad alta risoluzione a forma di globo. Gestisce il caricamento e la visualizzazione della fotorealistica 3D di Google Tile, che forniscono un modello mesh 3D di edifici e terreni.

Gestione della videocamera:CesiumJS fornisce gli strumenti per controllare lo stato della videocamera posizione, orientamento e movimento. tra cui:

  • Impostazione del punto di vista iniziale su cui concentrarsi sul quartiere specificato caricare l'app.
  • Implementazione di movimenti dinamici della videocamera, ad esempio l'orbita automatizzata animazioni per l'esplorazione.
  • Gestione delle interazioni degli utenti con il globo, se queste funzionalità sono incluse (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 della località : utilizza il completamento automatico integrato di Google Maps Platform barra di ricerca per trovare l'area da mostrare. Una volta selezionato un luogo, la videocamera si attirerà facilmente in quella zona.

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

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

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

C'è una descrizione dettagliata di tutte le personalizzazioni, Personalizzazioni di Esplorazione area 3D.

App demo

Si tratta dell'applicazione finale rivolta agli utenti che carica la configurazione creato nell'app Console di amministrazione. In questo ambiente 3D immersivo, gli utenti potranno per esplorare le aree selezionate e i luoghi che hai evidenziato.

Dopo aver personalizzato l'aspetto e il design dell'app di amministrazione, puoi scarica la configurazione ed esegui 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 a quella località.

  4. Gli sviluppatori possono personalizzare l'esperienza di esplorazione tramite le impostazioni e (se utilizzi l'app Console di amministrazione).

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

Prerequisiti

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

  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 nel file Leggimi del progetto GitHub.

Deployment

Puoi eseguire il deployment dell'app come applicazione node o container Docker in qualsiasi in un ambiente container come GKE GAE. La demo ospitata utilizza i seguenti dell'architettura:

immagine

  • In questa architettura, il codice risiede in un progetto GitHub.
  • Cloud Build acquisisce il codice a ogni push to main e attiva una build operativa.
  • Come parte della build, inserisce la chiave API e crea un'immagine che viene poi in Artifact Registry.
  • Infine, esegue il deployment dell'immagine stabile più recente da Artifact Registry a Cloud vengono eseguiti tutti i test delle unità.
  • Abbiamo anche alcuni controlli di integrità e monitoraggio in esecuzione per controllare 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 fornire un un'esperienza immersiva 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 le immagini esperienza con i dati geospaziali. Per i dettagli sui prezzi relativi ai riquadri 3D API, consulta Google Maps Platform - API 3D Tiles Prezzi.

Google Maps Platform - API Places:

Viene utilizzata l'API Places per i dati basati sulla posizione, che aggiunge informazioni dettagliate a l'esperienza di storytelling. Per comprendere i costi associati all'uso di Google API Places,visita Google Maps Platform - API Places Prezzi.

Google Maps Platform - API di completamento automatico:

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

CesiumJS:

CesiumJS viene utilizzato per il globo 3D visualizzazione. Sebbene CesiumJS sia open source, funzionalità aggiuntive potrebbero comportare costi associati a loro carico. Fai riferimento a CesiumJS Documentazione per eventuali offerte premium.

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

Per informazioni più precise e aggiornate, consulta sempre le pagine dei prezzi ufficiali informazioni sui costi di utilizzo di Google Maps Platform e CesiumJS. Garantire la conformità ai termini e condizioni delineati da questi servizi per gestire e comprendere in modo efficace le spese associate.

Conclusione

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

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

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

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