Mapy wektorowe

Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrowe i wektorowego. Mapa rastrowa jest wczytywana domyślnie i wczytuje ją jako siatkę pikselowe kafelki obrazów rastrowych, które są generowane przez Google Maps Platform. po stronie serwera, a potem do aplikacji internetowej. Mapa wektorowa składa się z: kafelki wektorowe, które są rysowane w czasie wczytywania po stronie klienta przy użyciu WebGL to technologia internetowa, która umożliwia przeglądarkom dostęp do GPU do renderowania grafiki 2D i 3D.

Mapa wektorowa to ta sama mapa Google, z której korzystają użytkownicy. ma wiele zalet w porównaniu z domyślną mapą rastrową. ostrość zdjęć wektorowych oraz zbliżenie budynków 3D poziomów powiększenia. Mapa wektorowa obsługuje również niektóre nowe funkcje, takie jak możliwość dodawania materiałów 3D w widoku nakładki WebGL, automatycznego przechylania sterowanie nagłówkiem, ulepszone sterowanie kamerą i częściowe powiększenie dla płynności działania powiększania.

Pierwsze kroki z mapami wektorowymi

Sterowanie kamerą

Użyj funkcji map.moveCamera(), aby zaktualizować dowolną kombinację aparatu usług za jednym razem. Funkcja map.moveCamera() akceptuje jeden parametr zawierający wszystkie właściwości aparatu. Poniższy przykład pokazuje funkcję nawiązywania połączeń map.moveCamera(), aby ustawić wartoś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 funkcję map.moveCamera() z użyciem w pętli animacji, jak 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);

Zoom ułamkowy

Mapy wektorowe obsługują powiększenie cząstkowe, które umożliwia zamiast liczb całkowitych. Zarówno mapy rastrowe, jak i wektorowe obsługują ułamkowe powiększenie częściowe, powiększenie częściowe jest domyślnie włączone w przypadku map wektorowych i domyślnie wyłączone dla map rastrowych. Użyj opcji mapy isFractionalZoomEnabled, aby skręcić ułamkowy jak go włączyć lub wyłączyć.

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łączyć lub wyłączyć powiększenie cząstkowe, ustawiając Opcja mapy isFractionalZoomEnabled, jak pokazano tutaj:

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

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

Możesz skonfigurować detektor, aby wykrywał, czy włączone jest powiększenie cząstkowe. to najbardziej przydatne, jeśli nie ustawiono wyraźnie wartości true na isFractionalZoomEnabled lub false. Ten przykładowy kod sprawdza, czy powiększenie cząstkowe jest włączona:

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