3D Area Explorer: guida alla personalizzazione

3D Area Explorer è una soluzione che ti consente di esplorare le community per attirare l'attenzione del 3D. La soluzione sfrutta: Riquadri 3D fotorealistici di Google, Ricerca luoghi, Dettagli luogo e API di completamento automatico.

Guida introduttiva:

Utilizza l'app 3D Area Explorer Admin ospitata

Oppure

Ottieni una chiave API e scarica il codice da GitHub.

Attiva

• API Photorealistic 3D Tile
• API Places

Personalizza l'esperienza

La soluzione 3D Area Explorer è altamente personalizzabile e consente di personalizzare l'esperienza in base ai percorsi dei clienti. Per la personalizzazione, utilizza il pannello di controllo nella UI o il file config.json.

Vuoi procedere con la personalizzazione? Ecco come:

Località

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

Controllo fotocamera

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

• Orbita fissa:

  È un'orbita circolare ad altezza fissa e attorno a un punto d'interesse specifico.

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

• Orbita dinamica:

  La videocamera si muove dolcemente seguendo una traiettoria di onda sinusoidale intorno a un punto d'interesse stabilito. Questo movimento unico consente agli spettatori di osservare il punto d'interesse da diverse altezze e angolazioni, offrendo un'esperienza visiva dinamica e coinvolgente.

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

Punti d'interesse (PDI):

• Personalizza l'esplorazione scegliendo 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 gemme nascoste nelle vicinanze o per concentrarti su aree specifiche.
• Imposta la velocità scelta per il movimento della videocamera con il parametro speed (in revolutions per minute).

Precaricamento dell'esplorazione: approfondimenti con la personalizzazione degli URL

3D Area Explorer consente di predefinire l'esplorazione con la personalizzazione degli URL. In questo modo non è necessaria la configurazione manuale, semplificando così l'esperienza utente.

Creazione dell'URL perfetto:

È sufficiente 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, portandoti immediatamente alla 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 scelto di PDI.
• poi.searchRadius: il raggio della ricerca dei PDI nelle vicinanze.
• camera.speed: velocità orbita della fotocamera.
• camera.orbitType: tipo di orbita della fotocamera ("orbita fissa" o "orbita dinamica").

Vantaggi della personalizzazione degli URL:

• Semplifica l'esperienza utente definendo in anticipo le impostazioni che hai scelto.
• Condividi i percorsi mirati con località precaricate e PDI specifici.
• Incorpora facilmente esperienze preconfigurate di Esplorazione area all'interno dei siti web.

Sfruttando la personalizzazione degli URL, puoi creare esperienze su misura e invitare altri utenti a vivere avventure curate.

Nota: prova 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 effettuare queste personalizzazioni avanzate, devi osservare 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 l'altezza della fotocamera durante il volo verso un punto regolando il valore CAMERA_HEIGHT. Valori più alti consentono una visione panoramica maggiore, mentre valori più bassi ti consentono di avvicinarti 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 al di sopra della posizione target quando si raggiunge in volo verso un punto.
• Valori di esempio:
  • 50: Più ravvicinato, enfasi sui dettagli.
  • 200: Una prospettiva più panoramica.

Distanza tra la fotocamera

L'inclinazione iniziale della fotocamera è definita da BASE_PITCH. Usa valori negativi per l'inclinazione verso il basso e positivi per l'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 del tono di 10 gradi nel tempo)

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

Valori di esempio:

• BASE_PITCH: 0 (videocamera di livello)
• AUTO_ORBIT_PITCH_AMPLITUDE: 0 (nessuna variazione della proposta musicale)

Raggio di azione e zoom della fotocamera

Questi parametri impostano la quantità di zoom applicata quando ci si concentra su punti specifici. Valori più piccoli 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 zoom della fotocamera)

Descrizione: queste impostazioni definiscono la variazione dell'intervallo durante lo spostamento della videocamera e il livello di zoom per uno sguardo più da vicino.

Valori di esempio:

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

Reimpostazione fotocamera

Quando un utente vuole ripristinare la posizione originale della fotocamera, vengono utilizzati i valori CAMERA_OFFSET. Questa impostazione include intestazione (rotazione), inclinazione (inclinazione) e intervallo (la distanza della fotocamera dal centro).

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

Coordinate di partenza:

Le START_COORDINATES definiscono la longitudine, la latitudine e l'altezza iniziali della videocamera. L'esplorazione inizierà da 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: 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 posizione 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 sulla quale vuoi che la videocamera esegua la panoramica per prima. Regola questi valori per impostare la videocamera su una posizione specifica sul globo.

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

Questa configurazione ti consente di avviare l'applicazione 3D Place Navigator in modo da aumentare lo zoom 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 Geocoding.
2. Crea una richiesta di geocodifica Fai clic sulla sezione "Fai una prova" e inserisci la località che hai scelto nel campo "Indirizzo". Puoi specificare un indirizzo, un nome di luogo o persino un punto di riferimento.
3. Genera coordinate. Fai clic sul pulsante "Corsa" per inviare la richiesta. Lo strumento restituirà una risposta contenente varie informazioni sul luogo, tra cui le coordinate di latitudine e longitudine visualizzate nella sezione geometry.location.
4. Utilizza i 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 seguire 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 in seguito.

Questa configurazione utilizza lo strumento Geocoding per determinare automaticamente le coordinate della sede centrale di Google a Mountain View, in California, e avviare l'applicazione 3D Place Navigator con la videocamera centrata in quel luogo.

Nota: questo metodo semplifica il processo di ricerca delle coordinate e riduce la necessità di identificazione manuale. Consente di esplorare senza problemi qualsiasi località utilizzando l'indirizzo o il nome all'interno della configurazione.

Personalizzazioni avanzate

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

Aggiungi un nuovo percorso della videocamera

La soluzione implementa subito due diversi percorsi della videocamera:

fixed-orbit" | "dynamic-orbit"

Tuttavia, se vuoi creare un nuovo percorso della 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 luogo per la configurazione può essere modificato nel file demo/src/place-settings.js. A partire dalla riga 4 sono indicati i placetype 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 lavorato con le variabili CSS. Sono supportati in tutti i principali browser e consentono di cambiare una riga in una posizione centrale e di aggiornare specifiche proprietà CSS. Le variabili CSS sono definite in src/main.css.. Qui puoi regolare i colori, le impostazioni dei caratteri e le spaziature interne o i margini per l'intera applicazione.

Dati aggiuntivi in overlay

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

Rimuovi sezioni di configurazione

L'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 commenta o elimina la sezione:

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

• Sezione PDI

Per rimuovere la sezione poi, individua la seguente riga nel codice e commentala oppure eliminala:

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

• Sezione Fotocamera

Per rimuovere la sezione camera, individua la seguente riga nel codice e commentala oppure eliminala:

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

2. Aggiorna configurazioni combinate

Dopo aver rimosso 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 rimuovere una sezione significa anche rimuovere gli elementi dell'interfaccia utente correlati, aggiorna il codice nel codice html. Ad esempio, se 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 la sezione delle impostazioni della videocamera

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Rimozione del riepilogo della sezione relativa alla località

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusione

In questo documento abbiamo esaminato le varie opzioni di personalizzazione disponibili in Esplorazione area per personalizzare la tua esperienza di esplorazione 3D. Modificando il comportamento della videocamera, regolando l'inclinazione visiva e 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 di ottimizzare i parametri in base alle tue esigenze specifiche. Sfruttando il potere della personalizzazione, puoi creare percorsi immersivi e personalizzati che conquistano il pubblico e danno vita alla tua vision.