Interagir avec la carte

Cette page contient des informations sur les principales fonctionnalités des cartes 3D photoréalistes dans Maps JavaScript qui vous permettent de créer des expériences 3D interactives et immersives. La documentation suivante couvre les points suivants:

  • Gérer les événements de l'interface utilisateur pour une interaction fluide
  • y compris les commandes d'exploration pour la navigation dans les espaces 3D.
  • Utilisation de chemins de caméra prédéfinis pour les visites guidées
  • Appliquer des restrictions à la caméra pour maintenir la mise au point sur une zone spécifique

Événements de l'interface utilisateur

Cette section décrit les événements interactifs et les notifications de changement d'état que vous pouvez écouter et gérer de manière programmatique lorsque vous travaillez avec des cartes 3D. Dans le navigateur, JavaScript est basé sur des événements. En d'autres termes, il répond aux interactions des utilisateurs en générant des événements que votre programme peut écouter et exécuter du code en conséquence.

Il existe deux types principaux d'événements:

  • Les événements d'interaction utilisateur (comme les clics de souris) sont propagés de la vue de la carte 3D vers votre code. Ces événements vous permettent de répondre aux actions directes des utilisateurs dans l'environnement de carte 3D. Afficher un exemple
  • Les notifications de changement d'état reflètent les mises à jour des modèles de données cartographiques 3D sous-jacents et de l'état de rendu, à l'aide d'un schéma de dénomination property_changed conventionnel.

Chaque objet d'API de cartographie 3D expose un ensemble d'événements nommés pour lesquels votre programme peut enregistrer des écouteurs d'événements et exécuter une logique lorsque ces événements se produisent à l'aide de la fonction addEventListener() intégrée. L'exemple suivant illustre les événements courants déclenchés lorsqu'un utilisateur interagit avec une carte 3D.

L'exemple suivant montre les événements déclenchés lorsqu'un utilisateur interagit avec la carte:

Commandes d'exploration

Les cartes affichées dans l'API Maps JavaScript "Cartes 3D photoréalistes" contiennent des éléments d'interface utilisateur qui permettent à l'utilisateur d'interagir avec la carte. Ces éléments sont appelés commandes utilisateur. Les commandes d'exploration sont incluses par défaut, mais vous pouvez choisir de les supprimer dans votre application.

L'image suivante montre les commandes par défaut affichées par les cartes 3D photoréalistes dans Maps JavaScript:

Image de carte avec des commandes

Voici la liste de l'ensemble complet des commandes des cartes 3D photoréalistes dans Maps JavaScript:

  • La commande de zoom affiche les boutons "+" et "-" pour modifier le niveau de zoom de la carte.
  • Le contrôle de l'inclinaison vous permet de modifier l'inclinaison de la caméra.
  • Le contrôle de rotation vous permet de modifier l'orientation de la caméra.
  • La commande de déplacement affiche les boutons "←", "→", "↑" et "↓" pour modifier le centre de la carte.

Commandes de la caméra et animation

Préréglages des itinéraires photo

Les cartes 3D photoréalistes dans Maps JavaScript proposent deux parcours de caméra prédéfinis. Vous pouvez personnaliser les trajectoires de la caméra en modifiant la durée de l'animation (en augmentant ou en diminuant la vitesse), ou en les combinant pour créer des expériences plus cinématographiques.

Les cartes 3D photoréalistes dans Maps JavaScript sont compatibles avec les chemins de caméra suivants:

  • L'animation FlyCameraTo passe du centre de la carte à une destination spécifiée.
  • L'animation FlyCameraAround pivote autour d'un point sur la carte autant de fois que vous le spécifiez.

Les deux parcours disponibles peuvent être combinés pour voler vers un point d'intérêt, tourner autour de lui, puis s'arrêter lorsque vous le souhaitez.

Essayer l'exemple

Restrictions concernant les caméras

Vous pouvez contrôler le panoramique de la caméra, son altitude maximale ou créer des limites lat/lng limitant les mouvements d'un utilisateur sur une carte donnée. Pour ce faire, vous pouvez utiliser des restrictions de caméra.

Pour voir comment les restrictions de caméra fonctionnent et sont implémentées, regardez la démonstration.