WebGL

WebGLOverlayView 클래스

google.maps.WebGLOverlayView 클래스

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 수명 주기 후크 각각에 구현을 제공하면 됩니다.

유효한 Map 객체로 WebGLOverlayView.setMap를 호출하여 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()
매개변수:  없음
반환 값:  None
이 메서드를 구현하여 오버레이가 그려지기 전에 WebGL 렌더링 컨텍스트에 즉시 액세스할 필요가 없는 중간 데이터 구조를 가져오거나 만드세요. 이 메서드는 렌더링하기 위해 구현해야 합니다.
onContextLost
onContextLost()
매개변수:  없음
반환 값:  None
이 메서드는 어떤 이유로든 렌더링 컨텍스트가 손실될 때 호출되며 기존 GL 상태는 더 이상 필요하지 않으므로 여기에서 삭제해야 합니다.
onContextRestored
onContextRestored(options)
매개변수: 
  • options:  개발자가 GL 컨텍스트를 복원할 수 있는 WebGLStateOptions입니다.
반환 값:  None
이 메서드는 렌더링 컨텍스트를 사용할 수 있게 되면 호출됩니다. 이를 사용하여 셰이더나 버퍼 객체 등의 WebGL 상태를 초기화하거나 바인딩할 수 있습니다.
onDraw
onDraw(options)
매개변수: 
  • options:  개발자가 연결된 Google 기본 지도에 콘텐츠를 렌더링할 수 있도록 지원하는 WebGLDrawOptions입니다.
반환 값:  None
이 메서드를 구현하여 지도에 직접 WebGL 콘텐츠를 그립니다. 오버레이에 새 프레임이 그려져야 하는 경우 WebGLOverlayView.requestRedraw를 호출해야 합니다.
onRemove
onRemove()
매개변수:  없음
반환 값:  None
이 메서드는 오버레이가 WebGLOverlayView.setMap(null)을 사용하여 지도에서 삭제될 때 호출되며 여기에서 모든 중간 객체를 삭제해야 합니다. 이 메서드는 렌더링하기 위해 구현해야 합니다.
onStateUpdate
onStateUpdate(options)
매개변수: 
  • options:  개발자가 GL 컨텍스트를 복원할 수 있도록 하는 WebGLStateOptions입니다.
반환 값:  None
렌더링 애니메이션 프레임 외부에서 GL 상태 업데이트를 처리하려면 이 메서드를 구현하세요.
requestRedraw
requestRedraw()
매개변수:  없음
반환 값:  None
지도가 프레임을 다시 그리도록 트리거합니다.
requestStateUpdate
requestStateUpdate()
매개변수:  없음
반환 값:  None
지도가 GL 상태를 업데이트하도록 트리거합니다.
setMap
setMap([map])
매개변수: 
  • map:  Map optional div, 모델, 뷰 상태에 액세스하는 맵입니다.
반환 값:  None
지도에 오버레이를 추가합니다.
상속: 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])
매개변수: 
  • latLngAltitude:  LatLngAltitude|LatLngAltitudeLiteral 위도, 경도, 고도입니다.
  • rotations:  Float32Array optional XYZ 규칙에 따라 도 단위로 된 오일러 회전 각도가 포함된 배열입니다.
  • scale:  기본 축에 적용할 XYZ 스칼라 배열이 포함된 Float32Array optional 배열입니다.
반환 값:  WebGL과 함께 사용할 Float64Array MVP 행렬입니다.
getCameraParams
getCameraParams()
매개변수:  없음
반환 값:  CameraParams 카메라 매개변수

CameraParams 인터페이스

google.maps.CameraParams 인터페이스

WebGLOverlayView에 사용되는 GL 카메라와 같은 카메라 매개변수를 가져오는 데 사용됩니다.

이 인터페이스는 CameraOptions를 확장합니다.

center
유형:  LatLng
heading
유형:  number
tilt
유형:  number
zoom
유형:  number