Typ renderowania (rastrowy i wektorowy)

Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrową i wektorową. Mapa rastrowa wczytuje mapę jako siatkę kafelków obrazu rastrowego opartych na pikselach, które są generowane po stronie serwera Google Maps Platform, a następnie udostępniane 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, która umożliwia przeglądarce dostęp do GPU na urządzeniu użytkownika w celu renderowania grafiki 2D i 3D.

Zalecamy używanie mapy wektorowej, ponieważ zapewnia ona użytkownikom najlepsze wrażenia dzięki lepszej jakości obrazu, lepszemu buforowaniu na mapach oraz możliwości 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, które używają elementu <div> z google.maps.Map, domyślnie korzystają z rastrowego typu renderowania.

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 skonfigurowane za pomocą identyfikatora mapy.

Określ opcję renderingType

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

  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,
  }
);

Po ustawieniu typu renderowania mapy wektorowej musisz ustawić opcje wymaganych funkcji.

  • Aby włączyć pochylenie, ustaw opcję mapy tiltInteractionEnabled na true lub wywołaj funkcję 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ślnym typem renderowania jest google.maps.RenderingType.VECTOR z włączonym sterowaniem nachyleniem i kierunkiem. Aby ustawić typ renderowania za pomocą elementu <gmp-map>, użyj atrybutu rendering-type.

Używanie identyfikatora mapy do ustawiania typu renderowania

Typ renderowania możesz też określić 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 Pochylenie i Obrót, aby włączyć pochylanie i obracanie na mapie. Dzięki temu możesz programowo dostosowywać te wartości, a użytkownicy mogą dostosowywać nachylenie i kierunek bezpośrednio na mapie. Jeśli użycie nachylenia lub kierunku będzie miało negatywny wpływ na aplikację, pozostaw pola Nachylenie i Obrót niezaznaczone, aby użytkownicy nie mogli dostosowywać nachylenia i obrotu.

Tworzenie identyfikatora mapy wektorowej

Następnie zaktualizuj kod inicjowania mapy, używając 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 tutaj:

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 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()}`);
  });```