Управление и исследование 3D-карты

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

Обзор элементов управления

Карты, отображаемые через фотореалистичные 3D-карты в JavaScript API Карт, содержат элементы пользовательского интерфейса для поддержки взаимодействия пользователя с картой. Эти элементы называются элементами управления , и вы можете включить их в пользовательский интерфейс или нет. Если отключить элементы управления пользовательским интерфейсом, пользователь по-прежнему сможет перемещаться по карте с помощью сочетаний клавиш.

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

Контроль за разведкой

На следующем изображении показан набор элементов управления по умолчанию, отображаемых фотореалистичными 3D-картами в JavaScript API Карт:

Изображение карты с элементами управления

Ниже приведен список полного набора элементов управления фотореалистичных 3D-карт в JavaScript-картах:

  • Элемент управления масштабом отображает кнопки «+» и «-» для изменения уровня масштабирования карты.
  • Регулятор наклона позволяет изменять наклон камеры.
  • Элемент управления «Поворот» позволяет изменять направление камеры.
  • Элемент управления «Перемещение» отображает кнопки «←», «→», «↑» и «↓» для изменения центра карты.

В следующем примере кода показано переключение элементов управления исследованием:

JavaScript 

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML 

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

Предустановленные пути камеры

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

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

  • Анимация 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 },
      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,
    rounds: 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-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Следующие шаги