Mapy wektorowe

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrowe i wektorowe. Mapa rastrowa jest domyślnie wczytywana i wczytuje ją jako siatkę kafelków obrazów rastrowych, które są 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 podczas renderowania na stronie internetowej są renderowane za pomocą WebGL, czyli przeglądarki, która pozwala uzyskać dostęp do obrazu D.

Mapa wektorowa to ta sama, znajoma przez użytkowników mapa Google, która oferuje liczne korzyści w porównaniu z domyślną mapą kafelkową, szczególnie dokładność obrazów wektorowych i możliwość dodawania budynków 3D na zbliżonych poziomach powiększenia. Mapa wektorowa obsługuje też niektóre nowe funkcje, takie jak możliwość dodawania treści 3D przy użyciu Nakładek WebGL, zautomatyzowana kontrola pochylenia i przesuwania nagłówka, ulepszone sterowanie aparatem i powiększenie cząstkowe, aby płynniej wygładzać.

Wprowadzenie do Map wektorowych

Sterowanie kamerą

Użyj funkcji map.moveCamera(), aby zaktualizować dowolną kombinację właściwości kamery jednocześnie. map.moveCamera() akceptuje pojedynczy parametr, który zawiera wszystkie właściwości kamery do zaktualizowania. Poniższy przykład pokazuje, jak wywołać map.moveCamera(), aby ustawić 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() 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 częściowe, które pozwala powiększać przy użyciu wartości ułamkowych zamiast liczb całkowitych. Chociaż mapy rastrowe i wektorowe obsługują powiększenie częściowe, w przypadku map wektorowych są one domyślnie włączone, a w przypadku map rastrowych – domyślnie wyłączone. Aby włączyć lub wyłączyć powiększenie częściowe, użyj opcji mapy isFractionalZoomEnabled.

Poniższy przykład pokazuje włączanie częściowego powiększenia 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łączać i wyłączać ułamkowe powiększenie, ustawiając opcję mapy isFractionalZoomEnabled w taki sposób:

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

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

Możesz ustawić odbiornik, aby określić, czy powiększenie cząstkowe jest włączone. Jest to szczególnie przydatne, jeśli nie ustawisz funkcji isFractionalZoomEnabled na true lub false. Ten przykładowy kod sprawdza, czy włączone jest powiększenie częściowe:

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