deck.gl 오버레이 뷰
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
샘플 보기
deck.gl은 사용하기 쉬운 다양한 2D 및 3D 데이터 시각화를 제공하고 대용량 데이터 세트를 지원하는 WebGL 기반 시각화 프레임워크입니다. deck.gl의 GoogleMapsOverlay 클래스를 사용하여 Maps JavaScript API에 deck.gl 데이터 시각화를 추가할 수 있습니다.
deck.gl은 여러 데이터 소스와 형식을 지원하며 지도에 여러 시각화 레이어를 렌더링하여 복합 시각화를 만듭니다.
요구사항
deck.gl을 사용하려면 Maps JavaScript API에서 제공하는 래스터 또는 벡터 지도를 사용해야 합니다. 기울기, 회전 및 전체 3D 카메라 제어를 비롯한 Google 기본 지도의 WebGL 기능을 최대한 활용할 수 있도록 벡터 지도를 사용하는 것이 좋습니다.
자세한 내용은 벡터 지도 개요를 참고하세요.
deck.gl 로드
deck.gl은 스크립트 태그를 사용하여 웹 앱에 로드하거나 노드 패키지 관리자(NPM)에서 모듈로 설치할 수 있습니다.
자세한 내용은 deck.gl 웹사이트의 @deck.gl/google-maps 문서를 참고하세요.
지도에 deck.gl 시각화 추가
deck.gl 시각화는 deck.gl에서 제공하는 GoogleMapsOverlay 클래스의 인스턴스를 만들어 지도에 추가합니다.
자세한 내용은 deck.gl 웹사이트의 GoogleMapsOverlay 문서를 참고하세요.
사용 가능한 시각화
deck.gl은 다양한 유형의 데이터를 표시하도록 최적화된 다양한 2D 및 3D 시각화를 제공합니다. 전체 목록은 deck.gl 웹사이트의 레이어 카탈로그를 참고하세요.
예
실제로 사용 중인 deck.gl 및 Maps JavaScript API의 예를 더 확인해 보세요.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-08-27(UTC)
[null,null,["최종 업데이트: 2025-08-27(UTC)"],[[["\u003cp\u003eDeck.gl is a WebGL-powered visualization framework offering diverse 2D and 3D data visualizations, easily integrated with the Maps JavaScript API using its \u003ccode\u003eGoogleMapsOverlay\u003c/code\u003e class.\u003c/p\u003e\n"],["\u003cp\u003eIt supports various data sources and formats, enabling composite visualizations by layering multiple visualization types on the map, best utilized with the vector map for leveraging WebGL's 3D capabilities.\u003c/p\u003e\n"],["\u003cp\u003eDeck.gl can be integrated using a script tag or installed as modules from NPM, with detailed guidance available in the deck.gl documentation.\u003c/p\u003e\n"],["\u003cp\u003eNumerous 2D and 3D visualization options are provided by Deck.gl, optimized for different data types, as showcased in the Layer Catalog on the deck.gl website.\u003c/p\u003e\n"],["\u003cp\u003eExamples demonstrate the integration of Deck.gl and the Maps JavaScript API, including ArcLayer, Trips Layer, and ScatterPlot visualizations.\u003c/p\u003e\n"]]],[],null,["\u003cbr /\u003e\n\n\n[View Sample](/maps/documentation/javascript/examples/deckgl-tripslayer) \n\n[Deck.gl](https://deck.gl) is a WebGL-powered visualization\nframework that provides a variety of easy-to-use 2D and 3D data visualizations\nwith support for large data sets. You can add deck.gl data visualizations with\nthe Maps JavaScript API with deck.gl's [`GoogleMapsOverlay`](https://deck.gl/docs/api-reference/google-maps/google-maps-overlay) class.\n\nDeck.gl supports multiple datasources and formats, as well as creating\ncomposite visualizations by rendering multiple visualization layers on the map.\n\nRequirements\n\nTo use deck.gl you must use the raster or vector map provided by the Maps\nJavaScript API. It is highly recommended that you use the vector map so that\nyou can take full advantage of the WebGL-powered features of Google's basemap,\nincluding tilt, rotation, and full 3D camera control.\n\n[See the vector map overview for details](/maps/documentation/javascript/vector-map).\n\nLoading deck.gl\n\nDeck.gl can be loaded in your web app using either a script tag, or installed\nas modules from Node Package Manager (NPM).\n\nFor more information, see the [@deck.gl/google-maps documentation](https://deck.gl/docs/api-reference/google-maps/overview) on the deck.gl website.\n\nAdding deck.gl visualizations to the map\n\nDeck.gl visualizations are added to the map by creating an instance of the\n`GoogleMapsOverlay` class provided by deck.gl.\n\nFor more information, see the [`GoogleMapsOverlay` documentation](https://deck.gl/docs/api-reference/google-maps/google-maps-overlay) on the deck.gl website.\n\nAvailable visualizations\n\nDeck.gl provides many different 2D and 3D visualizations that are optimized for\ndisplaying different types of data. For a complete list, see the\n[Layer Catalog](https://deck.gl/docs/api-reference/layers) on the\ndeck.gl website.\n\nExamples\n\nSee more examples of deck.gl and Maps JavaScript API in action:\n\n- [Deck.gl ArcLayer](/maps/documentation/javascript/examples/deckgl-arclayer)\n- [Deck.gl HeatmpaLayer](/maps/documentation/javascript/examples/deckgl-heatmap)\n- [Deck.gl Trips Layer](/maps/documentation/javascript/examples/deckgl-tripslayer)\n- [Deck.gl ScatterPlot](/maps/documentation/javascript/examples/deckgl-points)"]]
