Prácticas recomendadas para 3D Maps

En esta guía, se proporciona una descripción detallada de los componentes web de Maps en 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 configuración inicial de carga y renderización de Maps en 3D combina técnicas de configuración del navegador y prácticas recomendadas de la IU para una experiencia del usuario óptima.

• Carga de la API: Usa la carga dinámica asíncrona de Maps en 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 de secuencia, 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 HÍBRIDO) 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 rutas, los nombres de rutas y los nombres de calles (modo SATÉLITE).
• 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 rutas, elementos personalizados que se cargan en paralelo (marcadores, modelos 3D, etc.)

• 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 panea o acerca el mapa. Para ello, evita mostrar o actualizar el contenido superpuesto (como marcadores o polígonos) escuchando 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 visualizació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.
  • Lógica separada: 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 (SATÉLITE) 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 SATÉLITE para que los usuarios visualicen un lugar determinado mientras se carga.

Nota: Por el momento, cada carga de mapa 2D y 3D se factura por separado, por lo que solo se renderiza el segundo mapa cuando los usuarios intentan interactuar con él.

Rendimiento y administración de elementos visuales

Maps en 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 marcadores HTMLImageElement o SVGElement 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 el momento, no se puede agregar HTML o CSS simple.
• 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 los datos de tu 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.
• Diezmado por nivel de zoom: Para conjuntos de datos muy grandes, considera cargar la geometría de mayor detalle 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 la 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 rutas 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 del modelo 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 modelo .glb complejos por debajo de 5 MB (idealmente, 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 modelo 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.