Agrega animaciones de ruta de la cámara

Selecciona la plataforma: Android iOS JavaScript

Puedes agregar animaciones de ruta de la cámara a tu mapa en 3D para brindar una experiencia más inmersiva a tus usuarios. Las animaciones de ruta de la cámara pueden volar hacia un punto del mapa, volar alrededor de él o combinarse para animar la Camera hacia ese punto, lo que incluye especificar su altitud y su altitudeMode.

Cuando configuras un objeto Camera para una animación, puedes establecer la propiedad altitudeMode para especificar cómo se interpreta la altitud de la cámara:

  • AltitudeMode.absolute: Interpreta la altitud como metros sobre el nivel medio del mar (el valor predeterminado si no se especifica).
  • AltitudeMode.relativeToGround: Interpreta la altitud como metros sobre la superficie del suelo en el punto central de la cámara.
  • AltitudeMode.relativeToMesh: Interpreta la altitud como metros sobre la superficie de malla 3D más alta (como edificios o terreno) en el punto central de la cámara.

Visualizar

En la siguiente muestra de código, se indica cómo usar el modificador flyCameraTo para animar la Camera de modo que vuele a un punto específico en un mapa en 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: {}
  )

Vuela alrededor

En la siguiente muestra de código, se indica cómo usar el modificador flyCameraAround para animar la Camera de modo que vuele alrededor de un punto específico en un mapa en 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: {}
  )