WebGL

WebGLOverlayView class

google.maps.WebGLOverlayView ชั้นเรียน

มุมมองการวางซ้อน WebGL ช่วยให้เข้าถึงบริบทการแสดงผล WebGL เดียวกันกับที่แพลตฟอร์ม Google Maps ใช้ในการแสดงผลแผนที่ฐานแบบเวกเตอร์ได้โดยตรง การใช้บริบทการแสดงผลที่แชร์นี้มีประโยชน์ เช่น การบดบังความลึกด้วยรูปทรงเรขาคณิตของอาคาร 3 มิติ และความสามารถในการซิงค์เนื้อหา 2 มิติ/3 มิติกับการแสดงผลแผนที่ฐาน

มุมมองการวางซ้อน WebGL ช่วยให้คุณเพิ่มเนื้อหาลงในแผนที่ได้โดยใช้ WebGL โดยตรง หรือใช้ไลบรารีกราฟิกยอดนิยม เช่น Three.js หรือ deck.gl หากต้องการใช้การวางซ้อน คุณสามารถขยาย google.maps.WebGLOverlayView และติดตั้งใช้งานสำหรับฮุกลงในวงจรต่อไปนี้แต่ละรายการได้ WebGLOverlayView.onAdd, WebGLOverlayView.onContextRestored, WebGLOverlayView.onDraw, WebGLOverlayView.onContextLost และ WebGLOverlayView.onRemove

คุณต้องเรียกใช้ WebGLOverlayView.setMap ด้วยออบเจ็กต์ Map ที่ถูกต้องเพื่อทริกเกอร์การเรียกใช้เมธอด onAdd() และ setMap(null) เพื่อทริกเกอร์เมธอด onRemove() เรียกใช้เมธอด setMap() ได้ในขณะสร้างหรือเมื่อใดก็ได้หลังจากนั้นเมื่อควรแสดงภาพซ้อนทับอีกครั้งหลังจากนำออก จากนั้นระบบจะเรียกใช้เมธอด onDraw() ทุกครั้งที่พร็อพเพอร์ตี้ของแผนที่เปลี่ยนแปลง ซึ่งอาจเปลี่ยนตำแหน่งขององค์ประกอบได้ เช่น ระดับการซูม จุดกึ่งกลาง หรือประเภทแผนที่ คุณจะเพิ่ม WebGLOverlayView ได้เฉพาะในแผนที่เวกเตอร์ที่มี MapOptions.mapId (รวมถึงแผนที่ที่ตั้งค่าเป็น RenderingType.VECTOR MapOptions.renderingType และใช้ Map.DEMO_MAP_ID เป็น MapOptions.mapId)

ชั้นเรียนนี้ขยายเวลา MVCObject

เข้าถึงได้โดยโทรไปที่ const {WebGLOverlayView} = await google.maps.importLibrary("maps")
ดูไลบรารีใน Maps JavaScript API
WebGLOverlayView
WebGLOverlayView()
พารามิเตอร์: ไม่มี
สร้าง WebGLOverlayView
getMap
getMap()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  Map|null|undefined
onAdd
onAdd()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน: ไม่มี
ใช้วิธีนี้เพื่อดึงข้อมูลหรือสร้างโครงสร้างข้อมูลระดับกลางก่อนที่จะวาดภาพซ้อนทับซึ่งไม่จำเป็นต้องเข้าถึงบริบทการแสดงผล WebGL โดยทันที ต้องใช้วิธีนี้ในการแสดงผล
onContextLost
onContextLost()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน: ไม่มี
ระบบจะเรียกใช้วิธีนี้เมื่อบริบทการแสดงผลสูญหายไม่ว่าด้วยเหตุผลใดก็ตาม และคุณควรล้างสถานะ GL ที่มีอยู่ก่อนหน้านี้ เนื่องจากไม่จำเป็นอีกต่อไป
onContextRestored
onContextRestored(options)
พารามิเตอร์: 
  • options:  WebGLStateOptions ที่ช่วยให้นักพัฒนาแอปสามารถคืนค่าบริบท GL ได้
ค่าที่ส่งคืน: ไม่มี
ระบบจะเรียกใช้เมธอดนี้เมื่อบริบทการแสดงผลพร้อมใช้งาน ใช้เพื่อเริ่มต้นหรือเชื่อมโยงสถานะ WebGL เช่น Shader หรือออบเจ็กต์บัฟเฟอร์
onDraw
onDraw(options)
พารามิเตอร์: 
  • options:  WebGLDrawOptions ที่ช่วยให้นักพัฒนาแอปแสดงเนื้อหาในแผนที่ฐานของ Google ที่เชื่อมโยง
ค่าที่ส่งคืน: ไม่มี
ใช้วิธีนี้เพื่อวาดเนื้อหา WebGL บนแผนที่โดยตรง โปรดทราบว่าหากภาพซ้อนทับต้องวาดเฟรมใหม่ ให้เรียกใช้ WebGLOverlayView.requestRedraw
onRemove
onRemove()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน: ไม่มี
ระบบจะเรียกใช้เมธอดนี้เมื่อนำภาพซ้อนทับออกจากแผนที่ด้วย WebGLOverlayView.setMap(null) และเป็นที่ที่คุณควรนำออบเจ็กต์ระดับกลางทั้งหมดออก ต้องใช้วิธีนี้ในการแสดงผล
onStateUpdate
onStateUpdate(options)
พารามิเตอร์: 
  • options:  WebGLStateOptions ที่ช่วยให้นักพัฒนาแอปสามารถคืนค่าบริบท GL ได้
ค่าที่ส่งคืน: ไม่มี
ใช้วิธีนี้เพื่อจัดการการอัปเดตสถานะ GL นอกเฟรมภาพเคลื่อนไหวที่แสดงผล
requestRedraw
requestRedraw()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน: ไม่มี
ทริกเกอร์ให้แผนที่วาดเฟรมใหม่
requestStateUpdate
requestStateUpdate()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน: ไม่มี
ทริกเกอร์ให้แผนที่อัปเดตสถานะ GL
setMap
setMap([map])
พารามิเตอร์: 
  • map:  Map optional แผนที่เพื่อเข้าถึง div, โมเดล และสถานะมุมมอง
ค่าที่ส่งคืน: ไม่มี
เพิ่มการวางซ้อนลงในแผนที่
สืบทอด: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

อินเทอร์เฟซ WebGLDrawOptions

google.maps.WebGLDrawOptions อินเทอร์เฟซ

ตัวเลือกการวาด
gl
ประเภท:  WebGLRenderingContext
WebGLRenderingContext ที่จะใช้ในการแสดงผล WebGLOverlayView นี้
transformer
ประเภท:  CoordinateTransformer
การแปลงเมทริกซ์จากพื้นที่กล้องเป็นพิกัดละติจูด/ลองจิจูด

WebGLStateOptions อินเทอร์เฟซ

google.maps.WebGLStateOptions อินเทอร์เฟซ

ตัวเลือกสถานะ GL
gl
ประเภท:  WebGLRenderingContext
WebGLRenderingContext ที่จะใช้ในการแสดงผล WebGLOverlayView นี้

CoordinateTransformer อินเทอร์เฟซ

google.maps.CoordinateTransformer อินเทอร์เฟซ

อินเทอร์เฟซนี้มีวิธีการที่สะดวกในการสร้างเมทริกซ์เพื่อใช้ในการแสดงผลฉาก WebGL บนแผนที่ฐานของ Google

หมายเหตุ: การอ้างอิงออบเจ็กต์นี้ไม่ควรอยู่นอกขอบเขตของการเรียก WebGLOverlayView.onDraw ที่ห่อหุ้ม
fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
พารามิเตอร์: 
  • latLngAltitude:  LatLngAltitude|LatLngAltitudeLiteral ละติจูด ลองจิจูด และระดับความสูง
  • rotations:  Float32Array optional อาร์เรย์ที่มีมุมการหมุนของออยเลอร์ในหน่วยองศาตามรูปแบบ XYZ
  • scale:  Float32Array optional อาร์เรย์ที่มีอาร์เรย์สเกลาร์ XYZ ที่จะใช้กับแกนหลัก
ค่าที่ส่งคืน:  Float64Array เมทริกซ์ MVP ที่ใช้กับ WebGL
getCameraParams
getCameraParams()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน: พารามิเตอร์กล้อง CameraParams

CameraParams อินเทอร์เฟซ

google.maps.CameraParams อินเทอร์เฟซ

ใช้เพื่อดึงพารามิเตอร์ของกล้อง เช่น พารามิเตอร์ของกล้อง GL ที่ใช้สำหรับ WebGLOverlayView

อินเทอร์เฟซนี้ขยาย CameraOptions

center
ประเภท:  LatLng
heading
ประเภท:  number
tilt
ประเภท:  number
zoom
ประเภท:  number