Mapy wektorowe

Interfejs Maps JavaScript API udostępnia 2 różne implementacje mapy: rastrową i wektorową. Mapa rastrowa jest domyślnie wczytywana i wczytuje ją jako siatkę obrazów rastrowych opartych na pikselach. Są one generowane po stronie serwera Google Maps Platform, a następnie wyświetlane w aplikacji internetowej. Mapa wektorowa składa się z kafelków wektorowych, które są rysowane w czasie wczytywania po stronie klienta za pomocą technologii WebGL i GPU, która umożliwia przeglądarce renderowanie obrazu przez przeglądarkę.

Mapa wektorowa to ta sama mapa Google, z której korzystają użytkownicy. Ma ona szereg zalet w porównaniu z domyślną mapą rastrową, w szczególności ostrość obrazów wektorowych, a także dodanie budynków 3D przy dużym powiększeniu. Mapa wektorowa obsługuje również nowe funkcje, takie jak możliwość dodawania treści 3D w widoku nakładki WebGL, automatyczne sterowanie przechylaniem i kierunkiem, ulepszone sterowanie aparatem oraz powiększenie cząstkowe umożliwiające płynniejsze powiększanie.

Mapy wektorowe – pierwsze kroki

Sterowanie kamerą

Funkcja map.moveCamera() pozwala aktualizować dowolne kombinacje właściwości kamery naraz. map.moveCamera() akceptuje pojedynczy parametr ze wszystkimi właściwościami kamery do zaktualizowania. Ten przykład przedstawia wywołanie map.moveCamera() w celu ustawienia center, zoom, heading i tilt jednocześnie:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Możesz animować właściwości kamery, wywołując map.moveCamera() za pomocą pętli animacji, jak na przykładzie poniżej:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

Powiększenie ułamkowe

Mapy wektorowe obsługują powiększenie ułamkowe, które umożliwia powiększanie za pomocą wartości ułamkowych zamiast liczb całkowitych. Mimo że zarówno mapy rastrowe, jak i wektorowe obsługują powiększenie cząstkowe, powiększenie cząstkowe jest domyślnie włączone w przypadku map wektorowych, a domyślnie wyłączone w przypadku map rastrowych. Aby włączyć lub wyłączyć powiększenie cząstkowe, użyj opcji mapy isFractionalZoomEnabled.

Poniższy przykład pokazuje włączenie powiększenia częściowego podczas inicjowania mapy:

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

Możesz też włączyć lub wyłączyć powiększenie cząstkowe, ustawiając opcję mapy isFractionalZoomEnabled w ten sposób:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Możesz skonfigurować detektor do wykrywania, czy powiększenie cząstkowe jest włączone. Jest to najbardziej przydatne, jeśli nie ustawisz isFractionalZoomEnabled na true lub false. Ten przykładowy kod pozwala sprawdzić, czy powiększenie cząstkowe jest włączone:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});