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

onRemove() 메서드를 트리거하려면 유효한 Map 객체와 함께 WebGLOverlayView.setMap를 호출하여 onAdd() 메서드 및 setMap(null) 호출을 트리거해야 합니다. 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 상태를 초기화하거나 바인딩하는 데 사용합니다.
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
이 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:  Float32Array optional 기본 축에 적용할 XYZ 스칼라 배열이 포함된 배열입니다.
반환 값: WebGL과 함께 사용할 Float64Array MVP 매트릭스입니다.
getCameraParams
getCameraParams()
매개변수: 없음
반환 값:  CameraParams camera 매개변수

CameraParams 인터페이스

google.maps.CameraParams 인터페이스

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

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

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