Bonnes pratiques pour les cartes 3D

Ce guide fournit une présentation détaillée des composants Web Maps 3D et des points à prendre en compte lors de l'intégration à votre application.

Exemple de recherche de lieu et de recherche d'itinéraire.

Considérations sur les performances

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

Charger la carte

La configuration initiale du chargement et du rendu de Maps 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 de Maps 3D pour charger l'API Maps JavaScript lors du chargement initial de la page.
• Bibliothèques : chargez les bibliothèques par programmation si nécessaire, par exemple google.maps.importLibrary("maps3d"). Vous pouvez également utiliser des composants Web comme <gmp-map-3d> directement sur votre page HTML avec le chargement direct de script. Les bibliothèques se chargeront automatiquement au moment approprié.
• Gérer les fonctionnalités de la carte de base : utilisez un mapId personnalisé pour filtrer les POI de la carte de base (mode HYBRIDE) 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 de tuiles vectorielles de la carte de base telles que les POI, 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, par exemple le chargement de repères ou l'animation de la caméra.

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

• Interaction 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 cessé d'interagir. Évitez d'afficher ou de mettre à jour le contenu de superposition (comme des repères ou des polygones) pendant que l'utilisateur effectue un panoramique ou un zoom sur la carte. Pour ce faire, évitez d'afficher ou de mettre à jour le contenu de superposition (comme des repères ou des polygones) en écoutant gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange.

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

  • Utiliser rAF : synchronise les mises à jour avec la fréquence d'affichage du navigateur pour une animation fluide à 60 FPS et une consommation d'énergie réduite.
  • Éviter les tâches de dessin intensives : n'effectuez pas de tâches lourdes et non liées au dessin lors de la mise à jour finale.
  • Séparer la logique : effectuez toute la logique intensive avant les appels de mise à jour minimale des composants Web dans la boucle rAF.

• Paramètres de scène initiaux : <gmp-map-3d> les paramètres de caméra tels que l'inclinaison affectent la vitesse de chargement. Plus la scène est zoomée ou inclinée, plus les polygones détaillés s'affichent et doivent être chargés. 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).

  • Préférez 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 du préchargeur : bien que <gmp-map-3d> se charge extrêmement rapidement, l'affichage en pleine résolution 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, la scène 3D se chargeant en arrière-plan. Consultez 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 autre carte 2D (SATELLITE) peut être fournie à ces utilisateurs tout en incluant vos données géographiques telles que des repères.

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

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

Performances et gestion des éléments visuels

Maps 3D offre 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 de rendu minimal, même pour les visuels à volume élevé.

Repères

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

• Choix de personnalisation optimal:
  • PinElement : pour les modifications de repères de base (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 insérer une image telle qu'une icône dans un SVGElement (nécessite un encodage en base64). Ils seront pixellisés lors du chargement et entraîneront une surcharge 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 simple 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 cacher pour une expérience de carte plus claire et moins encombrée, en particulier à des niveaux de zoom élevés.
• POI critiques uniquement : n'utilisez drawsWhenOccluded (ou définissez la propriété par programmation) 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 souterraine ou l'avatar d'un utilisateur).
• Tester l'occlusion : comme la carte est en 3D, les repères peuvent être visuellement masqués (occlus) par des bâtiments ou le terrain. Testez différents angles de caméra et altitudes de repères pour vous assurer que les POI essentiels restent visibles ou implémentez une logique permettant d'ajuster la visibilité et l'altitude en cas d'occlusion.
• Exploiter l'altitude : dans les cartes 3D, les repères doivent utiliser la position avec une valeur d'altitude. Pour les repères associés au terrain 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 le rendu, 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 de rendu, 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 la géométrie plus détaillée que lorsque l'utilisateur effectue un zoom avant sur la zone. À un faible niveau de zoom, seule une version très simplifiée de la polyligne ou du polygone est nécessaire.
• Précalculer 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 à nombre élevé de sommets est coûteux en termes de calcul. Assurez-vous que les données sources de vos polygones sont aussi simples que possible.
• Tester 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 en 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'ensemble du tableau de chemins en une seule opération plutôt que de parcourir 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.
• Éviter les polylignes extrudées (si 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 donnant une largeur de trait et une grande étendue d'altitude) peut être gourmande en ressources graphiques. Dans la mesure du possible, utilisez des polylignes 2D au sol (RELATIVE_TO_GROUND) ou une largeur de trait minimale pour de meilleures performances.
• N'utilisez drawsOccludedSegments que pour les éléments de routage critiques. Pour les formes d'arrière-plan ou contextuelles, autorisez-les à être naturellement occluses 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é des modèles 3D .glb, tels que l'événement gmp-click, sont très rapides dans <gmp-map-3d>.

Exemple de scénario : environ 2 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éduire la taille des fichiers avec la compression : pour garantir un chargement rapide, en particulier sur les réseaux mobiles, limitez la taille des fichiers de modèles .glb complexes à moins de 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 des fichiers (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, en veillant à ce que le modèle s'ancre correctement aux coordonnées de latitude et de longitude.
• Gérer CORS : si vos fichiers de modèles sont hébergés sur un domaine ou un CDN différent de votre application Web, vous devez configurer le serveur d’hébergement pour inclure les en-têtes Cross-Origin Resource Sharing (CORS) nécessaires (par exemple, Access-Control-Allow-Origin: *). Sinon, la carte ne peut pas charger le modèle.