Elementy mapy wektorowej

Wybierz platformę: Android iOS JavaScript

Wyświetl próbkę

Interfejs Maps JavaScript API oferuje 2 różne implementacje mapy: rastrową i wektorową. Mapa rastrowa wczytuje mapę jako siatkę kafelków obrazu rastrowego opartych na pikselach, które są generowane po stronie serwera Google Maps Platform, a następnie udostępniane aplikacji internetowej. Mapa wektorowa składa się z kafelków wektorowych, które są rysowane w czasie wczytywania po stronie klienta za pomocą WebGL – technologii internetowej, która umożliwia przeglądarce dostęp do GPU na urządzeniu użytkownika w celu renderowania grafiki 2D i 3D.

Mapa wektorowa to ta sama mapa Google, którą znają Twoi użytkownicy. Ma ona wiele zalet w porównaniu z domyślną mapą kafelkową, m.in. ostrość obrazów wektorowych i dodanie budynków 3D przy bliskich poziomach powiększenia. Mapa wektorowa obsługuje te funkcje:

• Programowe sterowanie nachyleniem i kierunkiem
• Ulepszone sterowanie aparatem
• Płynniejsze powiększanie dzięki zoomowi ułamkowemu

• Treści i animacje 3D

• W przypadku map wczytywanych za pomocą elementu div i JavaScriptu domyślnym typem renderowania jest google.maps.RenderingType.RASTER.

• W przypadku map wczytywanych za pomocą elementu gmp-map domyślnym typem renderowania jest google.maps.RenderingType.VECTOR z włączonym sterowaniem nachyleniem i kierunkiem.

Pierwsze kroki z mapami wektorowymi

Przechył i obrót

Możesz ustawić nachylenie i obrót (kierunek) na mapie wektorowej, uwzględniając właściwości heading i tilt podczas inicjowania mapy oraz wywołując metody setTilt i setHeading na mapie. W przykładzie poniżej dodano do mapy kilka przycisków, które pokazują automatyczne dostosowywanie nachylenia i kierunku w odstępach co 20 stopni.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

Uwaga: JavaScript jest kompilowany z fragmentu kodu TypeScript.

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

HTML

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Używanie gestów myszy i klawiatury

Jeśli interakcje użytkownika związane z nachyleniem i obrotem (kierunkiem) zostały włączone (programowo lub w konsoli Google Cloud), użytkownicy mogą dostosowywać nachylenie i obrót za pomocą myszy i klawiatury:

• Za pomocą myszy: przytrzymaj klawisz Shift, a następnie przeciągnij myszą w górę i w dół, aby dostosować nachylenie, lub w prawo i w lewo, aby dostosować kierunek.
• Za pomocą klawiatury przytrzymaj klawisz Shift, a następnie użyj klawiszy strzałek w górę i w dół, aby dostosować nachylenie, oraz klawiszy strzałek w prawo i w lewo, aby dostosować kierunek.

Programowe dostosowywanie pochylenia i kierunku

Użyj metod setTilt() i setHeading(), aby automatycznie dostosować nachylenie i kierunek na mapie wektorowej. Kierunek to kierunek, w którym skierowana jest kamera, wyrażony w stopniach zgodnie z ruchem wskazówek zegara, zaczynając od północy, więc map.setHeading(90) obróci mapę tak, aby wschód był skierowany w górę. Kąt nachylenia jest mierzony od zenitu, więc map.setTilt(0) oznacza widok prosto w dół, a map.setTilt(45) – widok ukośny.

• Aby ustawić kąt nachylenia mapy, wywołaj funkcję setTilt(). Użyj getTilt(), aby uzyskać bieżącą wartość nachylenia.
• Aby ustawić kierunek mapy, wywołaj funkcję setHeading(). Użyj getHeading(), aby uzyskać bieżącą wartość nagłówka.

Aby zmienić środek mapy, zachowując nachylenie i kierunek, użyj map.setCenter() lub map.panBy().

Pamiętaj, że zakres kątów, których można użyć, różni się w zależności od bieżącego poziomu powiększenia. Wartości spoza tego zakresu są zmieniane na wartości graniczne.

Możesz też użyć metody moveCamera, aby automatycznie zmieniać kierunek, nachylenie, środek i powiększenie. Więcej informacji

Wpływ na inne metody

Zastosowanie pochylenia lub obrotu mapy wpływa na działanie innych metod interfejsu Maps JavaScript API:

• map.getBounds() zawsze zwraca najmniejszą ramkę ograniczającą, która obejmuje widoczny region. Po zastosowaniu nachylenia zwrócone granice mogą reprezentować większy region niż widoczny obszar widocznego obszaru mapy.
• map.fitBounds() zresetuje nachylenie i kierunek do zera przed dopasowaniem granic.
• map.panToBounds() zresetuje nachylenie i kierunek do zera przed przesunięciem granic.
• map.setTilt() akceptuje dowolną wartość, ale ogranicza maksymalne nachylenie na podstawie bieżącego poziomu powiększenia mapy.
• map.setHeading() akceptuje dowolną wartość i modyfikuje ją, aby mieściła się w zakresie [0, 360].

Sterowanie kamerą

Użyj funkcji map.moveCamera(), aby zaktualizować dowolną kombinację właściwości kamery jednocześnie. Funkcja map.moveCamera() przyjmuje pojedynczy parametr zawierający wszystkie właściwości kamery, które mają zostać zaktualizowane. Poniższy przykład pokazuje wywołanie map.moveCamera(), które ustawia jednocześnie center, zoom, heading i tilt:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Właściwości kamery możesz animować, 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);

Pozycja kamery

Widok mapy jest modelowany jako kamera skierowana w dół na płaską powierzchnię. Położenie kamery (a tym samym renderowanie mapy) określają te właściwości: cel (szerokość i długość geograficzna), orientacja, nachylenie i powiększenie.

Cel (lokalizacja)

Cel kamery to lokalizacja środka mapy określona jako współrzędne szerokości i długości geograficznej.

Szerokość geograficzna może wynosić od –85 do 85 stopni. Wartości powyżej lub poniżej tego zakresu zostaną zmienione na najbliższą wartość z tego zakresu. Jeśli na przykład podasz szerokość geograficzną 100, wartość zostanie ustawiona na 85. Długość geograficzna mieści się w zakresie od -180 do 180 stopni włącznie. Wartości spoza tego zakresu zostaną przekształcone tak, aby mieściły się w zakresie (-180, 180). Na przykład 480, 840 i 1200 zostaną zawinięte do 120 stopni.

Kierunek (orientacja)

Kierunek kamery określa kierunek kompasu, mierzony w stopniach od północy geograficznej, odpowiadający górnej krawędzi mapy. Jeśli narysujesz pionową linię od środka mapy do jej górnej krawędzi, namiar odpowiada kierunkowi kamery (mierzonemu w stopniach) względem północy geograficznej.

Wartość 0 oznacza, że góra mapy wskazuje północ geograficzną. Wartość 90 oznacza, że góra mapy wskazuje wschód (90 stopni na kompasie). Wartość 180 oznacza, że góra mapy jest skierowana na południe.

Interfejs API Map Google umożliwia zmianę orientacji mapy. Na przykład kierowca często obraca mapę drogową, aby dopasować ją do kierunku jazdy, podczas gdy turyści korzystający z mapy i kompasu zwykle ustawiają mapę tak, aby pionowa linia wskazywała północ.

Pochylenie (kąt widzenia)

Nachylenie określa pozycję kamery na łuku bezpośrednio nad środkiem mapy, mierzoną w stopniach od nadiru (kierunku bezpośrednio pod kamerą). Wartość 0 odpowiada kamerze skierowanej prosto w dół. Wartości większe niż 0 odpowiadają kamerze pochylonej w kierunku horyzontu o określoną liczbę stopni. Gdy zmienisz kąt widzenia, mapa będzie wyświetlana w perspektywie, z odległymi obiektami mniejszymi, a bliższymi – większymi. Ilustracje poniżej pokazują, jak to działa.

Na obrazach poniżej kąt widzenia wynosi 0 stopni. Pierwszy obraz przedstawia schemat tego rozwiązania: pozycja 1 to pozycja kamery, a pozycja 2 to bieżąca pozycja na mapie. Poniżej znajduje się mapa, która powstała w wyniku tego zapytania.

Mapa wyświetlana z domyślnym kątem widzenia kamery.

Domyślny kąt widzenia kamery.

Na obrazach poniżej kąt widzenia wynosi 45 stopni. Zauważ, że kamera przesuwa się do połowy łuku między pozycją bezpośrednio nad głową (0 stopni) a ziemią (90 stopni) do pozycji 3. Kamera nadal jest skierowana na punkt środkowy mapy, ale obszar reprezentowany przez linię w pozycji 4 jest teraz widoczny.

Mapa wyświetlana pod kątem 45 stopni.

Kąt widzenia kamery wynosi 45 stopni.

Mapa na tym zrzucie ekranu jest nadal wyśrodkowana na tym samym punkcie co oryginalna mapa, ale u góry mapy pojawiło się więcej funkcji. Gdy zwiększysz kąt powyżej 45 stopni, elementy między kamerą a pozycją mapy będą wydawać się proporcjonalnie większe, a elementy poza pozycją mapy – proporcjonalnie mniejsze, co da efekt trójwymiarowości.

Zoom

Poziom powiększenia kamery określa skalę mapy. Przy większych poziomach powiększenia na ekranie widać więcej szczegółów, a przy mniejszych – większy obszar świata.

Poziom powiększenia nie musi być liczbą całkowitą. Zakres poziomów powiększenia dozwolonych przez mapę zależy od wielu czynników, w tym od celu, typu mapy i rozmiaru ekranu. Każda liczba spoza zakresu zostanie przekonwertowana na najbliższą prawidłową wartość, którą może być minimalny lub maksymalny poziom powiększenia. Poniższa lista zawiera przybliżony poziom szczegółowości, którego możesz się spodziewać na każdym poziomie powiększenia:

• 1: Świat
• 5. Ląd/kontynent
• 10: miasto,
• 15: Ulice
• 20: Budynki

Uwaga: ze względu na rozmiar i gęstość ekranu niektóre urządzenia mogą nie obsługiwać najniższych poziomów powiększenia.

Na poniższych obrazach widać, jak wyglądają różne poziomy powiększenia:

Mapa na poziomie powiększenia 5.

Mapa z poziomem powiększenia 15.

Mapa na poziomie powiększenia 20.

Powiększenie ułamkowe

Mapy wektorowe obsługują powiększenie ułamkowe, które umożliwia powiększanie za pomocą wartości ułamkowych zamiast liczb całkowitych. Chociaż zarówno mapy rastrowe, jak i wektorowe obsługują zoom ułamkowy, jest on domyślnie włączony w przypadku map wektorowych i domyślnie wyłączony w przypadku map rastrowych. Aby włączyć lub wyłączyć powiększenie ułamkowe, użyj opcji mapy isFractionalZoomEnabled.

Ten 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, jak pokazano tutaj:

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

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

Możesz ustawić detektor, który będzie wykrywać, czy powiększenie ułamkowe jest włączone. Jest to najbardziej przydatne, jeśli nie ustawisz jawnie właściwości isFractionalZoomEnabled na true lub false. Poniższy przykładowy kod sprawdza, czy zoom ułamkowy jest włączony:

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

Uwaga: zdarzenie zoom_changed będzie wywoływane częściej, gdy włączone jest powiększenie ułamkowe. Będzie to miało wpływ na wszystkie detektory skonfigurowane do śledzenia zdarzenia zoom_changed. Aby uzyskać optymalną wydajność, rozważ aktualizowanie tylko wtedy, gdy powiększenie zmieniło się o wartość całkowitą, lub zastosuj ograniczanie przepustowości.