3D Area Explorer: guida alla personalizzazione

3D Area Explorer è una soluzione che ti consente di esplorare le comunità in un coinvolgente formato 3D. La soluzione sfrutta: riquadri 3D fotorealistici di Google, Ricerca di luoghi, Dettagli dei luoghi, e API di completamento automatico.

Guida introduttiva:

Utilizzare l'app 3D Area Explorer Admin ospitata

Oppure

Genera una chiave API e scarica il codice da GitHub.

Attiva

• API Photorealistic 3D Tiles
• API Places

Personalizzare l'esperienza

La soluzione Esploratore di aree 3D è altamente personalizzabile e ti consente di adattare l'esperienza ai percorsi dei clienti. 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 dell'esperienza regolando la latitudine e la longitudine nel file config.json.

Controllo della videocamera

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

• Orbita fissa:

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

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

• Orbita dinamica:

  La fotocamera si muove dolcemente in una traiettoria sinusoidale attorno a un punto d'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 coinvolgente.

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

Punti d'interesse (PDI):

• Personalizza la tua 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 searchRadius (in meters) per includere gemme nascoste nelle vicinanze o concentrati su aree specifiche.
• Imposta la velocità scelta per il movimento della videocamera con il parametro speed (in revolutions per minute).

Precaricamento dell'esplorazione: approfondisci con la personalizzazione dell'URL

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

Creare l'URL perfetto:

Basta aggiungere parametri specifici all'URL di Explorer per le aree 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, catapultandoti immediatamente nella località scelta. Parametri disponibili:

• location.coordinates.lat: latitudine della località scelta.
• location.coordinates.lng: longitudine della località scelta.
• poi.types: un elenco separato da virgole dei tipi di PDI da visualizzare.
• poi.density: il numero massimo di PDI scelti.
• poi.searchRadius: il raggio per la ricerca dei PDI nelle vicinanze.
• camera.speed: velocità dell'orbita della videocamera.
• camera.orbitType: tipo di orbita della videocamera ("orbita fissa" o "orbita dinamica").

Vantaggi della personalizzazione dell'URL:

• Semplifica l'esperienza utente predefinendo le impostazioni scelte.
• Condividere percorsi mirati con località e PDI precaricati specifici.
• Incorporare esperienze di Esplorazione dell'area preconfigurate all'interno dei siti web.

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

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 ha esplorato le modifiche accessibili tramite l'interfaccia utente o il file di configurazione. Tuttavia, esistono anche altri parametri integrati che puoi modificare per personalizzare ulteriormente l'applicazione.

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

Altezza fotocamera

Controlla l'altezza a cui si posiziona la fotocamera quando voli verso un punto regolando il valore CAMERA_HEIGHT. I valori più elevati forniscono una vista panoramica con lo zoom meno elevato, mentre i valori più bassi ti consentono di visualizzare i 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 voli verso un punto.
• Valori di esempio:
  • 50: visione più ravvicinata, che mette in evidenza i dettagli.
  • 200: una prospettiva più panoramica.

Inclinazione della videocamera

L'inclinazione iniziale della fotocamera è 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 sottile 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 (variazione dell'inclinazione di 10 gradi nel tempo)

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

Valori di esempio:

• BASE_PITCH: 0 (livello videocamera)
• AUTO_ORBIT_PITCH_AMPLITUDE: 0 (nessuna variazione dell'intonazione)

Campo di applicazione e zoom della fotocamera

Questi parametri impostano l'entità dello zoom applicato quando si esegue la messa 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 fotocamera)

Descrizione: queste impostazioni definiscono la variazione dell'intervallo durante il movimento della fotocamera e il livello di zoom per un'immagine 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 dei dati di fabbrica della videocamera

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

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

Coordinate di partenza:

START_COORDINATES definisce la longitudine, la latitudine e l'altezza iniziali della fotocamera. Da qui 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 fotocamera nel visualizzatore Cesium.coordinates: Definisce la latitudine (lat) e la longitudine (lng) della località verso la quale vuoi che la videocamera effettui la panoramica per prima. Modifica questi valori per impostare la videocamera su qualsiasi località specifica sul globo.

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

Questa configurazione ti consente di avviare l'applicazione 3D Place Navigator con 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 specificandole nell'oggetto Location:

1. Accedi allo strumento di geocodifica.
2. Crea una richiesta di geocodifica Fai clic sulla sezione "Prova tu" e inserisci la località scelta nel campo "Indirizzo". Puoi specificare un indirizzo, un nome di 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 posizione, incluse 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 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, ovvero non devono essere memorizzati nella cache per più di 30 giorni e devono essere aggiornati dopo questo periodo.

Questa configurazione utilizzerebbe 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 questa posizione.

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

Personalizzazioni avanzate

Puoi apportare ulteriori personalizzazioni analizzando più a fondo il codice. La sezione seguente illustra alcune opzioni

Aggiungere 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.

Aggiungere 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 riportati i tipi di luoghi disponibili nella demo.

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

Personalizza lo stile (CSS)

Per gli stili abbiamo utilizzato le variabili CSS. Sono supportati in tutti i browser principali e consentono di modificare una riga in un unico punto 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.

Sovrapporre dati aggiuntivi

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

Rimuovere 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 proprie esigenze specifiche.

1.Rimuovi una determinata sezione dalla configurazione

• Sezione Posizione

Per rimuovere la sezione location, trova la riga seguente 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 commenta o eliminala:

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

• Sezione Videocamera

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

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

2. Aggiorna configurazioni combinate

Dopo aver rimosso una sezione, è essenziale aggiornare l'oggetto configurazione combinata. 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. Modificare gli elementi dell'interfaccia utente

Se la rimozione di una sezione comporta anche la rimozione di elementi dell'interfaccia utente correlati, aggiorna il codice corrispondente nel codice HTML. Ad esempio, se vuoi rimuovere una sezione specifica dal pannello di amministrazione, come la velocità della fotocamera, devi aggiornare sia il codice JS sia il codice HTML.

4. Rimuovere la sezione Impostazioni della videocamera

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Rimuovere il riepilogo della sezione Posizione

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusione

In questo documento abbiamo esplorato le varie opzioni di personalizzazione disponibili in Esplora aree per personalizzare la tua esperienza di esplorazione 3D. Modificando il comportamento della fotocamera, 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 diverse configurazioni e di ottimizzare i parametri in base alle tue esigenze specifiche. Sfruttando la potenza della personalizzazione, puoi creare percorsi coinvolgenti e personalizzati che catturino il tuo pubblico e rendano viva la tua visione.