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 przesyłane do aplikacji internetowej. Mapa wektorowa składa się z kafelków wektorowych, które są rysowane w momencie 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ć użytkownikom jak największą wygodę, zalecamy korzystanie z typu mapy wektorowej, ponieważ zapewnia ona lepszą zgodność wizualną, lepsze buforowanie na różnych mapach, a także możliwość kontrolowania nachylenia i kierunku na mapie. Więcej informacji o funkcjach mapy wektorowej

Domyślny typ renderowania

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

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

  • Mapy korzystające z elementu <div> z wartością domyślną google.maps.Map mają typ renderowania raster.

Ustaw typ renderowania mapy, określając opcję renderingType map lub ustawiając opcję powiązanego identyfikatora mapy. Opcja renderingType zastępuje wszystkie ustawienia typu renderowania wprowadzone podczas konfigurowania identyfikatora mapy.

Określ opcję renderingType.

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

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

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

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

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

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

  • Aby włączyć pochylenie, 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ą pochylenia i kierunku. Aby ustawić typ renderowania za pomocą elementu <gmp-map>, użyj atrybutu rendering-type.

Ustawianie typu renderowania za pomocą identyfikatora mapy

Możesz też określić typ renderowania za pomocą identyfikatora mapy. Utwórz identyfikator mapy, wykonując czynności opisane w artykule Korzystanie z definiowania stylów map w Google Cloud – uzyskiwanie identyfikatora mapy. Ustaw typ mapy na JavaScript i wybierz opcję Wektorowa lub Rastrowa. Zaznacz opcje Przechylenie i Obrót, aby włączyć przechylanie i obracanie mapy. 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życie pochylenia lub kierunku negatywnie wpłynie na działanie aplikacji, odznacz opcje Pochylenie i Obrót, aby użytkownicy nie mogli dostosowywać pochylenia i obrotu.

Tworzenie identyfikatora mapy wektorowej

Następnie zaktualizuj kod inicjowania mapy za pomocą utworzonego identyfikatora mapy. Identyfikatory map znajdziesz na stronie Zarządzanie mapami. Podaj identyfikator mapy podczas tworzenia instancji 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ć, który typ renderowania jest używany, wywołaj getRenderingType() na 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()}`);
  });```