WebGL

WebGLOverlayView 클래스

class google.maps.WebGLOverlayView extends MVCObject
library "maps"

WebGL 오버레이 뷰를 사용하면 Google Maps Platform에서 벡터 기본 지도를 렌더링하는 데 사용하는 동일한 WebGL 렌더링 컨텍스트에 직접 액세스할 수 있습니다. 이와 같이 공유된 렌더링 컨텍스트를 사용하면 3D 빌딩 도형의 깊이 오클루전 및 2D/3D 콘텐츠를 기본 지도 렌더링과 동기화할 수 있는 기능과 같은 이점이 있습니다.

WebGL 오버레이 뷰를 사용하면 WebGL을 직접 사용하거나 Three.js 또는 deck.gl과 같은 인기 그래픽 라이브러리를 사용하여 지도에 콘텐츠를 추가할 수 있습니다. 오버레이를 사용하려면 google.maps.WebGLOverlayView를 확장하고 각 수명 주기 후크(WebGLOverlayView.onAdd, WebGLOverlayView.onContextRestored, WebGLOverlayView.onDraw, WebGLOverlayView.onContextLost, WebGLOverlayView.onRemove)의 구현을 제공하면 됩니다.

onAdd() 메서드 호출을 트리거하려면 유효한 Map 객체로 WebGLOverlayView.setMap를 호출해야 하며, onRemove() 메서드를 트리거하려면 setMap(null)를 호출해야 합니다. setMap() 메서드는 생성 시 또는 삭제 후 오버레이를 다시 표시해야 하는 경우 언제든지 호출할 수 있습니다. 그러면 확대/축소, 중심, 지도 유형과 같이 요소의 위치를 변경할 수 있는 지도 속성이 변경될 때마다 onDraw() 메서드가 호출됩니다. WebGLOverlayView는 MapOptions.mapId가 있는 벡터 지도에만 추가할 수 있습니다(RenderingType.VECTOR MapOptions.renderingType로 설정되고 Map.DEMO_MAP_ID를 MapOptions.mapId로 사용하는 지도 포함).

const {WebGLOverlayView} = await google.maps.importLibrary("maps");
WebGLOverlayView
WebGLOverlayView()
매개변수: 없음
WebGLOverlayView를 만듭니다.
getMap
getMap()
매개변수: 없음
반환 값: Map|null|undefined
onAdd
onAdd()
매개변수: 없음
반환 값: 없음
이 메서드를 구현하여 오버레이가 그려지기 전에 WebGL 렌더링 컨텍스트에 즉시 액세스할 필요가 없는 중간 데이터 구조를 가져오거나 만듭니다. 렌더링하려면 이 메서드를 구현해야 합니다.
onContextLost
onContextLost()
매개변수: 없음
반환 값: 없음
이 메서드는 어떤 이유로든 렌더링 컨텍스트가 손실될 때 호출되며 기존 GL 상태는 더 이상 필요하지 않으므로 여기에서 삭제해야 합니다.
onContextRestored
onContextRestored(options)
매개변수:
  • options: WebGLStateOptions: 개발자가 GL 컨텍스트를 복원할 수 있습니다.
반환 값: 없음
이 메서드는 렌더링 컨텍스트를 사용할 수 있게 되면 호출됩니다. 이를 사용하여 셰이더 또는 버퍼 객체와 같은 WebGL 상태를 초기화하거나 바인딩할 수 있습니다.
onDraw
onDraw(options)
매개변수:
  • options: WebGLDrawOptions: 개발자가 연결된 Google 기본 지도에 콘텐츠를 렌더링할 수 있습니다.
반환 값: 없음
지도에 WebGL 콘텐츠를 직접 그리려면 이 메서드를 구현하세요. 오버레이에 새 프레임을 그려야 하는 경우 WebGLOverlayView.requestRedraw를 호출합니다.
onRemove
onRemove()
매개변수: 없음
반환 값: 없음
이 메서드는 오버레이가 WebGLOverlayView.setMap(null)을 사용하여 지도에서 삭제될 때 호출되며 여기에서 모든 중간 객체를 삭제해야 합니다. 렌더링하려면 이 메서드를 구현해야 합니다.
onStateUpdate
onStateUpdate(options)
매개변수:
반환 값: 없음
렌더링 애니메이션 프레임 외부의 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
이 WebGLOverlayView를 렌더링할 WebGLRenderingContext입니다.
transformer
카메라 공간에서 위도/경도 좌표로의 행렬 변환입니다.

WebGLStateOptions 인터페이스

인터페이스 google.maps.WebGLStateOptions

GL 상태 옵션입니다.
gl
이 WebGLOverlayView를 렌더링할 WebGLRenderingContext입니다.

CoordinateTransformer 인터페이스

인터페이스 google.maps.CoordinateTransformer

이 인터페이스는 Google 기본 지도 위에 WebGL 장면을 렌더링하는 데 사용할 행렬을 생성하는 편의 메서드를 제공합니다.

참고: 이 객체에 대한 참조는 캡슐화하는 WebGLOverlayView.onDraw 호출의 범위 외부에 보관하면 안 됩니다.
fromLatLngAltitude
fromLatLngAltitude(latLngAltitude[, rotations, scale])
매개변수:
반환 값: WebGL과 함께 사용할 Float64Array MVP 행렬입니다.
getCameraParams
getCameraParams()
매개변수: 없음
반환 값: CameraParams 카메라 매개변수

CameraParams 인터페이스

interface google.maps.CameraParams extends CameraOptions

WebGLOverlayView에 사용되는 GL 카메라와 같은 카메라 매개변수를 가져오는 데 사용됩니다.
center
유형: LatLng
heading
유형: number
tilt
유형: number
zoom
유형: number