En esta página, se incluye información sobre las funciones clave de los mapas fotorrealistas en 3D de Maps JavaScript que te permiten crear experiencias 3D interactivas y envolventes. En la siguiente documentación, se abarca lo siguiente:
- Controla los eventos de la interfaz de usuario para lograr una interacción fluida.
- Incluye controles de exploración para navegar por espacios 3D.
- Usar rutas de cámara predeterminadas para las visitas guiadas
- Aplicar restricciones de la cámara para mantener el enfoque en un área específica
Eventos de interfaz de usuario
En esta sección, se describen los eventos interactivos y las notificaciones de cambio de estado que puedes detectar y controlar de forma programática cuando trabajas con mapas en 3D. En el navegador, JavaScript se controla mediante eventos, lo que significa que responde a las interacciones del usuario generando eventos que tu programa puede escuchar y ejecutar código según corresponda.
Existen dos tipos principales de eventos:
- Los eventos de interacción del usuario (como los clics del mouse) se propagan desde la vista del mapa 3D a tu código. Estos eventos te permiten responder a acciones directas del usuario dentro del entorno del mapa 3D. Ver muestra.
- Las notificaciones de cambio de estado reflejan las actualizaciones de los modelos de datos de mapas 3D subyacentes y el estado de renderización, con un esquema de nombres
property_changedconvencional.
Cada objeto de la API de mapeo 3D expone un conjunto de eventos con nombre para los que tu programa puede registrar objetos de escucha de eventos y ejecutar lógica cuando ocurren esos eventos con la función addEventListener() integrada. En el siguiente ejemplo, se ilustran los eventos comunes que se activan cuando un usuario interactúa con un mapa 3D.
En el siguiente ejemplo, se muestran los eventos que se activan a medida que un usuario interactúa con el mapa:
Controles de exploración
Los mapas que se muestran en la API de mapas fotorrealistas en 3D de Maps JavaScript contienen elementos de la IU que admiten la interacción del usuario con el mapa. Estos elementos se conocen como controles de usuario. Los controles de exploración se incluyen de forma predeterminada, pero puedes suprimirlos en tu aplicación.
En la siguiente imagen, se muestran los controles predeterminados que muestran los mapas fotorrealistas en 3D de Maps JavaScript:
A continuación, se muestra una lista del conjunto completo de controles de los mapas fotorrealistas en 3D de Maps JavaScript:
- El control de zoom muestra los botones "+" y "-" para cambiar el nivel de zoom del mapa.
- El control de inclinación te permite cambiar la inclinación de la cámara.
- El control de rotación te permite cambiar el rumbo de la cámara.
- El control de movimiento muestra los botones "←", "→", "↑" y "↓" para cambiar el centro del mapa.
Controles y animación de la cámara
Rutas de cámara predeterminadas
Los mapas fotorrealistas en 3D de Maps JavaScript proporcionan dos rutas de cámara predeterminadas. Para personalizar las rutas de la cámara, cambia la duración de la animación (lo que aumenta o disminuye la velocidad) o combínalas para crear experiencias más cinematográficas.
Los mapas fotorrealistas en 3D de Maps JavaScript admiten las siguientes rutas de cámara:
- La animación
FlyCameraTovuela desde el centro del mapa hasta un destino especificado. - La animación
FlyCameraAroundrota alrededor de un punto en el mapa la cantidad de veces que especifiques.
Las dos rutas disponibles se pueden combinar para volar a un punto de interés, girar a su alrededor y, luego, detenerse cuando se desee.
Restricciones de la cámara
Es posible que desees controlar el desplazamiento lateral de la cámara, la altitud máxima o crear límites de latitud y longitud que restrinjan el movimiento de un usuario en un mapa determinado. Puedes hacerlo con las restricciones de la cámara.
Para ver un ejemplo de cómo funcionan y se implementan las restricciones de la cámara, consulta la demostración.