deck.gl 叠加视图
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
查看示例
deck.gl 是一种由 WebGL 提供支持的可视化框架，提供各种易用的 2D 和 3D 数据可视化效果，并且支持大型数据集。您可以使用 Maps JavaScript API 和 deck.gl 的 GoogleMapsOverlay 类来添加 deck.gl 数据可视化效果。
deck.gl 支持多种数据源和格式，还支持在地图上渲染多个可视化图层来创建复合可视化效果。
要求
如需使用 deck.gl，您必须使用 Maps JavaScript API 提供的光栅或矢量地图。强烈建议您使用矢量地图，以便充分利用 Google 基本地图中由 WebGL 提供支持的功能，包括倾斜、旋转和全方位 3D 镜头控制。
如需了解详情，请参阅矢量地图概览。
加载 deck.gl
您可以在 Web 应用中使用脚本标记加载 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 的更多应用实例：
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-08-27。
[null,null,["最后更新时间 (UTC)：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)"]]
