Bonnes pratiques pour les cartes 3D

Ce guide présente en détail les composants Web 3D Maps et les points à prendre en compte lors de l'intégration à votre application.

Exemple de Place Search et de recherche d'itinéraires

Considérations sur les performances

Pour garantir une expérience fluide et réactive pour l'interactivité et les éléments visuels, tenez compte des approches suivantes.

Charger la carte

La configuration initiale du chargement et de l'affichage des cartes 3D combine des techniques de configuration du navigateur et des bonnes pratiques d'interface utilisateur pour une expérience utilisateur optimale.

• Chargement de l'API : utilisez le chargement dynamique asynchrone des cartes 3D pour charger l'API Maps JavaScript lors du chargement initial de la page.
• Bibliothèques : chargez les bibliothèques de manière programmatique si nécessaire, par exemple google.maps.importLibrary("maps3d"). Si vous utilisez des composants Web tels que <gmp-map-3d> directement dans votre page HTML avec le chargement de script direct, les bibliothèques se chargeront automatiquement au moment opportun.
• Gérer les éléments de la carte de base : utilisez un mapId personnalisé pour filtrer les points d'intérêt de la carte de base (mode HYBRID) et contrôler leur densité, en particulier si l'application possède son propre ensemble d'éléments personnalisés tels que des repères ou des polylignes. Cela évite l'encombrement visuel et les chevauchements potentiels. Vous pouvez également désactiver les fonctionnalités des tuiles vectorielles de la carte de base, telles que les points d'intérêt, les polylignes de routes, les noms de routes et les noms de rues (mode SATELLITE).
• Événements : écoutez les événements gmp-steadystate ou gmp-error pour créer votre logique ultérieure, comme le chargement des repères ou l'animation de la caméra.

Toile d'arrière-plan > Tuiles minifiées > Maillage du terrain > Maillage de la surface (par exemple, bâtiments) > Points d'intérêt et libellés des routes, éléments personnalisés chargés en parallèle (repères, modèles 3D, etc.)

• Interaction de l'utilisateur : attendez l'événement gmp-steadystate avant de modifier le contenu de la carte. Si un utilisateur commence à interagir (panoramique, zoom) avec la carte avant l'événement gmp-steadystate initial, l'événement ne se déclenchera qu'une fois que l'utilisateur aura arrêté d'interagir. Évitez d'afficher ou de mettre à jour le contenu en superposition (comme des repères ou des polygones) pendant que l'utilisateur déplace ou zoome sur la carte. Pour cela, écoutez les événements gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange et gmp-tiltchange.

• Utilisez requestAnimationFrame() (rAF) pour les mises à jour continues et séparez strictement les calculs intensifs des appels de dessin.

  • Utilisez rAF : synchronise les mises à jour avec le taux d'affichage du navigateur pour une animation fluide à 60 FPS et une consommation d'énergie réduite.
  • Évitez les tâches de dessin intensives : n'effectuez pas de tâches lourdes qui ne sont pas liées au dessin lors de la mise à jour finale.
  • Logique distincte : effectuez toute la logique intensive avant les appels de mise à jour minimale des composants Web dans la boucle rAF.

• Paramètres initiaux de la scène : <gmp-map-3d> Les paramètres de la caméra, comme l'inclinaison, ont une incidence sur la vitesse de chargement. Plus la scène est zoomée ou inclinée, plus les polygones affichés sont détaillés et nécessitent un chargement. Le niveau de détail dépend également de l'emplacement (par exemple, une ville avec de nombreux bâtiments par rapport à une campagne avec uniquement des éléments naturels).

  • Privilégiez les vues moins zoomées (haute altitude), peu ou pas inclinées.
  • Ajoutez des limites (exemple) à la carte pour que les utilisateurs restent concentrés sur une zone particulière et que les tuiles puissent se charger complètement.

• Visuel de préchargement : bien que <gmp-map-3d> se charge extrêmement rapidement, l'affichage en résolution maximale peut prendre un certain temps pour les utilisateurs disposant d'appareils bas de gamme (GPU faible) ou d'une bande passante limitée (4G lente). Dans ce cas, vous pouvez créer un préchargeur avec une image, une animation ou du texte, et charger la scène 3D en arrière-plan. Voir l'événement clé à utiliser ci-dessous :

Exemple de préchargeur

// 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();

• Carte 2D :
  • Une carte 2D alternative (SATELLITE) peut être fournie à ces utilisateurs, tout en incluant vos données géographiques telles que les repères.

• Vous pouvez également afficher une carte statique 2D complémentaire en mode SATELLITE pour permettre aux utilisateurs de visualiser un lieu donné pendant le chargement.

Remarque : Pour l'instant, chaque chargement de carte 2D ou 3D est facturé séparément. Ne générez donc la deuxième carte que lorsque les utilisateurs ont l'intention d'interagir avec elle.

Performances et gestion des éléments visuels

3D Maps propose plusieurs façons d'afficher des éléments visuels tels que des repères, des polylignes et des modèles 3D, avec des performances optimales et un temps d'affichage minimal, même pour les visuels plus volumineux.

Repères

Exemple de scénario : 150 à 300 ms pour charger 300 repères avec 41 glyphes de repère SVG différents (ordinateur portable moderne : macOS M3 Pro, Chrome)

• Choix de personnalisation optimal :
  • PinElement : pour les modifications de base des repères (couleur, échelle, bordure, glyphe de texte), utilisez l'élément <gmp-pin> ou la classe PinElement. Il s'agit de la méthode de personnalisation la plus performante.
  • Utilisez les repères HTMLImageElement ou SVGElement avec parcimonie : utilisez-les pour une personnalisation plus poussée, par exemple pour ajouter de la transparence ou injecter une image telle qu'une icône dans un SVGElement (nécessite un encodage en base64). Ils seront pixélisés lors du chargement et entraîneront une dégradation des performances. HTMLImageElement et SVGElement doivent être encapsulés dans un élément <template> avant d'être attribués à l'emplacement par défaut de Marker3DElement.
  • L'ajout de code HTML ou CSS brut n'est pas disponible pour le moment.
• Gérer le comportement en cas de collision : profitez de la propriété collisionBehavior du repère. Pour les repères critiques qui doivent toujours être visibles, définissez le comportement en conséquence. Pour les repères moins importants, autorisez-les à se masquer pour maintenir une expérience cartographique plus propre et moins encombrée, en particulier à des niveaux de zoom élevés.
• Points d'intérêt critiques uniquement : n'utilisez drawsWhenOccluded (ou définissez la propriété de manière programmatique) que pour les repères qui doivent absolument être visibles à travers les bâtiments ou le terrain (par exemple, une cible de sauvetage, une ligne de service enterrée ou l'avatar d'un utilisateur).
• Tester l'occlusion : comme la carte est en 3D, les repères peuvent être masqués visuellement (occlus) par des bâtiments ou du relief. Testez différents angles de caméra et altitudes de repères pour vous assurer que les points d'intérêt essentiels restent visibles, ou implémentez une logique pour ajuster la visibilité et l'altitude lorsqu'ils sont masqués.
• Exploiter l'altitude : dans les cartes en 3D, les repères doivent utiliser la position avec une valeur d'altitude. Pour les repères associés au relief ou aux bâtiments, utilisez altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' ou des paramètres similaires pour vous assurer que le repère s'ancre correctement lorsque la carte est inclinée ou pivotée.

Polygones et polylignes

Exemple de scénario : 100 à 150 ms pour charger 1 000 polygones (ordinateur portable moderne : macOS M3 Pro, Chrome)

• Simplifier la géométrie : avant l'affichage, appliquez un algorithme de simplification à vos données de chemin. Cela réduit le nombre de sommets tout en conservant la forme générale, ce qui améliore considérablement la vitesse d'affichage, en particulier pour les limites ou les itinéraires complexes.
• Décimation par niveau de zoom : pour les ensembles de données très volumineux, envisagez de ne charger une géométrie plus détaillée que lorsque l'utilisateur effectue un zoom avant sur la zone. À un niveau de zoom faible, seule une version très simplifiée de la polyligne ou du polygone est nécessaire.
• Précalculer pour les polygones extrudés : si vos polygones sont extrudés (extruded: true), les données de chemin définissent un volume 3D (un maillage). Le traitement de polygones complexes à grand nombre de sommets est gourmand en ressources de calcul. Assurez-vous que les données sources de vos polygones sont aussi simples que possible.
• Testez les performances des polylignes et des polygones : lorsque vous ajoutez de nombreuses polylignes/polygones ou des polylignes/polygones complexes, en particulier lorsqu'ils sont extrudés pour la 3D, assurez-vous qu'ils n'entraînent pas de baisse de la fréquence d'images. Limitez le nombre de sommets ou utilisez des algorithmes de simplification si nécessaire.
• Lorsque vous mettez à jour une forme, modifiez l'intégralité du tableau de chemins en une seule opération plutôt que de boucler et de modifier des éléments individuels. Une seule opération d'attribution (par exemple, polyline.path = newPathArray;) est beaucoup plus efficace que plusieurs mises à jour itératives.
• Évitez les polylignes extrudées (dans la mesure du possible) : bien que les polylignes puissent utiliser une valeur d'altitude pour être placées dans un espace 3D, l'extrusion d'une polyligne (par exemple, en lui attribuant une épaisseur de trait et une grande plage d'altitude) peut être gourmande en ressources graphiques. Dans la mesure du possible, utilisez des polylignes 2D au sol (RELATIVE_TO_GROUND) ou une épaisseur de trait minimale pour améliorer les performances.
• N'utilisez drawsOccludedSegments que pour les éléments de routage critiques. Pour les formes d'arrière-plan ou contextuelles, laissez-les être naturellement masquées par la géométrie 3D de la carte. L'affichage d'une géométrie masquée non critique ajoute une complexité de rendu inutile.

Modèles 3D

Le rendu et l'interactivité du modèle 3D .glb, comme l'événement de clic gmp, sont très rapides dans <gmp-map-3d>.

Exemple de scénario : il faut environ deux secondes pour afficher 1 000 occurrences d'un modèle 3D léger (200 Ko) se déplaçant le long d'un chemin. (ordinateur portable moderne : macOS M3 Pro, Chrome)

• Réduisez la taille des fichiers grâce à la compression : pour garantir un chargement rapide, en particulier sur les réseaux mobiles, veillez à ce que la taille des fichiers de modèle .glb complexes ne dépasse pas 5 Mo (idéalement moins). La principale méthode pour y parvenir consiste à appliquer la compression Draco aux données de maillage de vos fichiers .glb, ce qui peut réduire considérablement la taille du fichier (souvent de plus de 50%) avec une perte de qualité visuelle minimale.
• Centrer l'origine du modèle : assurez-vous que le logiciel de modélisation 3D exporte le modèle avec son origine (point 0, 0, 0) centrée à la base du modèle. Cela simplifie le positionnement et la rotation sur la carte, ce qui garantit que le modèle s'ancre correctement aux coordonnées de latitude et de longitude.
• Gérer le CORS : si vos fichiers de modèle sont hébergés sur un domaine ou un CDN différent de celui de votre application Web, vous devez configurer le serveur d'hébergement pour qu'il inclue les en-têtes de partage de ressources interorigines (CORS) nécessaires (par exemple, Access-Control-Allow-Origin: *). Sinon, la carte ne peut pas charger le modèle.