Эта страница переведена с помощью Cloud Translation API.

Тип рендеринга (растровый и векторный)

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

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

Тип рендеринга по умолчанию

Тип отображения карты по умолчанию зависит от вашей реализации.

Для карт, использующих элемент <gmp-map> , по умолчанию используется векторный тип рендеринга.
Для карт, использующих элемент <div> с атрибутом google.maps.Map , по умолчанию используется растровый тип отображения.

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

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

Используйте параметр renderingType , чтобы указать растровый или векторный тип отображения для вашей карты (идентификатор карты не требуется). Для карт, загружаемых с помощью элемента div и JavaScript, тип отображения по умолчанию — google.maps.RenderingType.RASTER . Выполните следующие шаги, чтобы установить параметр renderingType :

Загрузите библиотеку RenderingType ; это можно сделать при загрузке библиотеки Maps:
```
const { Map, RenderingType } = await google.maps.importLibrary("maps");
```
При инициализации карты используйте параметр renderingType , чтобы указать либо RenderingType.VECTOR , либо RenderingType.RASTER :
```
map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);
```

Если задан тип отображения векторной карты, необходимо указать параметры для необходимых объектов.

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

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

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

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

Создать идентификатор векторной карты

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

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

Определить, какой тип рендеринга используется.

Чтобы определить, какой тип рендеринга используется, вызовите метод getRenderingType() для объекта карты, как показано в следующем примере:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```