Mapy wektorowe

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

Interfejs Maps JavaScript API udostępnia 2 różne implementacje mapy: rastrowe i wektorowe. Mapa rastrowa jest domyślnie ładowana i wczytuje ją jako siatkę opartych na pikselach obrazów rasterowych, 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 są rysowane po stronie klienta za pomocą technologii WebGL, która umożliwia przeglądarce renderowanie grafiki DD3.

Mapa wektorowa to ta sama mapa Google, którą zaznajomili użytkownicy, ale ma wiele zalet w porównaniu z domyślną mapą kafelków, a zwłaszcza ostrość obrazów wektorowych oraz możliwość dodawania budynków 3D na zbliżonych poziomach powiększenia. Mapa wektorowa obsługuje też nowe funkcje, np. możliwość dodawania treści 3D za pomocą widoku nakładki WebGL, zautomatyzowaną kontrolę nachylenia i nagłówka, udoskonaloną kontrolę nad aparatem oraz powiększenie ułamkowe, które zapewnia płynne powiększenie.

Wprowadzenie do Map wektorowych

sterować 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. Poniższy przykład pokazuje wywoływanie funkcji 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
});

Aby animować właściwości kamery, możesz wywoływać metodę 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ększanie częściowe

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

Poniższy przykład pokazuje włączenie włączania częściowego powiększenia przy inicjowaniu 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ć powiększenie ułamkowe, 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, by wykryć, czy powiększenie cząstkowe jest włączone. Ta opcja jest najbardziej przydatna, jeśli nie ustawisz jawnie isFractionalZoomEnabled na true lub false. Ten przykładowy kod sprawdza, czy włączone jest powiększenie cząstkowe:

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