Typ renderowania (rastrowy i wektorowy)

Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrową i wektorową. Mapa rastrowa wczytuje mapę jako siatkę rastrowych obrazów opartych na pikselach, które są generowane po stronie serwera przez Google Maps Platform, a następnie udostępniane Twojej aplikacji internetowej. Mapa wektorowa składa się z kafelków wektorowych, które są rysowane w czasie wczytywania po stronie klienta za pomocą WebGL, technologii internetowej umożliwiającej przeglądarce dostęp do procesora graficznego na urządzeniu użytkownika w celu renderowania grafiki 2D i 3D.

Aby zapewnić jak najlepsze wrażenia użytkownika, zalecamy używanie mapy wektorowej, ponieważ zapewnia ona lepszą jakość obrazu, lepsze buforowanie na różnych mapach oraz możliwość sterowania nachyleniem i kierunkiem na mapie. Więcej informacji o funkcjach mapy wektorowej

Domyślny typ renderowania

Domyślny typ renderowania mapy zależy od Twojej implementacji.

  • Mapy korzystające z elementu <gmp-map> domyślnie używają renderowania wektorowego.

  • Mapy korzystające z elementu <div> z google.maps.Map domyślnie używają renderowania rastrowego.

Typ renderowania mapy możesz ustawić, określając opcję mapy renderingType lub ustawiając opcję powiązanego identyfikatora mapy. Opcja renderingType zastępuje wszystkie ustawienia typu renderowania wprowadzone podczas konfigurowania identyfikatora mapy.

Określanie opcji renderingType

Za pomocą opcji renderingType możesz określić typ renderowania mapy – rastrowy lub wektorowy (nie jest wymagany identyfikator mapy). W przypadku map wczytywanych za pomocą elementu div i JavaScript domyślny typ renderowania to google.maps.RenderingType.RASTER. Aby ustawić opcję renderingType:

  1. Wczytaj bibliotekę RenderingType. Możesz to zrobić podczas wczytywania biblioteki Map:

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

  2. Podczas inicjowania mapy użyj opcji renderingType, aby określić RenderingType.VECTOR lub RenderingType.RASTER:

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

Gdy ustawisz typ renderowania mapy wektorowej, musisz skonfigurować opcje potrzebnych funkcji.

  • Aby włączyć nachylenie, ustaw opcję mapy tiltInteractionEnabled na true lub wywołaj map.setTiltInteractionEnabled(true).
  • Aby włączyć przesuwanie, ustaw opcję mapy headingInteractionEnabled na true lub wywołaj map.setHeadingInteractionEnabled(true).

W przypadku map wczytywanych za pomocą elementu <gmp-map> domyślny typ renderowania to google.maps.RenderingType.VECTOR, z włączoną kontrolą nachylenia i kierunku. Aby ustawić typ renderowania za pomocą elementu <gmp-map>, użyj rendering-type atrybutu.

Używanie identyfikatora mapy do ustawiania typu renderowania

Typ renderowania możesz też określić za pomocą identyfikatora mapy. Aby utworzyć identyfikator mapy, wykonaj czynności opisane w sekcji Korzystanie z dostosowywania stylu mapy w chmurze – uzyskiwanie identyfikatora mapy. Ustaw Typ mapy na JavaScript i wybierz opcję (Wektorowa lub Rastrowa). Zaznacz Nachylenie i Obrót , aby włączyć nachylenie i obrót na mapie. Dzięki temu będziesz mieć możliwość programowego dostosowywania tych wartości, a użytkownicy będą mogli dostosowywać nachylenie i kierunek bezpośrednio na mapie. Jeśli używanie nachylenia lub kierunku będzie miało negatywny wpływ na Twoją aplikację, pozostaw pola Nachylenie i Obrót odznaczone, aby użytkownicy nie mogli dostosowywać nachylenia i obrotu.

Tworzenie identyfikatora mapy wektorowej

Następnie zaktualizuj kod inicjowania mapy o utworzony identyfikator mapy. Identyfikatory map znajdziesz na stronie Zarządzanie mapami. Podczas tworzenia instancji mapy podaj identyfikator mapy za pomocą właściwości mapId, jak pokazano poniżej:

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

Wykrywanie używanego typu renderowania

Aby wykryć używany typ renderowania, wywołaj getRenderingType() w obiekcie mapy, jak pokazano w tym przykładzie:

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