3D Area Explorer es una solución que te permite explorar comunidades de en 3D cautivadores. La solución aprovecha lo siguiente: Los mosaicos fotorrealistas en 3D de Google, Búsqueda de Places, Place Details, y APIs de Autocomplete.
Primeros pasos:
Habilitar
Personaliza la experiencia
La solución 3D Area Explorer es altamente personalizable, lo que te permite adaptar
la experiencia a los recorridos del cliente. Puedes personalizar
mediante el panel de control de la IU o el archivo config.json
.
¿Todo listo para la personalización? A continuación, le indicamos cómo hacerlo:
Ubicación
Define el punto de partida de tu experiencia ajustando la latitud y la longitud.
en el archivo config.json
.
Control de la cámara
Toma el control de tu recorrido seleccionando el tipo de órbita de la cámara: un clásico circular o una onda sinusoidal interesante.
Órbita fija:
Es una órbita circular a una altura fija y alrededor de un punto de interés.
Observa una órbita fija en acción explorando Google Sídney Office.
Órbita dinámica:
La cámara se mueve suavemente en una trayectoria de onda sinusoidal alrededor de lugar de interés. Este movimiento único permite que los usuarios observen de interés desde diversas alturas y ángulos, lo que ofrece una experiencia una experiencia visual envolvente.
Para ver una órbita dinámica en acción, explora la Eiffel. torre.
Lugares de interés:
- Determina los tipos de lugares que deseas visitar para personalizar tu exploración
descubrir. Elige entre museos, parques, escuelas y mucho más con la
types
array enconfig.json
. - Establece la cantidad máxima de lugares de interés que se muestran ajustando el
Parámetro
density
. - Modifica
searchRadius (in meters)
para incluir gemas ocultas cercanas o enfoque en áreas específicas. - Establece la velocidad elegida para el movimiento de la cámara con el parámetro
speed (in revolutions per minute)
.
Cómo precargar tu exploración: obtén más detalles con la personalización de URL
3D Area Explorer te permite predefinir tu exploración con una URL personalización. Esto elimina la necesidad de configuración manual, lo que agiliza la experiencia del usuario.
Cómo crear la URL perfecta:
Simplemente agrega parámetros específicos a la URL del Explorador de área para establecer la ubicación y otros parámetros de configuración. Por ejemplo:
https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439
Esta URL establece el punto de partida en la latitud y longitud especificadas, y te transportará al instante a la ubicación elegida. Parámetros disponibles:
location.coordinates.lat
: La latitud de la ubicación que elegiste.location.coordinates.lng
: Es la longitud de la ubicación que elegiste.poi.types
: Es una lista separada por comas de los tipos de lugares de interés que se mostrarán.poi.density
: Es la cantidad máxima de lugares de interés elegida.poi.searchRadius
: Es el radio para buscar lugares de interés cercanos.camera.speed
: La velocidad de la órbita de la cámara.camera.orbitType
: Es el tipo de órbita de la cámara ("órbita fija" o "dinámica).
Beneficios de la personalización de la URL:
- Define de forma previa la configuración elegida para optimizar la experiencia del usuario.
- Comparte los viajes orientados con ubicaciones y lugares de interés específicos precargados.
- Incorpora sin problemas las experiencias del Explorador de área preconfiguradas en los sitios web.
Con la personalización de las URLs, puedes crear experiencias personalizadas y invita a otros a embarcarse en aventuras seleccionadas.
Personalizaciones adicionales
En la sección anterior, se exploraron ajustes accesibles a través de la IU o la configuración . Sin embargo, también hay otros parámetros integrados que puedes modificar para personalizar aún más la aplicación.
Para realizar estas personalizaciones avanzadas, deberás mirar el código en el
src/utils/cesium.js
ubicado en el directorio src. Lo siguiente
variables que se pueden cambiar para alterar el aspecto de la aplicación
Altura de la cámara
Controla la altura a la que se posiciona la cámara cuando vuelas hacia un punto.
ajustando el valor de CAMERA_HEIGHT
Los valores más altos proporcionarán una
vista panorámica alejada, mientras que los valores más bajos te acercarán a la
detalles del área
// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
- Parámetro de configuración:
CAMERA_HEIGHT
- Valor predeterminado: 100
- Descripción: define la altura de la cámara sobre la ubicación objetivo cuando volando a un punto.
- Valores de ejemplo:
- 50: Vista más cercana, con énfasis en los detalles.
- 200: Una perspectiva más panorámica.
Ángulo de la cámara
La inclinación de la cámara se define con BASE_PITCH. Usar valores negativos para una inclinación hacia abajo y valores positivos para una visión ascendente. Para agregar un movimiento dinámico sutil a tu exploración, cambia 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;
- Parámetro de configuración:
BASE_PITCH
yAUTO_ORBIT_PITCH_AMPLITUDE
- Valores predeterminados:
BASE_PITCH
: -30 (inclinación hacia 30 grados hacia abajo)AUTO_ORBIT_PITCH_AMPLITUDE
: 10 (cambiando el tono 10 grados por el tiempo)
Descripción: El inclinación de la cámara es la inclinación visual de un mapa, que se mide en grados. También se conoce como inclinación. Esta configuración define el valor inicial y ajuste de inclinación dinámico durante las rotaciones automáticas.
Valores de ejemplo:
BASE_PITCH
: 0 (cámara en nivel)AUTO_ORBIT_PITCH_AMPLITUDE
: 0 (sin variación en la presentación)
Alcance y zoom de la cámara
Estos parámetros establecen el nivel de zoom que se aplica cuando se enfoca un elemento puntos. Valores más bajos significan un zoom más cercano.
// 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;
Parámetro de configuración: RANGE_AMPLITUDE_RELATIVE
y ZOOM_FACTOR
Valores predeterminados:
RANGE_AMPLITUDE_RELATIVE
: 0.55 (variación de distancia relativa)ZOOM_FACTOR
: 20 (factor de zoom de la cámara)
Descripción: Esta configuración define la variación del rango durante la cámara y el nivel de zoom para verla mejor.
Valores de ejemplo:
RANGE_AMPLITUDE_RELATIVE
: 1 (variación de rango completo)ZOOM_FACTOR
: 10 (menos 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.
};
Restablecimiento de la cámara
Cuando un usuario desea restablecer la cámara a la posición original, el Se usan los valores CAMERA_OFFSET. Esta configuración incluye el encabezado (rotación), inclinación (inclinación) y rango (qué tan lejos se encuentra la cámara del centro).
- Parámetro de configuración:
CAMERA_OFFSET
- Valores predeterminados:
heading
: 0 (sin desplazamiento de rotación)pitch
: Cesium.Math.toRadians(-30) (desplazamiento 30 grados hacia abajo)range
: 800 (800 metros desde el centro)
- Descripción: define la orientación, el paso y el rango de la cámara para restablecer el vista.
- Valores de ejemplo:
heading
: 45 (grados, vista al noroeste)range
: 1,500 metros (más lejos del centro)
Coordenadas de inicio:
Las START_COORDINATES definen la longitud, latitud y altura iniciales de la cámara. Aquí es donde comenzará la exploración, así que establécela en el área que desees. que los usuarios vean primero.
// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
longitude: 0,
latitude: 60,
height: 15000000, // 15,000 km above the surface
};
- Parámetro de configuración:
START_COORDINATES
Valores predeterminados:
longitude
: 0latitude
: 60height
: 15,000,000 (15,000 km sobre la superficie)
Valores de ejemplo:
longitude
: -122.4934,latitude
: 37.7951 (Puente Golden Gate)height
: 2,000 (posición de inicio más cercana)
Cómo cargar una ubicación predefinida
El objeto location
de config.json
establece el centro del área. Es el
punto de vista inicial de la cámara en el visor Cesium.coordinates
: Define el
latitud (lat
) y longitud (lng
) de la ubicación a la que deseas que la cámara
desplazar lateralmente al principio. Ajusta estos valores para configurar la cámara en cualquier ubicación específica en
en el mundo.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
Esta configuración te permite iniciar tu aplicación de 3D Place Navigator. acercarte a una ubicación específica que elijas. Puedes usar la herramienta Geocoding de Google para obtener la latitud y longitud las coordenadas de una dirección o del nombre de un lugar especificándolos en la ubicación objeto:
- Acceder a la página de Geocoding Herramienta.
- Crea una solicitud de geocodificación. Haz clic en el botón "Try It Yourself". y ingresa tu ubicación elegida en la "Dirección" . Puedes especificar una dirección, nombre del lugar o incluso puntos de referencia.
- Generar coordenadas. Haz clic en el botón "Ejecutar". para enviar la solicitud. El
devolverá una respuesta con información variada sobre la ubicación.
incluidas sus coordenadas de latitud y longitud que se muestran en el
geometry.location
. - Usa geocódigos Copia los valores de latitud y longitud recuperados de
y pégalas en el objeto
coordinates
de tu configuración.
Nota: Los códigos geográficos que se utilicen de esta manera deben cumplir con las condiciones descritas en Google Maps. Condiciones del Servicio de la plataforma Servicios sección 3.4, que no deben almacenarse en caché por más de 30 días y deben se actualizará después de ese período.
Esta configuración usaría la herramienta Geocoding para determinar automáticamente la coordenadas de la sede central de Google en Mountain View, California, y lanzar tu aplicación 3D Place Navigator con la cámara centrada en esa ubicación.
Personalización avanzadas
Puedes hacer personalizaciones adicionales profundizando en el código. En la siguiente sección, se explican algunas opciones
Cómo agregar una ruta de cámara nueva
De inmediato, la solución implementa dos rutas de cámara diferentes:
fixed-orbit" | "dynamic-orbit"
Pero si lo deseas, puedes crear una nueva ruta de la cámara, puedes implementarla con el
/src/utils/cesium.js en la función calculateAutoOrbitFrame
.
Para usar este nuevo cálculo de la ruta en el panel de configuración,consulta la
implementación en demo/src/camera-settings.js.
Agrega más tipos de lugares
La lista de tipos de lugares para la configuración se puede ajustar en el archivo.
demo/src/place-settings.js
A partir de la línea 4, están los tipos de lugares que son
disponibles en la demostración.
Si deseas usar tipos de lugares específicos sin cambiar la fuente de demostración,
podrías agregarlas al archivo config.json
en poi.types
Personalizar el estilo (css)
Para los estilos, trabajamos con variables de CSS. Se admiten en todas las principales
navegador y permitir cambiar una línea en un lugar central y actualizar
propiedades específicas de CSS. Nuestras variables CSS se definen en src/main.css.
puedes ajustar los colores, la configuración de la fuente y los rellenos o márgenes para todo
y mantener la integridad de su aplicación.
Superponer datos adicionales
Para superponer datos adicionales, debes actualizar el archivo src/utils/cesium.js y consulta la documentación sobre cesio sobre cómo agregar GeoJSON u otras referencias geográficas datos al mundo.
Quita secciones de configuración
Nuestra aplicación de JavaScript tiene tres secciones principales en el
de configuración de Terraform: demo/src/[config-panel.js](config-panel.js): location
,
poi
y camera
. En cada una de estas secciones, se proporcionan opciones de configuración para
diferentes aspectos de la aplicación. Los desarrolladores pueden personalizar estas secciones
según sus necesidades específicas.
1.Quitar una sección específica de la configuración
- Sección de ubicación
Para quitar la sección location
, busca la siguiente línea en tu código y
comentarlo o borrarlo:
const locationConfig = { ...config.location, ...customConfig.location };
- Sección de lugares de interés
Para quitar la sección poi
, busca la siguiente línea en tu código y comentario
o borrarla:
const poiConfig = { ...config.poi, ...customConfig.poi };
- Sección de cámara
Para quitar la sección camera
, busca la siguiente línea en tu código y comentario
o borrarla:
const cameraConfig = { ...config.camera, ...customConfig.camera };
2. Actualizar configuraciones combinadas
Después de quitar una sección, es esencial actualizar la configuración combinada
. Este objeto combina la configuración predeterminada con cualquier personalización.
Quita la propiedad correspondiente del objeto 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. Ajusta los elementos de la IU
Si quitar una sección también implica quitar elementos relacionados de la IU, actualiza el código. como corresponda en el código HTML. Por ejemplo, si quieres quitar un elemento en el panel de administración, como la velocidad de la cámara, debes actualizar js y html para ello.
4. Quitar la sección de configuración de la cámara
Para quitar la sección de configuración de la cámara de la IU, busca la siguiente línea y comentarlo o borrarlo:
const cameraSettingsSecgetCameraSettingsSection(cameraConfig);
Cómo quitar el resumen de la sección de ubicación
const locationSection = await getLocationSettingsSection(locationConfig);
Conclusión
En este documento, exploramos las diversas opciones de personalización disponibles en el Explorador de áreas para personalizar tu experiencia de exploración en 3D. Modificando el comportamiento de la cámara, el ajuste de la inclinación visual y el cambio de los niveles de zoom, puedes crear experiencias únicas y atractivas que muestren los parámetros de configuración y los puntos que seleccionaste. interesantes.
Recuerda experimentar con diferentes configuraciones y ajustar de parámetros según tus necesidades específicas. Si aprovechas el poder de personalizada, puedes crear recorridos envolventes y personalizados que cautiven a tu público y le das vida a tu visión.