Personalizzazioni di Esplorazione area 3D

3D Area Explorer è una soluzione che ti consente di esplorare le comunità in un'accattivante modalità 3D. La soluzione sfrutta: i riquadri 3D fotorealistici di Google, Place Search, Place Details, e le API Autocomplete.

Guida introduttiva:

Utilizza l' app per amministratori 3D Area Explorer ospitata

Oppure

Ottieni una chiave API e scarica il codice da GitHub.

Attiva

• API Riquadri 3D fotorealistici
• API Places

Personalizza l'esperienza

La soluzione 3D Area Explorer è altamente personalizzabile e ti consente di adattare l'esperienza ai customer journey. Puoi personalizzare utilizzando il pannello di controllo nell'interfaccia utente o il file config.json.

Vuoi personalizzare? Ecco come:

Località

Definisci il punto di partenza della tua esperienza regolando la latitudine e la longitudine nel file config.json.

Controllo fotocamera

Prendi il controllo del tuo percorso selezionando il tipo di orbita della videocamera: un classico percorso circolare o un'intrigante onda sinusoidale.

• Orbita fissa:

  Si tratta di un'orbita circolare a un'altezza fissa e attorno a un punto di interesse specifico.

  Guarda un'orbita fissa in azione esplorando l'ufficio di Google Sydney.

• Orbita dinamica:

  La videocamera si muove in modo fluido lungo una traiettoria a onda sinusoidale attorno a un punto di interesse designato. Questo movimento unico consente agli spettatori di osservare il punto di interesse da varie altezze e angolazioni, offrendo un'esperienza visiva dinamica e immersiva.

  Guarda un'orbita dinamica in azione esplorando la Torre Eiffel.

Punti d'interesse (PDI):

• Personalizza l'esplorazione determinando i tipi di luoghi che vuoi scoprire. Scegli tra musei, parchi, scuole e altro ancora utilizzando l'array types in config.json.
• Imposta il numero massimo di punti d'interesse visualizzati modificando il parametro density.
• Modifica l'searchRadius (in meters) per includere gemme nascoste nelle vicinanze o concentrarti su aree specifiche.
• Imposta la velocità scelta per il movimento della videocamera con il parametro speed (in revolutions per minute).

Precaricamento di Esplorazione: approfondisci con la personalizzazione degli URL

3D Area Explorer ti consente di predefinire l'esplorazione con la personalizzazione degli URL. In questo modo non è necessaria la configurazione manuale, il che semplifica l'esperienza utente.

Creazione dell'URL perfetto:

Basta aggiungere parametri specifici all'URL di Area Explorer per preimpostare la località e altre impostazioni. Ad esempio:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

Questo URL imposta il punto di partenza sulla latitudine e sulla longitudine specificate, trasportandoti istantaneamente nella località scelta. Parametri disponibili:

• location.coordinates.lat: latitudine della località scelta.
• location.coordinates.lng: la longitudine della località scelta.
• poi.types: un elenco separato da virgole di tipi di PDI da visualizzare.
• poi.density: il numero massimo di PDI scelto.
• poi.searchRadius: il raggio per la ricerca di PDI nelle vicinanze.
• camera.speed: velocità di rotazione della videocamera.
• camera.orbitType: tipo di orbita della videocamera ("fixed-orbit" o "dynamic-orbit").

Vantaggi della personalizzazione degli URL:

• Semplifica l'esperienza utente predefinendo le impostazioni scelte.
• Condividi percorsi mirati con località e PDI specifici precaricati.
• Incorpora facilmente esperienze di Esplora l'area preconfigurate nei siti web.

Sfruttando la personalizzazione degli URL, puoi creare esperienze su misura e invitare altre persone a intraprendere avventure curate.

Nota: prova un URL personalizzato completo: https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

Ulteriori personalizzazioni

La sezione precedente ha esplorato le modifiche accessibili tramite l'interfaccia utente o il file di configurazione. Tuttavia, esistono anche diversi altri parametri integrati che puoi modificare per personalizzare ulteriormente l'applicazione.

Per apportare queste personalizzazioni avanzate, devi esaminare il codice nel file src/utils/cesium.js che si trova nella directory src. Le seguenti variabili possono essere modificate per cambiare l'aspetto dell'applicazione

Altezza fotocamera

Controlla l'altezza della videocamera quando si sposta verso un punto regolando il valore CAMERA_HEIGHT. Valori più alti forniranno una visualizzazione panoramica più ampia, mentre valori più bassi ti avvicineranno ai dettagli dell'area.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;

• Impostazione: CAMERA_HEIGHT
• Valore predefinito: 100
• Descrizione: definisce l'altezza della videocamera sopra la località target quando si vola verso un punto.
• Valori di esempio:
  • 50: visualizzazione più ravvicinata, con enfasi sui dettagli.
  • 200: una prospettiva più panoramica.

Inclinazione della videocamera

L'inclinazione iniziale della videocamera è definita da BASE_PITCH. Utilizza valori negativi per un'inclinazione verso il basso e valori positivi per una visualizzazione verso l'alto. Per aggiungere un movimento dinamico impercettibile alla tua esplorazione, modifica AUTO_ORBIT_PITCH_AMPLITUDE.

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;

• Impostazione: BASE_PITCH e AUTO_ORBIT_PITCH_AMPLITUDE
• Valori predefiniti:
  • BASE_PITCH: -30 (inclinazione di 30 gradi verso il basso)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (modifica il beccheggio di 10 gradi nel tempo)

Descrizione: l'inclinazione della fotocamera è l'inclinazione visiva di una mappa, misurata in gradi. È anche noto come inclinazione. Queste impostazioni definiscono il beccheggio iniziale della videocamera e la regolazione dinamica del beccheggio durante le rotazioni automatiche.

Valori di esempio:

• BASE_PITCH: 0 (videocamera livellata)
• AUTO_ORBIT_PITCH_AMPLITUDE: 0 (nessuna variazione di tono)

Raggio d'azione e zoom della videocamera

Questi parametri impostano la quantità di zoom applicata quando si mette a fuoco su punti specifici. Valori più piccoli indicano uno zoom più ravvicinato.

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

Impostazione: RANGE_AMPLITUDE_RELATIVE e ZOOM_FACTOR

Valori predefiniti:

• RANGE_AMPLITUDE_RELATIVE: 0,55 (variazione della distanza relativa)
• ZOOM_FACTOR: 20 (fattore di zoom della videocamera)

Descrizione:queste impostazioni definiscono la variazione dell'intervallo durante il movimento della videocamera e il livello di zoom per un'inquadratura più ravvicinata.

Valori di esempio:

• RANGE_AMPLITUDE_RELATIVE: 1 (variazione dell'intervallo completo)
• ZOOM_FACTOR: 10 (meno zoom)

// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

Ripristino della videocamera

Quando un utente vuole reimpostare la videocamera nella posizione originale, vengono utilizzati i valori CAMERA_OFFSET. Questa impostazione include la direzione (rotazione), l'inclinazione (tilt) e l'intervallo (la distanza della videocamera dal centro).

• Impostazione: CAMERA_OFFSET
• Valori predefiniti:
  • heading: 0 (nessun offset di rotazione)
  • pitch: Cesium.Math.toRadians(-30) (beccheggio di 30 gradi verso il basso)
  • range: 800 (800 metri dal centro)
• Descrizione: definisce la direzione, l'inclinazione e l'intervallo della videocamera per reimpostare la visualizzazione.
• Valori di esempio:
  • heading: 45 (gradi, vista verso nord-ovest)
  • range: 1500 metri (più lontano dal centro)

Coordinate di partenza:

START_COORDINATES definisce la longitudine, la latitudine e l'altezza iniziali della videocamera. È qui che inizierà l'esplorazione, quindi impostala sull'area che vuoi che gli utenti vedano per prima.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};

• Impostazione: START_COORDINATES

• Valori predefiniti:

  • longitude: 0
  • latitude: 60
  • height: 15000000 (15.000 km sopra la superficie)

• Valori di esempio:

  • longitude: -122.4934, latitude: 37.7951 (Golden Gate Bridge)
  • height: 2000 (posizione iniziale più vicina)

Carica una località predefinita

L'oggetto location in config.json imposta il centro dell'area. È il punto di vista iniziale della videocamera nel visualizzatore Cesium.coordinates: Definisce la latitudine (lat) e la longitudine (lng) della posizione verso cui vuoi che la videocamera esegua la panoramica per prima. Regola questi valori per impostare la videocamera su una posizione specifica del globo.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

Questa configurazione ti consente di avviare l'applicazione 3D Place Navigator con lo zoom su una località specifica di tua scelta. Puoi utilizzare lo strumento di geocodifica di Google per ottenere le coordinate di latitudine e longitudine di un indirizzo o di un nome di luogo specificandole nell'oggetto posizione:

1. Accedi allo strumento di geocodifica.
2. Crea una richiesta di geocodifica Fai clic sulla sezione "Prova" e inserisci la località scelta nel campo "Indirizzo". Puoi specificare un indirizzo, un nome di luogo o persino dei punti di riferimento.
3. Genera coordinate Fai clic sul pulsante "Esegui" per inviare la richiesta. Lo strumento restituirà una risposta contenente varie informazioni sulla località, tra cui le coordinate di latitudine e longitudine visualizzate nella sezione geometry.location.
4. Utilizza i geocodici Copia i valori di latitudine e longitudine recuperati dalla risposta e incollali nell'oggetto coordinates all'interno della configurazione.

Nota: i geocodici utilizzati in questo modo devono rispettare i termini descritti nella sezione 3.4 dei Termini di servizio di Google Maps Platform, ovvero non devono essere memorizzati nella cache per più di 30 giorni e devono essere aggiornati dopo questo periodo.

Questa configurazione utilizza lo strumento di geocodifica per determinare automaticamente le coordinate della sede centrale di Google a Mountain View, in California, e avviare l'applicazione 3D Place Navigator con la fotocamera centrata su quella posizione.

Nota: questo metodo semplifica il processo di ricerca delle coordinate e riduce la necessità di identificazione manuale. Ti consente di esplorare facilmente qualsiasi località utilizzando il suo indirizzo o nome all'interno della configurazione.

Personalizzazioni avanzate

Puoi apportare ulteriori personalizzazioni approfondendo il codice. La sezione seguente illustra alcune opzioni

Aggiungi un nuovo percorso della videocamera

La soluzione implementa due diversi percorsi della videocamera:

fixed-orbit" | "dynamic-orbit"

Tuttavia, se vuoi, puoi creare un nuovo percorso della videocamera e implementarlo utilizzando

/src/utils/cesium.js nella funzione calculateAutoOrbitFrame.

Per utilizzare questo nuovo calcolo del percorso nel riquadro di configurazione,consulta l'implementazione in demo/src/camera-settings.js.

Aggiungi altri tipi di luoghi

L'elenco dei tipi di luoghi per la configurazione può essere modificato nel file demo/src/place-settings.js. A partire dalla riga 4 sono elencati i tipi di luoghi disponibili nella demo.

Se vuoi utilizzare tipi di luoghi specifici senza modificare l'origine della demo, puoi semplicemente aggiungerli al file config.json in poi.types

Personalizza lo stile (CSS)

Per gli stili abbiamo utilizzato le variabili CSS. Sono supportate da tutti i principali browser e consentono di modificare una riga in un punto centrale e aggiornare proprietà CSS specifiche. Le nostre variabili CSS sono definite in src/main.css.. Qui puoi regolare i colori, le impostazioni dei caratteri e i padding o i margini per l'intera applicazione.

Sovrapponi dati aggiuntivi

Per sovrapporre dati aggiuntivi, devi aggiornare il file src/utils/cesium.js e consultare la documentazione di Cesium su come aggiungere dati GeoJSON o altri dati georeferenziati al globo.

Rimuovi le sezioni di configurazione

La nostra applicazione JavaScript ha tre sezioni principali nel file di configurazione: demo/src/[config-panel.js](config-panel.js): location, poi e camera. Ognuna di queste sezioni fornisce opzioni di configurazione per diversi aspetti dell'applicazione. Gli sviluppatori possono personalizzare queste sezioni in base alle loro esigenze specifiche.

1.Rimuovi una sezione specifica dalla configurazione

• Sezione Posizione

Per rimuovere la sezione location, individua la seguente riga nel codice e commentala o eliminala:

const locationConfig = { ...config.location, ...customConfig.location };

• Sezione PDI

Per rimuovere la sezione poi, trova la riga seguente nel codice e commentala o eliminala:

const poiConfig = { ...config.poi, ...customConfig.poi };

• Sezione Videocamera

Per rimuovere la sezione camera, trova la riga seguente nel codice e commentala o eliminala:

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. Aggiorna le configurazioni combinate

Dopo aver rimosso una sezione, è essenziale aggiornare l'oggetto di configurazione combinato. Questo oggetto unisce la configurazione predefinita con eventuali personalizzazioni. Rimuovi la proprietà corrispondente dall'oggetto combinedConfig:

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. Regola gli elementi UI

Se la rimozione di una sezione comporta anche la rimozione degli elementi UI correlati, aggiorna il codice di conseguenza nel codice HTML. Ad esempio, se vuoi rimuovere una sezione specifica dal pannello di amministrazione, come la velocità della videocamera, devi aggiornare sia il codice JS sia il codice HTML.

4. Rimuovi la sezione Impostazioni della fotocamera

Per rimuovere la sezione delle impostazioni della videocamera dalla UI, trova la riga seguente e commentala o eliminala:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Riepilogo della sezione Rimozione della posizione

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusione

In questo documento abbiamo esplorato le varie opzioni di personalizzazione disponibili in Esplora area per personalizzare la tua esperienza di esplorazione 3D. Modificando il comportamento della videocamera, regolando l'inclinazione visiva e cambiando i livelli di zoom, puoi creare esperienze uniche e coinvolgenti che mostrano le impostazioni e i punti di interesse selezionati.

Ricorda di sperimentare con diverse configurazioni e di perfezionare i parametri in base alle tue esigenze specifiche. Sfruttando la potenza della personalizzazione, puoi creare percorsi immersivi e personalizzati che catturano il tuo pubblico e danno vita alla tua visione.