Mapy wektorowe

Interfejs API JavaScript Map Google udostępnia 2 różne implementacje mapy: rastrowe i wektorowe. Mapa rastrowa jest domyślnie wczytywana jako siatka składających się z pikselowych 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 płytek wektorowych, które są renderowane podczas wczytywania po stronie klienta dzięki technologii internetowej WebGL, która pozwala przeglądarce na odczytanie obrazu DD3.

Mapa wektorowa to ta sama mapa Google, którą użytkownicy znają, i ma wiele zalet w porównaniu z domyślną mapą kafelków rastrowych, w szczególności ostrość obrazów wektorowych i 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 w technologii WebGL, automatyczne sterowanie pochyleniem i obrótem nagłówka, ulepszone sterowanie kamerą oraz fragmentację powiększenia w celu uzyskania płynnego powiększenia.

Mapy wektorowe – pierwsze kroki

Sterowanie kamerą

Aby zaktualizować dowolną kombinację właściwości kamery, użyj funkcji map.moveCamera(). map.moveCamera() akceptuje pojedynczy parametr ze wszystkimi właściwościami kamery, które mają zostać zaktualizowane. Poniższy przykład pokazuje, jak wywołać element map.moveCamera(), by ustawić właściwości 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 widać 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 częściowe, które umożliwia powiększanie 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 mapy te są domyślnie włączone, a w przypadku map rastrowych – domyślnie. Aby włączyć lub wyłączyć powiększenie częściowe, użyj opcji mapy isFractionalZoomEnabled.

Poniższy przykład pokazuje, jak włączyć powiększenie ułamkowe 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ć 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 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 ułamkowe:

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