カメラパス アニメーションを追加する

プラットフォームを選択: Android iOS JavaScript

3D 地図にカメラパス アニメーションを追加すると、ユーザーに臨場感あふれるエクスペリエンスを提供できます。カメラパスのアニメーションでは、地図上のポイントにカメラを移動するアニメーションを作成できます。このとき、高度を指定することもできます。

ジャンプ

次のコードサンプルは、Map.flyCameraTo メソッドを使用して、3D 地図上の特定のポイントにカメラを移動させる方法を示しています。

Map(mode: .hybrid)
.flyCameraTo(
  camera: .init(
    center: .init(
      latitude: 47.6210296,
      longitude: -122.3496903,
      altitude: 585), // meters above mean sea level
    heading: 149.0,
    tilt: 77.0,
    roll: 0.0,
    range: 4000),
  duration: 5,
  trigger: animate,
  completion: {}
)

飛び回る

次のコードサンプルは、Map.flyCameraAround メソッドを使用して、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
    ),
    duration: 90,
    repeatCount: 3,
    trigger: flyAround,
    completion: {}
  )