Функции векторной карты

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

Посмотреть образец

Maps JavaScript API предлагает две различные реализации карты: растровую и векторную. Растровая карта загружает карту как сетку пиксельных растровых изображений, которые генерируются серверной частью Google Maps Platform, а затем передаются в ваше веб-приложение. Векторная карта состоит из векторных плиток, которые рисуются во время загрузки на стороне клиента с помощью WebGL, веб-технологии, которая позволяет браузеру получать доступ к графическому процессору на устройстве пользователя для рендеринга 2D- и 3D-графики.

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

• Программное управление наклоном и направлением
• Улучшенное управление камерой
• Дробное масштабирование для более плавного масштабирования

• 3D-контент и анимация

• Для карт, загруженных с помощью элемента div и JavaScript, типом рендеринга по умолчанию является google.maps.RenderingType.RASTER .

• Для карт, загруженных с помощью элемента gmp-map , типом рендеринга по умолчанию является google.maps.RenderingType.VECTOR с включенным управлением наклоном и направлением.

Начните работу с векторными картами

Наклон и вращение

Вы можете задать наклон и поворот (направление) на векторной карте , включив свойства heading и tilt при инициализации карты и вызвав методы setTilt и setHeading на карте. В следующем примере на карту добавляются некоторые кнопки, которые показывают программную регулировку наклона и направления с шагом в 20 градусов.

Машинопись

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Примечание: прочитайте руководство по использованию TypeScript и Google Maps.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

Примечание: JavaScript скомпилирован из фрагмента TypeScript.

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

HTML

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Попробуйте образец

JSFiddle.net Google Cloud Shell

Используйте жесты мыши и клавиатуры

Если включены пользовательские взаимодействия с наклоном и вращением (направлением) (программно или в Google Cloud Console), то пользователи могут регулировать наклон и вращение с помощью мыши и клавиатуры:

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

Программная регулировка наклона и направления

Используйте методы setTilt() и setHeading() для программной настройки наклона и направления на векторной карте. Направление — это направление, в котором камера смотрит по часовой стрелке, начиная с севера, поэтому map.setHeading(90) повернет карту так, чтобы восток был направлен вверх. Угол наклона измеряется от зенита, поэтому map.setTilt(0) смотрит прямо вниз, а map.setTilt(45) даст наклонный вид.

• Вызовите setTilt() чтобы задать угол наклона карты. Используйте getTilt() чтобы получить текущее значение наклона.
• Вызовите setHeading() чтобы задать заголовок карты. Используйте getHeading() , чтобы получить текущее значение заголовка.

Чтобы изменить центр карты, сохранив наклон и направление, используйте map.setCenter() или map.panBy() .

Обратите внимание, что диапазон углов, которые можно использовать, зависит от текущего уровня масштабирования. Значения за пределами этого диапазона будут ограничены текущим разрешенным диапазоном.

Вы также можете использовать метод moveCamera для программного изменения направления, наклона, центра и масштабирования. Узнать больше .

Влияние на другие методы

При наклоне или повороте карты изменяется поведение других методов JavaScript API Карт:

• map.getBounds() всегда возвращает наименьший ограничивающий прямоугольник, включающий видимую область; при применении наклона возвращаемые границы могут представлять большую область, чем видимая область области просмотра карты.
• map.fitBounds() сбросит наклон и направление на ноль перед подгонкой границ.
• map.panToBounds() сбросит наклон и направление на ноль перед панорамированием границ.
• map.setTilt() принимает любое значение, но ограничивает максимальный наклон на основе текущего уровня масштабирования карты.
• map.setHeading() принимает любое значение и изменяет его так, чтобы оно соответствовало диапазону [0, 360].

Управляйте камерой

Используйте функцию map.moveCamera() для обновления любой комбинации свойств камеры одновременно. map.moveCamera() принимает один параметр, содержащий все свойства камеры для обновления. В следующем примере показан вызов map.moveCamera() для установки center , zoom , heading и tilt одновременно:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Вы можете анимировать свойства камеры, вызвав map.moveCamera() с циклом анимации, как показано здесь:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

Положение камеры

Вид карты моделируется как камера , смотрящая вниз на плоскую плоскость. Положение камеры (и, следовательно, рендеринг карты) задается следующими свойствами: цель (местоположение широты/долготы) , направление , наклон и масштаб .

Цель (местоположение)

Целью камеры является местоположение центра карты, указанное в виде координат широты и долготы.

Широта может быть от -85 до 85 градусов включительно. Значения выше или ниже этого диапазона будут ограничены ближайшим значением в этом диапазоне. Например, указание широты 100 установит значение 85. Диапазон долготы составляет от -180 до 180 градусов включительно. Значения выше или ниже этого диапазона будут перенесены таким образом, чтобы они попали в диапазон (-180, 180). Например, 480, 840 и 1200 будут перенесены на 120 градусов.

Подшипник (ориентация)

Пеленг камеры определяет направление компаса, измеряемое в градусах от истинного севера, соответствующего верхнему краю карты. Если вы проведете вертикальную линию от центра карты до верхнего края карты, пеленг будет соответствовать направлению камеры (измеряемому в градусах) относительно истинного севера.

Азимут 0 означает, что верхняя часть карты указывает на истинный север. Азимут 90 означает, что верхняя часть карты указывает на восток (90 градусов по компасу). Азимут 180 означает, что верхняя часть карты указывает на юг.

API Карт позволяет менять направление карты. Например, водитель автомобиля часто поворачивает дорожную карту, чтобы совместить ее с направлением своего движения, в то время как туристы, использующие карту и компас, обычно ориентируют карту так, чтобы вертикальная линия указывала на север.

Наклон (угол обзора)

Наклон определяет положение камеры на дуге прямо над положением центра карты, измеряемое в градусах от надира (направления, указывающего прямо под камеру). Значение 0 соответствует камере, направленной прямо вниз. Значения больше 0 соответствуют камере, наклоненной к горизонту на указанное количество градусов. При изменении угла обзора карта отображается в перспективе, причем удаленные объекты кажутся меньше, а близлежащие — больше. Следующие иллюстрации демонстрируют это.

На изображениях ниже угол обзора составляет 0 градусов. Первое изображение показывает схему этого; позиция 1 — это позиция камеры, а позиция 2 — текущая позиция карты. Итоговая карта показана под ней.

Карта отображается с углом обзора камеры по умолчанию.

Угол обзора камеры по умолчанию.

На изображениях ниже угол обзора составляет 45 градусов. Обратите внимание, что камера перемещается на полпути по дуге между прямой сверху (0 градусов) и землей (90 градусов) в положение 3. Камера по-прежнему направлена ​​на центральную точку карты, но область, представленная линией в положении 4 , теперь видна.

Карта отображается под углом обзора 45 градусов.

Угол обзора камеры 45 градусов.

Карта на этом снимке экрана по-прежнему центрирована на той же точке, что и на исходной карте, но в верхней части карты появилось больше объектов. При увеличении угла более 45 градусов объекты между камерой и позицией карты кажутся пропорционально больше, а объекты за пределами позиции карты кажутся пропорционально меньше, что создает трехмерный эффект.

Увеличить

Уровень масштабирования камеры определяет масштаб карты. При большем уровне масштабирования на экране можно увидеть больше деталей, а при меньшем уровне масштабирования на экране можно увидеть больше мира.

Уровень масштабирования не обязательно должен быть целым числом. Диапазон уровней масштабирования, разрешенных картой, зависит от ряда факторов, включая цель, тип карты и размер экрана. Любое число вне диапазона будет преобразовано в ближайшее допустимое значение, которое может быть либо минимальным уровнем масштабирования, либо максимальным уровнем масштабирования. В следующем списке показан приблизительный уровень детализации, который вы можете ожидать увидеть на каждом уровне масштабирования:

• 1: Мир
• 5: Суша/континент
• 10: Город
• 15: Улицы
• 20: Здания

Примечание: из-за размера и плотности экрана некоторые устройства могут не поддерживать самые низкие уровни масштабирования.

На следующих изображениях показан визуальный вид различных уровней масштабирования:

Карта с уровнем масштабирования 5.

Карта с уровнем масштабирования 15.

Карта с уровнем масштабирования 20.

Дробный зум

Векторные карты поддерживают дробное масштабирование, что позволяет масштабировать с использованием дробных значений вместо целых чисел. Хотя и растровые, и векторные карты поддерживают дробное масштабирование, дробное масштабирование включено по умолчанию для векторных карт и выключено по умолчанию для растровых карт. Используйте опцию карты isFractionalZoomEnabled для включения и выключения дробного масштабирования.

В следующем примере показано включение дробного масштабирования при инициализации карты:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

Вы также можете включать и выключать дробное масштабирование, установив параметр карты isFractionalZoomEnabled , как показано здесь:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Вы можете установить прослушиватель для определения того, включено ли дробное масштабирование; это наиболее полезно, если вы явно не установили isFractionalZoomEnabled в true или false . Следующий пример кода проверяет, включено ли дробное масштабирование:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});

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