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 caméra peuvent se déplacer vers un point de la carte, le survoler ou être combinées pour animer la Camera 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 (bâtiments ou terrain, par exemple) au point central de la caméra.

Aller à

L'exemple de code suivant montre comment utiliser le flyCameraTo pour animer le Camera afin qu'il se déplace 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 flyCameraAround pour animer la Camera afin qu'elle survole 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: {}
  )