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

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

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

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), пользователи могут регулировать наклон и вращение с помощью мыши и клавиатуры.

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

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

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

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

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

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

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

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

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

• 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);

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

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

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

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

Опорный подшипник (ориентация)

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

Азимут 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');
  }
});