Widok nakładki WebGL

Zobacz przykład

Dzięki widokowi nakładki WebGL możesz dodawać treści do map bezpośrednio, korzystając z WebGL, czy popularnych bibliotek graficznych, takich jak Three.js. Widok nakładki WebGL dostępu do tego samego kontekstu renderowania WebGL, którego Google Maps Platform używa do renderowania czyli wektorową mapę bazową. Użycie udostępnionego kontekstu renderowania przynosi korzyści takie jak przesłonięcie głębi za pomocą geometrii budynków 3D czy synchronizacja widoku 2D/3D z renderowaniem mapy podstawowej. Obiekty renderowane za pomocą widoku nakładki WebGL mogą mogą być powiązane ze współrzędnymi szerokości i długości geograficznej, więc poruszają się podczas przeciągania. powiększyć, przesunąć lub przechylić mapę.

Wymagania

Aby korzystać z widoku nakładki WebGL, musisz wczytać mapę, używając identyfikatora mapy z wektorem Włączono mapę. Zdecydowanie zalecamy włączenie przechylania i obracania podczas tworzenia Identyfikator mapy, by umożliwić pełne sterowanie kamerą 3D. Szczegółowe informacje znajdziesz w omówieniu.

Dodaj widok nakładki WebGL

Aby dodać nakładkę do mapy, zaimplementuj google.maps.WebGLOverlayView, a potem przekazać ją do instancji 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);

Elementy zaczepienia cyklu życia

Widok nakładki WebGL to zestaw elementów zaczepienia, które są wywoływane w różnych momentach cyklu życia mapy bazowej wektorowej w technologii WebGL. Te zaczepy związane z cyklem życia to narzędzie, które pozwala skonfigurować, rysować i rozmontować, co tylko chcesz wyrenderowane w nakładce.

• Pole onAdd() jest wywoływane podczas tworzenia nakładki. Użyj go do pobrania lub pośrednich struktur danych przed wyświetleniem nakładki, które nie są wymagają natychmiastowego dostępu do kontekstu renderowania WebGL.
• Metoda onContextRestored({gl}) jest wywoływana, gdy kontekst renderowania zostanie określony i dostępności informacji. Służy do inicjowania lub wiązania dowolnego stanu WebGL, takiego jak programy do cieniowania, GL buforować obiekty itd. onContextRestored() trwa WebGLStateOptions instancji, która ma jedno pole:
  • gl to uchwyt obiektu WebGLRenderingContext używany przez mapę podstawową.
• onDraw({gl, transformer}) renderuje scenę na mapie podstawowej. Parametry onDraw() to obiekt WebGLDrawOptions, który ma dwa pola:
  • gl to uchwyt obiektu WebGLRenderingContext używany przez mapę podstawową.
  • transformer udostępnia funkcje pomocnicze do przekształcania danych z mapy do matrycy rzutowania model-widok-model, których można użyć tłumacz współrzędne mapy na przestrzeń świata, przestrzeń aparatu i ekran kosmosu.
• Pole onContextLost() jest wywoływane w przypadku utraty kontekstu renderowania dla dowolnego i jest to miejsce, w którym należy wyczyścić każdy istniejący stan GL, ponieważ nie jest już potrzebna.
• onStateUpdate({gl}) aktualizuje stan GL poza pętlą renderowania, i jest wywoływane po wywołaniu funkcji requestStateUpdate. Trwa to WebGLStateOptions instancję, która ma jedno pole:
  • gl to uchwyt obiektu WebGLRenderingContext używany przez mapę podstawową.
• Pole onRemove() jest wywoływane, gdy nakładka jest usuwana z mapy wraz z WebGLOverlayView.setMap(null) i tam usuń wszystkie obiektów pośrednich.

Poniżej przedstawiono podstawową implementację 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. Ponieważ musisz przywrócić oryginalny stan GL gdy skończysz renderować obiekty. Nieudane zresetowanie stanu GL to może wywołać konflikt stanu GL, który spowoduje renderowanie i wszelkie wskazane przez Ciebie obiekty, które przestaną działać.

Resetowanie stanu GL jest zwykle obsługiwane w punkcie zaczepienia onDraw(). Przykład: Three.js udostępnia funkcję pomocniczą, która usuwa wszystkie 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, najprawdopodobniej stan GL nie został zresetowany.

Skoordynuj transformacje

Położenie obiektu na mapie wektorowej określa się za pomocą funkcji kombinacji współrzędnych geograficznych oraz wysokości nad poziomem morza. 3D jednak są one określone w przestrzeni świata, przestrzeni kamery lub przestrzeni na ekranie. Aby ułatwić przekształcanie współrzędnych mapy na te częściej używane do miejsc, w których znajduje się obraz nad powierzchnią WebGL Funkcja pomocnicza coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr) w punkcie zaczepienia onDraw(), która pobiera następujące i zwraca Float64Array:

• latLngAltitude: szerokość/długość geograficzna/wysokość LatLngAltitude lub LatLngAltitudeLiteral.
• rotationArr: Float32Array kątów obrotu Eulera określonych w stopniach.
• scalarArr: Float32Array skalarów do zastosowania na osi kardynał.

Na przykład poniższy kod wykorzystuje parametr fromLatLngAltitude() do utworzenia kamery macierz projekcji w Three.js:

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 Three.js, do umieszczania obiektu 3D na mapie w popularnej bibliotece open source WebGL. Dla Zobacz kompletny przewodnik po korzystaniu z widoku nakładek WebGL do tworzenia przedstawionego przykładu. u góry tej strony, wypróbuj Ćwiczenie z programowania dotyczące tworzenia map z akceleracją 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);