deck.gl 疊加層檢視
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
查看範例
Deck.gl 是採用 WebGL 技術的視覺化架構，提供各種易於使用的 2D 和 3D 資料呈現方式，並支援大型資料集。您可以透過 Maps JavaScript API，使用 deck.gl 的 GoogleMapsOverlay 類別來加入 deck.gl 資料視覺化內容。
Deck.gl 支援多種資料來源和格式，可在地圖上算繪多個視覺化圖層，建立複合視覺化內容。
需求條件
如要使用 deck.gl，您必須使用 Maps JavaScript API 提供的光柵地圖或向量地圖。我們強烈建議您使用向量地圖，這樣可以充分運用 Google 基本地圖的實用功能，包括傾斜、旋轉和完整的 3D 相機控制項等，盡享 WebGL 技術帶來的優勢。
詳情請參閱向量地圖總覽。
載入 deck.gl
您可以在網頁應用程式中使用指令碼標記載入 Deck.gl，或是透過 Node Package Manager (NPM) 以模組形式安裝 Deck.gl。
詳情請參閱 deck.gl 網站的 @deck.gl/google-maps 說明文件。
在地圖中加入 deck.gl 視覺化內容
您可以建立 Deck.gl 的 GoogleMapsOverlay 類別執行個體，在地圖中加入 deck.gl 視覺化內容。
詳情請參閱 deck.gl 網站的 GoogleMapsOverlay 說明文件。
支援的視覺化呈現方式
Deck.gl 提供多種 2D 和 3D 呈現方式，適合用來顯示不同類型的資料。如需完整清單，請參閱 deck.gl 網站的「圖層目錄」頁面。
範例
查看更多 deck.gl 和 Maps JavaScript API 應用實例：
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2025-08-27 (世界標準時間)。
[null,null,["上次更新時間：2025-08-27 (世界標準時間)。"],[[["\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)"]]
