Mapy wektorowe

Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrową i wektorówą. Domyślnie wczytuje się mapa rastrowa, która jest siatką pikseli rastrowych, generowanych przez Platformę Map Google po stronie serwera, a następnie przesyłanych do aplikacji internetowej. Mapa wektorowa składa się z pikselowych elementów wektorowych, które są rysowane po stronie klienta za pomocą WebGL, czyli technologii internetowej, która umożliwia przeglądarce dostęp do karty graficznej na urządzeniu użytkownika w celu renderowania grafiki 2D i 3D.

Wektorowa mapa to ta sama mapa Google, z której korzystają użytkownicy, i oferuje ona wiele zalet w porównaniu z domyślną mapą z płyt rastrowych, w tym przede wszystkim ostrość obrazów wektorowych oraz dodanie budynków 3D na małych poziomach powiększenia. Mapa wektorowa obsługuje też kilka nowych funkcji, takich jak możliwość dodawania treści 3D za pomocą widoku nakładki WebGL, programowe sterowanie pochyleniem i kierunkiem, ulepszone sterowanie kamerą oraz powiększanie z podziałem na części celem płynniejszego powiększania.

Pierwsze kroki z mapami wektorowymi

Sterowanie kamerą

Aby zaktualizować dowolną kombinację właściwości aparatu naraz, użyj funkcji map.moveCamera(). map.moveCamera() przyjmuje jeden parametr zawierający wszystkie właściwości kamery, które mają zostać zaktualizowane. W tym przykładzie wywołanie map.moveCamera() służy do jednoczesnego ustawiania parametrów center, zoom, heading i tilt:

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 funkcję map.moveCamera() z pętlą animacji, jak pokazano tutaj:

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 cząstkowe

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

Ten przykład pokazuje włączanie powiększenia dziesiętnego podczas inicjowania mapy:

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

Powiększenie cząstkowe możesz też włączać i wyłączać, 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ć listenera tak, aby wykrywał, czy włączona jest powiększenie cząstkowe. Jest to szczególnie przydatne, jeśli nie ustawisz opcji isFractionalZoomEnabled na true lub false. Poniższy przykładowy kod sprawdza, czy włączone jest powiększanie frakcyjne:

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