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

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

Рекомендуем использовать векторные карты, поскольку они обеспечивают более высокое качество изображения, улучшенное кеширование и возможность управлять наклоном и направлением карты. Подробнее о функциях векторных карт…

Тип отрисовки по умолчанию

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

  • На картах, использующих элемент <gmp-map>, по умолчанию применяется векторный тип отрисовки.

  • Карты, использующие элемент <div> с google.maps.Map, по умолчанию используют растровый тип отрисовки.

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

Укажите вариант renderingType

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

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

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

  2. При инициализации карты используйте параметр 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 и выберите вариант Vector (Векторная) или Raster (Растровая). Установите флажки Tilt (Наклон) и Rotation (Ориентация), чтобы программно менять эти значения. Кроме того, пользователи смогут менять наклон и ориентацию карты непосредственно на ней. Если же это негативно влияет на ваше приложение, снимите флажки Tilt (Наклон) и Rotation (Ориентация). Тогда пользователи не смогут менять эти параметры.

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

Затем добавьте созданный идентификатор карты в код инициализации карты. Идентификаторы карт можно найти на странице Maps Management (Управление картами). При создании экземпляра карты необходимо указать ее идентификатор с помощью свойства 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()}`);
  });```