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

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

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

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

Средства управления разведкой

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

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

Ниже приведен список полного набора элементов управления фотореалистичных 3D-карт в Maps 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-карты в Maps JavaScript предоставляет два предустановленных пути движения камеры. Траектории камеры можно настроить, изменив продолжительность анимации (тем самым увеличивая или уменьшая скорость) или комбинируя их для создания более кинематографических впечатлений.

Фотореалистичные 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});
}

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