Обзор

Функции WebGL для Maps JavaScript API позволяют управлять наклоном и вращением, добавлять 3D-объекты непосредственно на карту и многое другое. Включены следующие функции:

• Просмотр наложения WebGL позволяет добавлять на карты пользовательскую 2D- и 3D-графику и анимированный контент.
• Наклон и заголовок теперь можно регулировать программно, а также с помощью жестов мыши и клавиатуры.
• Map.moveCamera() позволяет одновременно изменять несколько свойств камеры.
• Zoom теперь поддерживает дробные значения .

Начать

Чтобы использовать новые функции WebGL, вам необходимо использовать векторную карту. В этом разделе показано, как это сделать.

Укажите параметр renderingType

Используйте опцию renderingType , чтобы указать растровый или векторный тип рендеринга для вашей карты (идентификатор карты не требуется):

1. Загрузите библиотеку RenderingType ; это можно сделать при загрузке библиотеки карт:

   const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
   

2. При инициализации карты используйте опцию renderingType , чтобы указать RenderingType.VECTOR или RenderingType.RASTER :

   map = new Map(
     document.getElementById('map') as HTMLElement,
     {
       zoom: 4,
       center: position,
       renderingType: RenderingType.VECTOR,
     }
   );
   

Параметр renderingType переопределяет любые настройки типа рендеринга, заданные при настройке идентификатора карты.

• Чтобы включить наклон и вращение, установите для параметра tiltInteractionEnabled значение true или вызовите map.setTiltInteractionEnabled .
• Чтобы включить панорамирование, установите для параметра карты headingInteractionEnabled значение true или вызовите map.setHeadingInteractionEnabled .

Используйте идентификатор карты, чтобы установить тип рендеринга

Вы также можете указать тип рендеринга, используя идентификатор карты. Чтобы создать новый идентификатор карты, выполните действия, описанные в разделе Использование облачных стилей карты — получение идентификатора карты . Обязательно установите тип карты на JavaScript и выберите параметр «Вектор» . Установите флажок «Наклон и/или вращение» , чтобы включить наклон и вращение на карте. Это позволит вам программно корректировать эти значения, а также позволит пользователям регулировать наклон и направление непосредственно на карте. Если использование наклона или заголовка отрицательно повлияет на ваше приложение, оставьте флажок «Наклон и вращение» снятым, чтобы пользователи не могли регулировать наклон и вращение.

Затем обновите код инициализации карты, указав созданный вами идентификатор карты. Идентификаторы карт можно найти на странице управления картами . Укажите идентификатор карты при создании экземпляра карты с помощью свойства mapId , как показано здесь:

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

Используйте элемент <gmp-map>

Векторные карты, наклон и заголовок включены по умолчанию при использовании элемента <gmp-map> , который позволяет добавлять карту на страницу с помощью HTML. Узнать больше .

Примеры

Были предоставлены примеры для демонстрации этих функций:

• Просмотр наложения WebGL
• Наклон и вращение WebGL
• Обзор функций WebGL
• Демонстрация приложения WebGL Travel