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 cas d'utilisation pour la recherche de lieux et la recherche d'itinéraires. — Exemple de recherche de lieux et de calcul 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 des cartes 3D combine des techniques de configuration du navigateur et des bonnes pratiques d'UI pour une expérience utilisateur optimale.

Chargement de l'API : utilisez le chargement dynamique asynchrone de 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 sur votre page HTML avec le chargement direct de script, les bibliothèques se chargeront automatiquement au moment opportun.
Gérer les entités de la carte de base : utilisez un mapId personnalisé pour filtrer les POI 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 de 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 de repères ou l'animation de la caméra.

Séquence de chargement de la carte — Canevas d'arrière-plan > Tuiles réduites > Maillage du terrain > Maillage de surface (par exemple, les 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 en superposition (comme les repères ou les polygones) pendant que l'utilisateur fait un panoramique ou un zoom sur la carte. Pour ce faire, é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.
- 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.
- Évitez les opérations 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 des composants Web minimaux dans la boucle rAF.
Paramètres de scène initiaux : les paramètres de caméra <gmp-map-3d>, comme 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).
- 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 spécifique et que les tuiles puissent se charger complètement.
Visuel du préchargement : bien que <gmp-map-3d> se charge très rapidement, il peut mettre un certain temps à s'afficher en pleine résolution 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 — Exemple de préchargement

// 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 proposée à 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.

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, des polylignes et des modèles 3D avec des performances optimales et un temps de rendu minimal, même pour les éléments visuels à volume élevé.

Repères

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 marqueurs 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 base64). Elles seront rasterisées lors du chargement et entraîneront une surcharge de 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.
- Il n'est pas possible d'ajouter du code HTML ou CSS brut 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 offrir une expérience cartographique plus claire 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 visuellement masqués (occlus) par des bâtiments ou le 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 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 est correctement ancré lorsque la carte est inclinée ou pivotée.

Polygones et polylignes

Exemple de chargement de polygones — 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 très grands ensembles de données, envisagez de charger une géométrie plus détaillée uniquement 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 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 coûteux en termes 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 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'ensemble du tableau de chemin d'accès en une seule opération plutôt que de parcourir et de modifier les é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 (si possible) : bien que les polylignes puissent utiliser une valeur d'altitude pour être placées dans l'espace 3D, l'extrusion d'une polyligne (par exemple, en lui donnant 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, autorisez-les à être naturellement masquées par la géométrie 3D de la carte. Afficher la 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 chargement de modèle 3D — Exemple de scénario : il faut environ deux secondes pour afficher 1 000 occurrences d'un modèle 3D de lumière (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 les fichiers de modèles .glb complexes ne dépassent pas 5 Mo (idéalement moins). La principale méthode pour y parvenir consiste à appliquer la compression Draco aux données du maillage dans 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 minime.
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èle sont hébergés sur un domaine ou un CDN différents de votre application Web, vous devez configurer le serveur d'hébergement pour inclure les en-têtes CORS (Cross-Origin Resource Sharing) nécessaires (par exemple, Access-Control-Allow-Origin: *). Sinon, la carte ne pourra pas charger le modèle.