Ajouter des animations de parcours de la caméra

Sélectionnez une plate-forme : Android iOS JavaScript

Vous pouvez ajouter des animations de trajectoire de caméra à votre carte 3D pour offrir une expérience plus immersive à vos utilisateurs. Les animations de trajectoire de la caméra peuvent voler vers un point de la carte, voler autour de celui-ci ou être combinées pour animer la Camera vers un point de la carte, y compris en spécifiant son altitude et son altitudeMode.

Lorsque vous configurez un Camera pour une animation, vous pouvez définir la propriété altitudeMode pour spécifier comment l'altitude de la caméra est interprétée :

  • AltitudeMode.absolute : interprète l'altitude en mètres au-dessus du niveau moyen de la mer (valeur par défaut si elle n'est pas spécifiée).
  • AltitudeMode.relativeToGround : interprète l'altitude en mètres au-dessus de la surface du sol au point central de la caméra.
  • AltitudeMode.relativeToMesh : interprète l'altitude en mètres au-dessus de la surface de maillage 3D la plus élevée (par exemple, des bâtiments ou un terrain) au point central de la caméra.

Aller à

L'exemple de code suivant montre comment utiliser le modificateur flyCameraTo pour animer Camera afin de voler vers un point spécifique sur une carte 3D.

Map(mode: .hybrid)
  .flyCameraTo(
    .init(
      center: .init(
        latitude: 47.6210296,
        longitude: -122.3496903,
        altitude: 585
      ),
      heading: 149.0,
      tilt: 77.0,
      roll: 0.0,
      range: 4000,
      altitudeMode: .relativeToGround
    ),
    duration: 5,
    trigger: animate,
    completion: {}
  )

Survoler

L'exemple de code suivant montre comment utiliser le modificateur flyCameraAround pour animer la Camera afin de survoler un point spécifique sur une carte 3D.

Map(mode: .hybrid)
  .flyCameraAround(
    .init(
      center: .init(
        latitude: 47.6210296,
        longitude: -122.3496903,
        altitude: 585
      ),
      heading: 149.0,
      tilt: 77.0,
      roll: 0.0,
      range: 3000,
      altitudeMode: .relativeToGround
    ),
    duration: 90,
    repeatCount: 3,
    trigger: flyAround,
    completion: {}
  )