Mise en route de 3D Area Explorer

Image

Présentation

La solution 3D Area Explorer vous offre une toute nouvelle façon de découvrir et d'explorer des lieux. Cette solution exploite les fonctionnalités des tuiles 3D photoréalistes de Google Maps Platform et de l'API Places pour créer des environnements 3D captivants et interactifs.

L'explorateur de zones 3D a été conçu pour répondre à plusieurs besoins:

  • Améliorez l'exploration des zones:les utilisateurs peuvent explorer virtuellement les quartiers avec un grand niveau de détails visuels, et ainsi obtenir des informations sur les éléments géographiques locaux et les points de repère.

  • Promouvez des récits basés sur le lieu : la possibilité d'intégrer des POI (points d'intérêt) dans des descriptions détaillées permet de créer des expériences basées sur la narration qui informent les utilisateurs sur des lieux spécifiques.

  • Stimuler le développement à l'aide des fonctionnalités 3D de Google Maps:illustre le potentiel des données cartographiques 3D de Google pour créer des cartes immersives et interactives.

Premiers pas :

Activer

Principales technologies

Cette solution repose sur deux technologies clés:

API Google Maps Platform:

Nous utilisons plusieurs API de Google Maps Platform pour obtenir la carte de base et les données permettant de créer cette expérience:

  • Tuiles 3D photoréalistes dans Google Maps : des modèles 3D haute résolution de bâtiments et de reliefs représentent les environnements urbains de façon réaliste et visuellement attrayante.
  • API Places : l'application peut identifier et afficher des informations détaillées sur les points d'intérêt (POI) dans la zone explorée, afin d'enrichir l'expérience utilisateur grâce aux connaissances locales.
  • La saisie semi-automatique aide les utilisateurs à rechercher des lieux ou des zones d'intérêt spécifiques.

CesiumJS

CesiumJS se charge de l'affichage du globe 3D haute résolution. Il gère le chargement et la visualisation des tuiles 3D photoréalistes de Google, qui fournissent un modèle de maillage 3D des bâtiments et du relief.

Camera Management (Gestion de la caméra) : CesiumJS fournit les outils pour contrôler la position, l'orientation et le mouvement de la caméra. Par exemple :

  • Définir le point de vue initial pour se concentrer sur le quartier spécifié lors du chargement de l'application.
  • Implémentation de mouvements dynamiques de caméra, tels que les animations automatisées en orbite à des fins d'exploration
  • Gestion des interactions de l'utilisateur avec le globe si de telles caractéristiques sont incluses (panoramique, zoom, rotation)

Découvrez comment les tuiles 3D photoréalistes peuvent utiliser un moteur de rendu de cartes 3D.

Composants principaux

L'application est divisée en deux:

  • Application d'administration
  • Application de démonstration

Ce diagramme donne un aperçu des différences et de la corrélation entre les deux applications:

Image

Il serait intéressant que nous examinions chaque application plus en détail:

Application d'administration

Cette application fournit une interface conviviale qui vous permet de personnaliser l'expérience 3D:

  • Recherche par lieu :utilisez la barre de recherche intégrée de saisie semi-automatique de Google Maps Platform pour trouver la zone que vous souhaitez mettre en avant. Une fois que vous avez sélectionné un lieu, la caméra y accède sans difficulté.

  • Caméra:ajustez la vitesse de mouvement de la caméra et le type d'orbite pour créer l'expérience de visionnage sélectionnée.

  • Lieux (POI) : définissez la densité, le rayon de recherche et les types de points d'intérêt (restaurants, cafés, points de repère, etc.) que vous souhaitez mettre en avant.

Utilisez cette application pour personnaliser l'expérience de vos utilisateurs finaux.

Vous trouverez une description détaillée de toutes les personnalisations apportées à l'explorateur de zones 3D.

Application de démonstration

Il s'agit de la dernière application visible par l'utilisateur, qui charge la configuration que vous avez créée dans l'application d'administration. Dans cet environnement immersif en 3D, les utilisateurs pourront explorer les zones sélectionnées et découvrir les lieux que vous avez mis en surbrillance.

Une fois que vous avez personnalisé l'apparence à l'aide de l'application Admin, vous pouvez télécharger la configuration et exécuter votre application personnalisée à partir du code source.

Expérience utilisateur

Image

Voici quelques-unes des principales fonctionnalités de l'application:

  1. Les utilisateurs peuvent explorer une zone de manière interactive en 3D, y compris des bâtiments, des points de repère ou des reliefs.
  2. Les utilisateurs peuvent rechercher et découvrir des lieux à proximité (par exemple, des musées, des parcs et des restaurants).
  3. Lorsqu'ils sélectionnent un lieu, les utilisateurs peuvent consulter des informations ou des récits détaillés le concernant.

  4. Les développeurs peuvent personnaliser leur expérience d'exploration à l'aide de paramètres et de commandes (s'ils utilisent l'application Admin).

  5. La rotation automatique est activée, ce qui permet à la caméra de pivoter automatiquement autour du centre de la zone sélectionnée.

Prérequis

  1. Clé API Google Maps: vous avez besoin d'une clé API valide avec les API suivantes activées:

  2. Serveur Web: vous pouvez diffuser l'application depuis:

    • Un serveur Web local (par exemple, à l'aide de Node.js, http-server)
    • Un service d'hébergement Web statique (l'application est fournie avec un Dockerfile)

Vous trouverez une description détaillée des options de déploiement dans la section Lisez-moi du projet GitHub.

Déploiement

Vous pouvez déployer l'application en tant qu'application de nœud ou conteneur Docker dans n'importe quel environnement de conteneur, tel que GKE ou GAE. La démonstration hébergée utilise l'architecture suivante:

Image

  • Dans cette architecture, le code se trouve dans un projet GitHub.
  • Cloud Build récupère le code lors de toute transmission vers l'instance principale et déclenche une opération de compilation.
  • Lors de la compilation, elle injecte une clé API et crée une image qui est ensuite stockée dans le registre d'artefacts.
  • Enfin, il déploie la dernière image stable d'Artifact Registry vers Cloud Run.
  • Des vérifications de l'état et des outils de surveillance sont également en cours d'exécution pour vérifier l'état des applications déployées.

Informations de facturation

La solution 3D Area Explorer utilise les services Google Maps Platform pour fournir une expérience immersive et dynamique. Certaines API peuvent entraîner des frais. Voici une présentation des API et des liens vers les tarifs.

Google Maps Platform – API 3D Tiles:

La solution de storytelling utilise l'API 3D Tiles pour améliorer l'expérience visuelle avec des données géospatiales. Pour en savoir plus sur les tarifs de l'API 3D Tiles, consultez la page Tarifs de l'API 3D Tiles de Google Maps Platform.

Google Maps Platform – API Places:

Utilisée pour les données géolocalisées, l'API Places apporte des informations enrichies à l'expérience de storytelling. Pour comprendre les coûts associés à l'API Google Places,consultez la page Tarifs de l'API Places de Google Maps Platform.

API Google Maps Platform – Autocomplete:

La fonctionnalité de saisie semi-automatique améliore les interactions des utilisateurs. Pour en savoir plus sur les tarifs de l'API Google Maps Autocomplete, veuillez consulter la page Tarifs de Places Autocomplete de Google Maps Platform.

CesiumJS:

CesiumJS est utilisé pour la visualisation du globe en 3D. Bien que CesiumJS lui-même soit Open Source, des fonctionnalités ou services supplémentaires peuvent avoir leurs propres coûts associés. Reportez-vous à la documentation CesiumJS pour connaître les offres premium.

Il est essentiel d'examiner le détail des tarifs de chaque API, car les frais sont déterminés individuellement en fonction de l'utilisation. Notez que Google Maps Platform propose un niveau sans frais avec une utilisation sans frais dans une certaine mesure. Les modalités de tarification peuvent varier en fonction de facteurs tels que le nombre de requêtes et la région d'utilisation.

Consultez toujours les pages de tarification officielles pour obtenir les informations les plus précises et à jour sur les coûts d'utilisation de Google Maps Platform et de CesiumJS. Assurez-vous de respecter les conditions d'utilisation décrites par ces services afin de gérer et de comprendre efficacement les dépenses associées.

Conclusion

Ce document présente les fonctionnalités, les composants, l'expérience utilisateur et les exigences techniques de l'explorateur de zone 3D.

En exploitant les tuiles 3D photoréalistes de Google et l'API Places, il permet d'explorer virtuellement des quartiers, de découvrir des points d'intérêt et d'en apprendre davantage sur l'histoire locale.

Que vous souhaitiez montrer une zone, améliorer l'exploration ou promouvoir la narration numérique, l'Area Explorer 3D offre une plate-forme visuellement époustouflante.

Essayez la démonstration et personnalisez-la à l'aide de l'application d'administration pour créer une expérience 3D attrayante et instructive.