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

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

API JavaScript Карт предлагает две различные реализации карты: растровую и векторную. Растровая карта загружает карту в виде сетки фрагментов растровых изображений на основе пикселей, которые генерируются на стороне сервера платформы Google Maps, а затем передаются в ваше веб-приложение. Векторная карта состоит из векторных плиток, которые рисуются во время загрузки на стороне клиента с помощью 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

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

/* 
 * 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>
  <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

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

Если взаимодействие с пользователем по наклону и вращению (заголовку) включено (программно или в 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 для программного изменения направления, наклона, центра и масштабирования. Узнать больше .

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

Когда к карте применяется наклон или поворот, это влияет на поведение других методов Maps 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);

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

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

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

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

Пеленг (ориентация)

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

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

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

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

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

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

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

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

Увеличить

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

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

• 1: Мир
• 5: Суша/континент
• 10: Город
• 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');
  }
});