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 fragmentów mapy wektorowej, 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ć użytkownikom jak największą wygodę, zalecamy korzystanie z mapy wektorowej, ponieważ zapewnia ona lepszą jakość obrazu, 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 różni się w zależności 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 rastrowego.

Ustaw typ renderowania mapy, określając opcję renderingType mapy 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. Załaduj bibliotekę RenderingType. Możesz to zrobić podczas ładowania 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 zmieniać nachylenie i kierunek bezpośrednio na mapie. Jeśli użycie pochylenia lub kierunku będzie miało negatywny wpływ na aplikację, pozostaw pola Pochylenie i Obrót niezaznaczone, aby użytkownicy nie mogli dostosowywać pochylenia i obrotu.

Tworzenie identyfikatora mapy wektorowej

Następnie zaktualizuj kod inicjowania mapy o utworzony identyfikator 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 metodę 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()}`);
  });```