Prácticas recomendadas para 3D Maps

En esta guía, se proporciona una descripción detallada de los componentes web de Maps 3D y las consideraciones que debes tener en cuenta cuando los integras a tu aplicación.

Ejemplo de búsqueda de lugares y búsqueda de rutas

Consideraciones de rendimiento

Para garantizar una experiencia fluida y responsiva para la interactividad y los elementos visuales, considera los siguientes enfoques.

Carga el mapa

La carga inicial y la configuración de renderización de Maps 3D combinan técnicas de configuración del navegador y prácticas recomendadas de la IU para lograr una experiencia del usuario óptima.

• Carga de la API: Usa la carga dinámica asíncrona de Maps 3D para cargar la API de Maps JavaScript en la carga inicial de la página.
• Bibliotecas: Carga bibliotecas de forma programática cuando sea necesario, como google.maps.importLibrary("maps3d"). Como alternativa, si usas componentes web como <gmp-map-3d> directamente en tu página HTML con carga directa de, las bibliotecas se cargarán automáticamente en el momento adecuado.
• Administra las funciones del mapa base: Usa un mapId personalizado para filtrar los POI del mapa base (modo HYBRID) y controlar su densidad, en especial si la aplicación tiene su propio conjunto de elementos personalizados, como marcadores o polilíneas. Esto evita el desorden visual y la posible superposición. Como alternativa, puedes inhabilitar las funciones de mosaicos vectoriales del mapa base, como los POI, las polilíneas de carreteras, los nombres de carreteras y los nombres de calles (modo SATELLITE).
• Eventos: Escucha los eventos gmp-steadystate o gmp-error para compilar tu lógica posterior, como cargar marcadores y animar la cámara.

Lienzo de fondo > Mosaicos minimizados > Malla de terreno > Malla de superficie (p. ej., edificios) > Lugares de interés y etiquetas de carreteras, elementos personalizados que se cargan en paralelo (marcadores, modelos 3D, etcétera)

• Interacción del usuario: Espera el evento gmp-steadystate antes de realizar cambios en el contenido del mapa. Si un usuario comienza a interactuar (paneo, zoom) con el mapa antes del evento gmp-steadystate inicial, el evento solo se activará después de que el usuario deje de interactuar. Evita mostrar o actualizar el contenido superpuesto (como marcadores o polígonos) mientras el usuario hace un paneo o zoom en el mapa. Para ello, escucha gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange.

• Usa requestAnimationFrame() (rAF) para obtener actualizaciones continuas y separa estrictamente los cálculos intensivos de las llamadas de dibujo.

  • Usa rAF: Sincroniza las actualizaciones con la frecuencia de actualización del navegador para obtener una animación fluida de 60 FPS y reducir el consumo de energía.
  • Evita el trabajo de dibujo intensivo: No realices tareas pesadas que no sean de dibujo durante la actualización final.
  • Separa la lógica: Realiza toda la lógica intensiva antes de las llamadas de actualización mínimas de componentes web dentro del bucle rAF.

• Configuración inicial de la escena: <gmp-map-3d> La configuración de la cámara, como la inclinación, afectará la velocidad de carga. Cuanto más se acerque o incline la escena, más polígonos detallados se mostrarán y requerirán carga. El nivel de detalle también dependerá de la ubicación (p.ej., una ciudad con muchos edificios en comparación con el campo con solo elementos naturales).

  • Prefiere vistas menos acercadas (gran altitud), bajas o no inclinadas.
  • Agrega límites (muestra) al mapa para que los usuarios se enfoquen en un área en particular y los mosaicos se puedan cargar por completo.

• Visualización del precargador: Si bien <gmp-map-3d> se carga muy rápido, es posible que tarde un tiempo en mostrarse en resolución completa para los usuarios con dispositivos de gama baja (GPU baja) o ancho de banda (4G lento). En este caso, puedes crear un precargador con imagen, animación o texto con la escena 3D que se carga en segundo plano. Consulta el evento clave que se usará a continuación:

Ejemplo de precargador

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

• Mapa 2D:
  • Se puede entregar un mapa 2D alternativo (SATELLITE) a estos usuarios y, al mismo tiempo, incluir tus datos geográficos, como marcadores.

• Como alternativa, se puede mostrar un mapa estático 2D complementario en modo SATELLITE para que los usuarios visualicen un lugar determinado mientras se carga.

Nota: Por ahora, cada carga de mapa 2D y 3D se factura por separado, por lo que solo renderiza el segundo mapa cuando los usuarios tengan la intención de interactuar con él.

Rendimiento y administración de elementos visuales

Maps 3D ofrece varias formas de mostrar elementos visuales, como marcadores, polilíneas, polilíneas y modelos 3D con un rendimiento óptimo y un tiempo mínimo de renderización, incluso para imágenes de mayor volumen.

Marcadores

Ejemplo de situación: 150-300 ms para cargar 300 marcadores con 41 glifos de marcadores SVG diferentes (laptop moderna: macOS M3 Pro, Chrome)

• Opción de personalización óptima:
  • PinElement: Para cambios básicos de marcadores (color, escala, borde, glifo de texto ), usa el elemento <gmp-pin> o la clase PinElement. Este es el método de personalización que ofrece el mejor rendimiento.
  • Usa HTMLImageElement o SVGElement Markers con moderación: Úsalos para obtener más personalización, como agregar transparencia o insertar una imagen, como un ícono, en un SVGElement (requiere codificación base64). Se rasterizarán en la carga y generarán una sobrecarga de rendimiento. HTMLImageElement y SVGElement deben incluirse en el elemento <template> antes de asignarlos a la ranura predeterminada de Marker3DElement.
  • Por ahora, no está disponible la opción para agregar HTML o CSS sin formato.
• Administra el comportamiento de colisión: Aprovecha la propiedad collisionBehavior del marcador. Para los marcadores críticos que siempre deben estar visibles, configura el comportamiento en consecuencia. Para los marcadores menos importantes, permite que se oculten para mantener una experiencia de mapa más limpia y menos desordenada, en especial en niveles de zoom altos.
• Solo POI críticos: Usa drawsWhenOccluded (o configura la propiedad de forma programática) solo para los marcadores que deben verse a través de edificios o terrenos (p.ej., un objetivo de rescate, una línea de servicios subterránea o el avatar de un usuario).
• Prueba la oclusión: Como el mapa es 3D, los marcadores pueden quedar ocultos visualmente (ocluidos) por edificios o terrenos. Prueba diferentes ángulos de cámara y altitudes de marcadores para asegurarte de que los POI cruciales permanezcan visibles o implementa una lógica para ajustar la visibilidad y la altitud cuando estén ocluidos.
• Aprovecha la altitud: En los mapas 3D, los marcadores deben usar la posición con un valor de altitud. Para los marcadores asociados con el terreno o los edificios, usa altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' o parámetros de configuración similares para asegurarte de que el marcador se ancle correctamente cuando el mapa esté inclinado o rotado.

Polígonos y polilíneas

Ejemplo de situación: 100-150 ms para cargar 1,000 polígonos (laptop moderna: macOS M3 Pro, Chrome)

• Simplifica la geometría: Antes de la renderización, aplica un algoritmo de simplificación a tus datos de ruta. Esto reduce la cantidad de vértices y, al mismo tiempo, conserva la forma general, lo que mejora drásticamente la velocidad de renderización, en especial para límites o rutas complejos.
• Diezmación por nivel de zoom: Para conjuntos de datos muy grandes, considera cargar una geometría más detallada solo cuando el usuario acerque el área. En un nivel de zoom bajo, solo es necesaria una versión muy simplificada de la polilínea o el polígono.
• Cálculo previo para polígonos extruidos: Si tus polígonos están extruidos (extruded: true), los datos de ruta definen un volumen 3D (una malla). El procesamiento de polígonos complejos de alta vértice es costoso desde el punto de vista computacional. Asegúrate de que los datos de origen de tus polígonos sean lo más simples posible.
• Prueba el rendimiento de polilíneas y polígonos: Cuando agregues polilíneas o polígonos complejos o numerosos, en especial cuando se extruyen para 3D, asegúrate de que no provoquen caídas en la velocidad de fotogramas. Limita la cantidad de vértices o usa algoritmos de simplificación si es necesario.
• Cuando actualices una forma, modifica todo el array de ruta en una sola operación en lugar de iterar y modificar elementos individuales. Una sola operación de asignación (p.ej., polyline.path = newPathArray;) es mucho más eficiente que varias actualizaciones iterativas.
• Evita las polilíneas extruidas (si es posible): Si bien las polilíneas pueden usar un valor de altitud para colocarse en el espacio 3D, la extrusión de una polilínea (p.ej., darle un ancho de trazo y un gran intervalo de altitud) puede ser intensiva desde el punto de vista gráfico. Siempre que sea posible, usa polilíneas 2D en el suelo (RELATIVE_TO_GROUND) o un ancho de trazo mínimo para obtener un mejor rendimiento.
• Usa drawsOccludedSegments solo para elementos de enrutamiento críticos. Para formas de fondo o contextuales, permite que la geometría 3D del mapa las ocluya de forma natural. Mostrar geometría oculta no crítica agrega una complejidad de renderización innecesaria.

Modelos 3D

La renderización y la interactividad de modelos 3D .glb, como el evento gmp-click, son muy rápidas en <gmp-map-3d>.

Ejemplo de situación: Se tarda alrededor de 2 segundos en mostrar 1,000 instancias de un modelo 3D ligero (200 KB) que se mueve a lo largo de una ruta. (laptop moderna: macOS M3 Pro, Chrome)

• Minimiza el tamaño del archivo con la compresión: Para garantizar una carga rápida, en especial en redes móviles, mantén los archivos de modelos .glb complejos por debajo de 5 MB (lo ideal es que sean menos). El método principal para lograr esto es aplicar la compresión de Draco en los datos de malla dentro de tus archivos .glb, lo que puede reducir significativamente el tamaño del archivo (a menudo, en más del 50%) con una pérdida mínima de calidad visual.
• Centra el origen del modelo: Asegúrate de que el software de modelado 3D exporte el modelo con su origen (punto 0, 0, 0) centrado en la base del modelo. Esto simplifica el posicionamiento y la rotación en el mapa, lo que garantiza que el modelo se ancle correctamente a las coordenadas de latitud y longitud.
• Administra CORS: Si tus archivos de modelos están alojados en un dominio o CDN diferente al de tu aplicación web, debes configurar el servidor de hosting para que incluya los encabezados necesarios de Uso compartido de recursos entre dominios (CORS) (p.ej., Access-Control-Allow-Origin: *). De lo contrario, el mapa no podrá cargar el modelo.