Widok nakładki WebGL

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

Wyświetl próbkę

Za pomocą widoku nakładki WebGL możesz dodawać do map treści bezpośrednio za pomocą WebGL lub popularnych bibliotek graficznych, takich jak Three.js. Widok nakładki WebGL zapewnia bezpośredni dostęp do tego samego kontekstu renderowania WebGL, w ramach którego Google Maps Platform renderuje mapę wektorową. Wspólny kontekst renderowania zapewnia takie korzyści jak przesłanianie głębi za pomocą geometrii budynków 3D oraz możliwość synchronizowania treści 2D/3D z renderowaniem mapy podstawowej. Obiekty renderowane w widoku nakładki WebGL mogą być również powiązane ze współrzędnymi szerokości i długości geograficznej, aby przesuwać je, przeciągając, powiększać i przesuwać mapę.

Wymagania

Aby korzystać z widoku nakładki WebGL, musisz wczytać mapę za pomocą identyfikatora mapy z włączoną mapą wektorową. Zalecamy, aby podczas tworzenia identyfikatora mapy włączyć przechylanie i obrót, co zapewni pełną kontrolę nad kamerą 3D. Więcej informacji znajdziesz w podsumowaniu

Dodawanie widoku nakładki WebGL

Aby dodać nakładkę do mapy, zastosuj google.maps.WebGLOverlayView i przekaż mu swoją instancję mapy za pomocą setMap:

// Create a map instance.
const map = new google.maps.Map(mapDiv, mapOptions);

// Create a WebGL Overlay View instance.
const webglOverlayView = new google.maps.WebGLOverlayView();

// Add the overlay to the map.
webglOverlayView.setMap(map);

Punkt zaczepienia cyklu życia

Widok nakładki WebGL zapewnia zestaw punktów wywołania, które są wywoływane w różnych momentach w cyklu renderowania WebGL na mapie podstawowej wektora. Punkty zaczepienia cyklu życia służą do konfigurowania, rysowania i rozcinania wszystkich elementów, które mają być renderowane w nakładce.

  • Metoda onAdd() jest wywoływana podczas tworzenia nakładki. Służy do pobierania lub tworzenia pośrednich struktur danych przed narysowaniem nakładki, które nie wymagają natychmiastowego dostępu do kontekstu renderowania WebGL.
  • Metoda onContextRestored({gl}) jest wywoływana, gdy kontekst renderowania jest dostępny. Za jego pomocą możesz zainicjować lub powiązać dowolny stan WebGL, taki jak shadery, obiekty bufora GL itd. onContextRestored() wykonuje instancję WebGLStateOptions, która ma 1 pole:
    • gl to identyfikator elementu WebGLRenderingContext używanego przez mapę podstawową.
  • onDraw({gl, transformer}) renderuje scenę na mapie podstawowej. Parametry onDraw() to obiekt WebGLDrawOptions zawierający 2 pola:
    • gl to identyfikator elementu WebGLRenderingContext używanego przez mapę podstawową.
    • transformer udostępnia funkcje pomocnicze, które można przekształcić ze współrzędnych mapy na mapę projekcji modelu, która służy do przekładania współrzędnych mapy na przestrzeń świata, przestrzeń do aparatu i przestrzeń ekranu.
  • Metoda onContextLost() jest wywoływana, gdy z dowolnego powodu utracisz kontekst renderowania i należy wyczyścić bieżący stan GL, ponieważ nie jest już potrzebny.
  • onStateUpdate({gl}) aktualizuje stan GL poza pętlą renderowania i jest wywoływany po wywołaniu elementu requestStateUpdate. Wykorzystuje instancję WebGLStateOptions, która ma 1 pole:
    • gl to identyfikator elementu WebGLRenderingContext używanego przez mapę podstawową.
  • Metoda onRemove() jest wywoływana, gdy nakładka zostanie usunięta z mapy (WebGLOverlayView.setMap(null)) i należy usunąć wszystkie obiekty pośrednie.

Poniżej znajduje się przykładowa podstawowa implementacja wszystkich punktów zaczepienia cyklu życia:

const webglOverlayView = new google.maps.WebGLOverlayView();

webglOverlayView.onAdd = () => {
  // Do setup that does not require access to rendering context.
}

webglOverlayView.onContextRestored = ({gl}) => {
  // Do setup that requires access to rendering context before onDraw call.
}

webglOverlayView.onStateUpdate = ({gl}) => {
  // Do GL state setup or updates outside of the render loop.
}

webglOverlayView.onDraw = ({gl, transformer}) => {
  // Render objects.
}

webglOverlayView.onContextLost = () => {
  // Clean up pre-existing GL state.
}

webglOverlayView.onRemove = () => {
  // Remove all intermediate objects.
}

webglOverlayView.setMap(map);

Resetuję stan GL

Widok nakładki WebGL ujawnia kontekst renderowania WebGL na mapie podstawowej. Z tego powodu bardzo ważne jest przywrócenie pierwotnego stanu GL do stanu pierwotnego. Brak zresetowania stanu GL może spowodować konflikty stanu GL, co spowoduje renderowanie zarówno map, jak i wszelkich wskazanych obiektów.

Resetowanie stanu GL jest zwykle obsługiwane w punkcie zaczepienia onDraw(). Na przykład Three.js udostępnia funkcję pomocniczą, która usuwa wszelkie zmiany stanu GL:

webglOverlayView.onDraw = ({gl, transformer}) => {
  // Specify an object to render.
  renderer.render(scene, camera);
  renderer.resetState();
}

Jeśli nie uda się wyrenderować mapy lub obiektów, jest bardzo prawdopodobne, że stan globalnej listy węzłów został zresetowany.

Transformacje współrzędnych

Pozycja obiektu na mapie wektorowej jest określana przez połączenie współrzędnych szerokości i długości geograficznej oraz wysokości. Obrazy 3D są jednak określane w przestrzeni światowej, przestrzeni aparatu lub ekranie. Aby ułatwić przekształcenie współrzędnych mapy w najczęściej używanych pokojach, widok nakładki WebGL oferuje funkcję pomocniczą coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr) w haczyku onDraw(), która wykonuje te działania i zwraca Float64Array:

  • latLngAltitude: współrzędne szerokości i długości geograficznej lub wysokości w postaci LatLngAltitude lub LatLngAltitudeLiteral.
  • rotationArr: Float32Array kątów naprzemiennego obrotu, określonych w stopniach.
  • scalarArr: Float32Array skala do zastosowania na osi kardynała.

Aby na przykład utworzyć macierz projekcji kamery w kanale Three.js, użyj kodu fromLatLngAltitude():

const camera = new THREE.PerspectiveCamera();
const matrix = coordinateTransformer.fromLatLngAltitude({
    lat: mapOptions.center.lat,
    lng: mapOptions.center.lng,
    altitude: 120,
});
camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);

Przykład

Poniżej znajdziesz prosty przykład użycia trzy.js – popularnej biblioteki WebGL typu open source do umieszczenia obiektu 3D na mapie. Pełne instrukcje dotyczące korzystania z widoku nakładki WebGL w celu utworzenia przykładu wyświetlanego u góry tej strony znajdziesz w ćwiczeniach związanych z tworzeniem map z wykorzystaniem WebGL.

const webglOverlayView = new google.maps.WebGLOverlayView();
let scene, renderer, camera, loader;

webglOverlayView.onAdd = () => {
  // Set up the Three.js scene.
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera();
  const ambientLight = new THREE.AmbientLight( 0xffffff, 0.75 ); // Soft white light.
  scene.add(ambientLight);

  // Load the 3D model with GLTF Loader from Three.js.
  loader = new GLTFLoader();
  loader.load("pin.gltf");
}

webglOverlayView.onContextRestored = ({gl}) => {
  // Create the Three.js renderer, using the
  // maps's WebGL rendering context.
  renderer = new THREE.WebGLRenderer({
    canvas: gl.canvas,
    context: gl,
    ...gl.getContextAttributes(),
  });
  renderer.autoClear = false;
}

webglOverlayView.onDraw = ({gl, transformer}) => {
  // Update camera matrix to ensure the model is georeferenced correctly on the map.
  const matrix = transformer.fromLatLngAltitude({
      lat: mapOptions.center.lat,
      lng: mapOptions.center.lng,
      altitude: 120,
  });
camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);

  // Request a redraw and render the scene.
  webglOverlayView.requestRedraw();
  renderer.render(scene, camera);

  // Always reset the GL state.
  renderer.resetState();
}

// Add the overlay to the map.
webglOverlayView.setMap(map);