Анимировать траектории движения камеры

Выберите платформу: Android iOS JavaScript

Вы можете добавить анимацию траектории движения камеры на свою 3D-карту, чтобы обеспечить пользователям более захватывающий опыт. Анимация траектории движения камеры может включать в себя движение к точке на карте или облет вокруг нее.

В следующем примере объединены анимации flyCameraTo и flyCameraAround :

Заданные траектории движения камеры

3D-карты в Maps JavaScript предоставляют два предустановленных пути камеры. Пути камеры можно настроить, изменив продолжительность анимации (тем самым увеличив или уменьшив скорость) или комбинируя их для создания более кинематографичных эффектов. Кроме того, вы можете управлять высотой камеры, указав параметр altitudeMode .

В Maps JavaScript 3D-карты поддерживают следующие пути перемещения камеры:

• Анимация flyCameraTo переносит камеру из центра карты в указанное место назначения.
• Анимация flyCameraAround вращает камеру вокруг точки на карте на указанное количество оборотов.

Два доступных маршрута можно объединить, чтобы долететь до интересующей точки, совершить оборот вокруг нее, а затем остановиться в указанном месте.

Перелет в

Следующий пример кода демонстрирует анимацию полета камеры к определенному месту:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Полетайте вокруг

Следующий пример кода демонстрирует анимацию полета камеры над заданной локацией:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

Объединить анимации

Приведенный ниже пример кода демонстрирует объединение анимаций для перемещения камеры в заданное место, а затем вращения вокруг этой точки после завершения первой анимации:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}