Widok nakładki WebGL

Wyświetl próbkę

Dzięki widokowi nakładanemu WebGL możesz bezpośrednio dodawać treści do swoich map przy użyciu WebGL lub popularnych bibliotek graficznych, takich jak Three.js. Widok nakładki WebGL umożliwia bezpośredni dostęp do tego samego kontekstu renderowania WebGL, który jest używany przez Google Maps Platform do renderowania mapy bazowej wektorów. Użycie wspólnego kontekstu renderowania przynosi takie korzyści jak zasłanianie głębi dzięki geometrii budynku 3D oraz synchronizowanie treści 2D i 3D z renderowaniem mapy bazowej. Obiekty wyrenderowane w widoku nakładki WebGL można też powiązać ze współrzędnymi szerokości i długości geograficznej. Oznacza to, że przesuwają się podczas przeciągania, powiększania, przesuwania i przechylania mapy.

Wymagania

Aby korzystać z widoku nakładki WebGL, musisz wczytać mapę przy użyciu identyfikatora mapy z włączoną mapą wektorową. Zdecydowanie zalecamy włączenie przechylania i obracania podczas tworzenia identyfikatora mapy, by zapewnić pełną kontrolę nad kamerą 3D. Szczegółowe informacje znajdziesz w opisie

Dodaj widok nakładki WebGL

Aby dodać nakładkę do mapy, zaimplementuj google.maps.WebGLOverlayView, a następnie prześlij 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);

Punkty zaczepienia cyklu życia

Widok nakładki WebGL udostępnia zestaw punktów zaczepienia, które są wywoływane w różnych momentach cyklu życia kontekstu renderowania wektorowej mapy bazowej WebGL. Te punkty zaczepienia cyklu życia umożliwiają konfigurowanie, rysowanie i demontaż dowolnego elementu, który chcesz wyrenderować w nakładce.

• Narzędzie onAdd() jest wywoływane 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 stanie się dostępny. Służy on do zainicjowania lub powiązania dowolnego stanu WebGL, np. cieniowania, obiektów bufora GL itp. onContextRestored() używa instancji WebGLStateOptions, która zawiera jedno pole:
  • gl to uchwyt WebGLRenderingContext używany przez mapę bazową.
• onDraw({gl, transformer}) renderuje scenę na mapie bazowej. Parametry onDraw() to obiekt WebGLDrawOptions, który zawiera 2 pola:
  • gl to uchwyt WebGLRenderingContext używany przez mapę bazową.
  • transformer udostępnia funkcje pomocnicze do przekształcania współrzędnych mapy w macierz obrazu/widoku modelu, której można używać do tłumaczenia współrzędnych mapy na przestrzeń świata, przestrzeń kamery i przestrzeń ekranu.
• Metoda onContextLost() jest wywoływana, gdy kontekst renderowania zostanie z jakiegoś powodu utracony. W tym miejscu należy wyczyścić istniejący stan GL, ponieważ nie jest już potrzebny.
• onStateUpdate({gl}) aktualizuje stan GL poza pętlą renderowania i jest wywoływany po wywołaniu requestStateUpdate. Wykorzystuje instancję WebGLStateOptions, która zawiera jedno pole:
  • gl to uchwyt WebGLRenderingContext używany przez mapę bazową.
• Metoda onRemove() jest wywoływana, gdy nakładka zostanie usunięta z mapy za pomocą WebGLOverlayView.setMap(null) i to miejsce, w którym należy usunąć wszystkie obiekty pośrednie.

Poniżej przedstawiamy przykładową 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 umożliwia wyświetlanie kontekstu renderowania mapy bazowej WebGL. Z tego powodu niezwykle ważne jest przywrócenie pierwotnego stanu GL po zakończeniu renderowania obiektów. Jeśli nie zresetujesz stanu GL, prawdopodobnie spowoduje to konflikty stanu GL, co spowoduje błędy renderowania zarówno mapy, jak i wszelkich określonych 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, najprawdopodobniej stan GL nie został zresetowany.

Koordynuj przekształcenia

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ą natomiast określone w przestrzeni świata, przestrzeni aparatu czy ekranu. Aby ułatwić przekształcanie współrzędnych mapy na te częściej używane przestrzenie, widok nakładki WebGL udostępnia coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr) funkcję pomocniczą w zaczepie onDraw(), która wymaga poniższego elementu i zwraca Float64Array:

• latLngAltitude: współrzędne szerokości i długości geograficznej / wysokości w formacie LatLngAltitude lub LatLngAltitudeLiteral.
• rotationArr: Float32Array kątów obrotu eulera podane w stopniach.
• scalarArr: Float32Array skalarów do zastosowania do osi głównej.

Na przykład ten tag wykorzystuje fromLatLngAltitude() do utworzenia macierzy projekcji kamery w języku 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 znajduje się prosty przykład użycia Three.js – popularnej biblioteki typu open source WebGL – do umieszczania obiektu 3D na mapie. Aby zobaczyć, jak używać widoku nakładki WebGL do tworzenia przykładu, który znajdziesz u góry tej strony, zapoznaj się z ćwiczeniami z programowania z obsługą interfejsu Map Experiences przy użyciu 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);