3D Area Explorer: guida alla personalizzazione

3D Area Explorer è una soluzione che consente di esplorare le community in 3D accattivante. La soluzione sfrutta: riquadri 3D fotorealistici di Google, Ricerca Places, Dettagli luogo e API Autocomplete.

Guida introduttiva:

Utilizzare l' app di amministrazione 3D Area Explorer ospitata

Oppure

Ottieni una chiave API e scarica il codice da GitHub.

Attiva

• API dei riquadri 3D fotorealistici
• API Places

Personalizzare l'esperienza

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

Tutto pronto per la personalizzazione? 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 viaggio 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 d'interesse specifico.

  Osserva un'orbita fissa in azione esplorando la sede di Google a Sydney.

• Orbita dinamica:

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

  Osserva 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 regolando il parametro density.
• Modifica searchRadius (in meters) per includere le 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 della tua esplorazione: approfondisci la questione con la personalizzazione degli URL

3D Area Explorer consente di predefinire l'esplorazione con la personalizzazione degli URL. Questo elimina la necessità di configurare manualmente il dispositivo, semplificando l'esperienza utente.

Creazione dell'URL perfetto:

È sufficiente aggiungere parametri specifici all'URL di Area Explorer per preimpostare la posizione 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, portandoti immediatamente nella località scelta. Parametri disponibili:

• location.coordinates.lat: latitudine della posizione scelta.
• location.coordinates.lng: 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 dei PDI nelle vicinanze.
• camera.speed: velocità dell'orbita della fotocamera.
• camera.orbitType: tipo di orbita fotocamera ("orbita fissa" o "orbita dinamica").

Vantaggi della personalizzazione dell'URL:

• Semplifica l'esperienza utente definendo già le impostazioni che hai scelto.
• Condividi percorsi mirati con luoghi precaricati e PDI specifici.
• Incorpora perfettamente le esperienze preconfigurate di Area Explorer all'interno dei siti web.

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

Nota: prova a usare un URL personalizzato completamente caricato: 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 esplorava gli aggiustamenti 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 guardare il codice nel file src/utils/cesium.js che si trova nella directory src. Le seguenti variabili possono essere modificate per modificare l'aspetto e il design dell'applicazione

Altezza fotocamera

Controlla a che altezza la fotocamera si posiziona quando voli verso un punto regolando il valore CAMERA_HEIGHT. Valori più alti forniranno una vista panoramica più con lo zoom, 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 fotocamera sopra la posizione target quando si vola verso un punto.
• Valori di esempio:
  • 50: visione più ravvicinata, con enfasi sui dettagli.
  • 200: Una prospettiva più panoramica.

Orientamento videocamera

L'inclinazione iniziale della fotocamera è definita dal parametro BASE_PITCH. Usa valori negativi per un'inclinazione verso il basso e valori positivi per un'inclinazione verso l'alto. Per aggiungere un leggero movimento dinamico all'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 verso il basso di 30 gradi)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (variazione dell'inclinazione di 10 gradi nel tempo)

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

Valori di esempio:

• BASE_PITCH: 0 (livello fotocamera)
• AUTO_ORBIT_PITCH_AMPLITUDE: 0 (nessuna variazione di passo)

Raggio d'azione e zoom della fotocamera

Questi parametri impostano la quantità di zoom applicata quando imposti lo stato attivo su punti specifici. Valori più bassi indicano uno zoom più vicino.

// 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 distanza relativa)
• ZOOM_FACTOR: 20 (fattore di zoom della fotocamera)

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

Valori di esempio:

• RANGE_AMPLITUDE_RELATIVE: 1 (variazione gamma completa)
• ZOOM_FACTOR: 10 (minore 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.
};

Reimpostazione fotocamera

Quando un utente vuole ripristinare la posizione originale della fotocamera, vengono utilizzati i valori CAMERA_OFFSET. che include l'orientamento (rotazione), l'inclinazione (inclinazione) e l'intervallo (quanto si trova la fotocamera dal centro).

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

Avvia coordinate:

Le START_COORDINATES definiscono la longitudine, la latitudine e l'altezza iniziali della videocamera. L'esplorazione inizierà qui, quindi impostala sull'area che vuoi che gli utenti visualizzino 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: 15.000.000 (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 di Cesium.coordinates: Definisce la latitudine (lat) e la longitudine (lng) della località in cui vuoi che venga eseguita la panoramica della videocamera. Regola questi valori per impostare la videocamera in una posizione specifica sul globo.

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

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

1. Accedi allo Strumento di geocodifica.
2. Crea una richiesta di geocodifica. Fai clic sulla sezione "Fai una prova" e inserisci la località scelta nel campo "Indirizzo". Puoi specificare un indirizzo, il nome di un luogo o persino 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à, incluse le coordinate di latitudine e longitudine visualizzate nella sezione geometry.location.
4. Utilizza codici geografici Copia i valori di latitudine e longitudine recuperati dalla risposta e incollali nell'oggetto coordinates all'interno della tua configurazione.

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

Questa configurazione utilizzava lo strumento Geocoding per determinare automaticamente le coordinate della sede centrale di Google a Mountain View, in California, e per avviare l'applicazione Place Navigator 3D con la fotocamera centrata sulla località.

Nota: questo metodo semplifica il processo di ricerca delle coordinate e riduce la necessità di identificare manualmente le coordinate. Consente di esplorare facilmente qualsiasi località usando l'indirizzo o il nome all'interno della configurazione.

Personalizzazioni avanzate

Puoi eseguire ulteriori personalizzazioni analizzando il codice. La seguente sezione illustra alcune opzioni

Aggiungi un nuovo percorso della videocamera

La soluzione implementa immediatamente due diversi percorsi della videocamera:

fixed-orbit" | "dynamic-orbit"

Tuttavia, se vuoi puoi creare un nuovo percorso videocamera, puoi 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 luogo

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

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

Personalizza lo stile (CSS)

Per gli stili, abbiamo lavorato con le variabili CSS. Sono supportati in tutti i principali browser e consentono di cambiare una riga in una posizione centrale e aggiornare specifiche proprietà CSS. Le variabili CSS sono definite in src/main.css.. Qui puoi modificare i colori, le impostazioni dei caratteri e le spaziatura interna o i margini dell'intera applicazione.

Sovrapporre dati aggiuntivi

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

Rimuovi sezioni di configurazione

Il file di configurazione della nostra applicazione JavaScript contiene tre sezioni principali: 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 relativa alla località

Per rimuovere la sezione location, trova la riga seguente nel codice e commenta o eliminala:

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

• Sezione PDI

Per rimuovere la sezione poi, trova la riga seguente nel codice e commenta oppure eliminala:

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

• Sezione Fotocamera

Per rimuovere la sezione camera, trova la riga seguente nel codice e commenta oppure eliminala:

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

2. Aggiorna configurazioni combinate

Dopo la rimozione di una sezione, è essenziale aggiornare l'oggetto di configurazione combinato. Questo oggetto unisce la configurazione predefinita a 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. Modifica gli elementi dell'interfaccia utente

Se la rimozione di una sezione comporta anche la rimozione di elementi dell'interfaccia utente correlati, aggiorna il codice di conseguenza nel codice HTML. Se ad esempio vuoi rimuovere dal pannello di amministrazione una sezione specifica come la velocità della videocamera, devi aggiornare sia il codice js sia il codice html.

4. Rimuovi sezione Impostazioni della videocamera

Per rimuovere la sezione delle impostazioni della videocamera dall'interfaccia utente, trova la riga seguente e commenta o eliminala:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Rimozione del riepilogo della sezione della località

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusione

In questo documento abbiamo esplorato le varie opzioni di personalizzazione disponibili in Area Explorer per personalizzare l'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 mettono in mostra le impostazioni e i punti d'interesse selezionati.

Ricordati di sperimentare diverse configurazioni e ottimizzare i parametri in base alle tue esigenze specifiche. Sfruttando la forza della personalizzazione, puoi creare percorsi immersivi e personalizzati che attirano il pubblico e danno vita alla tua vision.