WebGL Yer Paylaşımı Görünümü

Örneği Görüntüle

WebGL yer paylaşımlı görünüm ile haritalarınıza doğrudan WebGL'yi kullanarak içerik ekleyebilirsiniz. veya Three.js gibi popüler Grafik kitaplıkları kullanılır. WebGL yer paylaşımlı görünüm, web sitesinin Google Haritalar Platformu'nun görüntü oluşturmak için kullandığı WebGL oluşturma bağlamına erişme gösteren bir grafik oluşur. Paylaşılan oluşturma bağlamının bu şekilde kullanılması avantajlar 3D bina geometrisi ile derinlik kapama ve 2D/3D'yi senkronize etme gibi temel harita oluşturmaya izin verir. WebGL yer paylaşımlı görünüm ile oluşturulan nesneler enlem/boylam koordinatlarına da bağlı olduğundan, sürüklediğinizde hareket ederler yakınlaştırın, kaydırın veya yatırın.

Şartlar

WebGL yer paylaşımlı görünümü kullanmak için haritayı, vektör içeren bir harita kimliği kullanarak yüklemelisiniz harita etkin. Reklam oluştururken yatırma ve döndürme özelliklerini etkinleştirmenizi harita kimliğini kullanarak tam 3D kamera kontrolüne olanak tanıyın. Ayrıntılar için genel bakışı inceleyin.

WebGL yer paylaşımlı görünüm ekle

Yer paylaşımını haritanıza eklemek için google.maps.WebGLOverlayView uygulayın, ardından setMap kullanarak harita örneğinizi iletin:

// 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);

Yaşam döngüsü kancaları

WebGL yer paylaşımlı görünüm, web’de çeşitli zamanlarda çağrılan bir vektör temel haritasının WebGL oluşturma bağlamının yaşam döngüsü. Bu yaşam döngüsü kancaları, istediğiniz her şeyi kurduğunuz, çizdiğiniz ve ortadan kaldırdığınız yerdir oluşturulur.

  • Yer paylaşımı oluşturulduğunda onAdd() çağrılır. Belgeyi getirmek veya başka veri yapıları oluşturabilir. WebGL oluşturma bağlamına hemen erişilmesini gerektirir.
  • Oluşturma bağlamı şu olduğunda onContextRestored({gl}) çağrılır: kullanılabilir. Gölgelendirici, GL gibi WebGL durumlarını başlatmak veya bağlamak için bunu kullanın. tampon nesneleri vb. kullanabilirsiniz. onContextRestored() WebGLStateOptions atıyor şöyle bir örnek düşünelim:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext için herkese açık kullanıcı adı olarak kullanılıyor.
  • onDraw({gl, transformer}), temel haritadaki sahneyi oluşturur. onDraw() parametresi, iki öğe içeren WebGLDrawOptions nesnesidir alanlar:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext için herkese açık kullanıcı adı olarak kullanılıyor.
    • transformer, haritadan dönüşüm için yardımcı işlevler sağlar için kullanılabilecek model görünümü projeksiyonu matrisine harita koordinatlarını dünya uzayına, kamera alanına ve ekrana çevir boşluk oluşturur.
  • Herhangi bir öğe için oluşturma bağlamı kaybolduğunda onContextLost() çağrılır gerekir ve bu nedenle mevcut GL durumunu temizlemeniz gerekir. artık gerekli değildir.
  • onStateUpdate({gl}), GL durumunu oluşturma döngüsünün dışında günceller. ve requestStateUpdate çağrıldığında da çağrılır. Bir Tek bir alana sahip WebGLStateOptions örneği:
    • gl, temel harita tarafından kullanılan WebGLRenderingContext için herkese açık kullanıcı adı olarak kullanılıyor.
  • onRemove(), yer paylaşımı haritadan kaldırıldığında çağrı yapan WebGLOverlayView.setMap(null). Tüm öğeleri buradan kaldırmanız gerekir oluşturmak için kullanabilirsiniz.

Örneğin, aşağıda tüm yaşam döngüsü kancalarının temel bir uygulaması gösterilmektedir:

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

GL Durumu sıfırlanıyor

WebGL yer paylaşımlı görünüm, temel haritanın WebGL oluşturma bağlamını gösterir. Çünkü GL durumunu orijinal haline sıfırlamanız son derece önemlidir. işlemi tamamladığınızı gösterir. GL durumu sıfırlanamaz: ve bu da hem GL durumu çakışmalarına neden olur hem de başarısız olmaz.

GL durumunun sıfırlanması normalde onDraw() kancasında gerçekleştirilir. Örneğin, Three.js, GL durumundaki değişiklikleri temizleyen bir yardımcı işlev sağlar:

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

Harita veya nesneleriniz oluşturulamazsa GL durumu büyük olasılıkla sıfırlanmadı.

Dönüşümleri koordine etme

Bir nesnenin vektör haritasındaki konumu, enlem ve boylam koordinatlarının yanı sıra rakım kombinasyonunu da gösterir. 3 Boyutlu ancak grafikler dünya uzayı, kamera alanı veya ekran alanında belirtilir. Harita koordinatlarını bu daha yaygın kullanılan alanlara dönüştürmeyi kolaylaştırmak boşluklarda, WebGL Yer Paylaşımlı Görünümü Google'ın onDraw() kancasında aşağıdakini alan ve coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr, scalarArr) yardımcı işlevi Float64Array döndürür:

  • latLngAltitude: Enlem/boylam/rakım koordinatları olarak LatLngAltitude veya LatLngAltitudeLiteral.
  • rotationArr: Derece olarak belirtilen euler dönüş açılarının Float32Array kadarı.
  • scalarArr: Kardinal eksene uygulanacak Float32Array skaler değeri.

Örneğin, aşağıda bir kamera oluşturmak için fromLatLngAltitude() kullanılmıştır Three.js'deki projeksiyon matrisi:

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

Örnek

Aşağıdaki, bir Three.js'nin kullanıldığı yaygın olarak kullanılan açık kaynak WebGL kütüphanesi. Örneğin, üstünde çalışıyorsa WebGL hızlandırılmış Harita Deneyimleri codelab'i oluşturma.

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