# 库：Deck.gl > Observable 框架文档：库：Deck.gl 来源： [deck.gl]() 是一个“GPU 驱动的框架，用于对大型数据集进行可视化探索性数据分析。”您可以导入 Deck.gl 的 [独立包]()，如下所示：从“npm:deck.gl”导入甲板；然后，您可以参考 Deck.gl 的各种组件，例如“deck.DeckGL”或“deck.HexagonLayer”。或者为了更简洁的参考，您可以将这些符号解构为顶级变量： const {DeckGL、AmbientLight、GeoJsonLayer、HexagonLayer、LightingEffect、PointLight} = 甲板；下面的示例改编自[文档]()。 ## 人身伤害道路碰撞事故，2022 年 ### ${data.length.toLocaleString("en-US")} 报告公共道路上发生碰撞 const 覆盖率 = view(Inputs.range([0, 1], {值: 0.5, 标签: "覆盖率", 步骤: 0.01})); const radius = view(Inputs.range([500, 20000], {值: 1000, 标签: "半径", 步骤: 100})); const upperPercentile = view(Inputs.range([0, 100], {value: 100, label: "上百分位数", 步骤: 1})); 该示例的代码有点复杂。让我们来分解一下。 ### 1\.数据事故数据以 CSV 文件形式加载，由数据加载器 ([`dft-road-collisions.csv.sh`]()) 生成，使用 DuckDB 从交通部数据集生成提取内容。国家/地区形状来自 [TopoJSON]() 文件，我们将其转换为 GeoJSON。 const data = FileAttachment("../data/dft-road-collisions.csv").csv({array: true, typed: true}).then((data) => data.slice(1)); const topo = import.meta.resolve("npm:visionscarto-world-atlas/world/50m.json"); const world = fetch(topo).then((response) => response.json()); const 国家 = world.then((world) => topojson.feature(world, world.objects.countries)); ### 2\.布局使用嵌套 div，我们为图表定位了一个大区域，并在顶部浮动了一张卡片，该卡片将接收标题、颜色图例和交互式控件：

## 人身伤害道路碰撞事故，2022 年 ### ${data.length.toLocaleString("en-US")} 报告公共道路上发生碰撞

${colorLegend}

数据：交通部

正如所期望的，颜色被表示为（红、绿、蓝）三元组。图例是使用 [Observable Plot]() 制作的：常量颜色范围 = [ [1, 152, 189], [73、227、206]、 [216、254、181]、 [254、237、177]、 [254、173、84]、 [209、55、78] ]; const colorLegend = Plot.plot({ 保证金：0，边距顶部：20，宽度：180，身高：35，样式：“颜色：白色；”， x：{填充：0，轴：空}，标记：[ Plot.cellX(colorRange, {填充: ([r, g, b]) => `rgb(${r},${g},${b})`, 插图: 0.5}), Plot.text(["较少"], {frameAnchor: "左上角", dy: -12}), Plot.text(["更多"], {frameAnchor: "右上角", dy: -12}) ] }); ### 3\. DeckGL 实例我们创建一个针对布局中定义的容器的 DeckGL 实例。在开发和预览期间，此代码可以运行多次，因此我们每次运行代码块时都会注意清理它： const DeckInstance = new DeckGL({ 容器, 初始视图状态，获取工具提示，效果，控制器：真 }); // 如果此代码重新运行则清理失效.then(() => { DeckInstance.finalize(); 容器.innerHTML = ""; }); `initialViewState` 描述了相机的初始位置：常量初始视图状态 = { 经度：-2，纬度：53.5，变焦：5.7，最小缩放：5，最大缩放：15，螺距：40.5，轴承：-5 }; `getTooltip` 生成当鼠标悬停在六边形上时显示的内容：函数 getTooltip({object}) { if (!object) 返回 null； const [lng, lat] = 对象.位置; const count = object.points.length；返回`纬度：${lat.toFixed(2)} 经度：${lng.toFixed(2)} ${count} 次碰撞`; } `effects` 定义光照：常量效应 = [ 新的照明效果（{ ambientLight: new AmbientLight({颜色: [255, 255, 255], 强度: 1.0}), pointLight: new PointLight({颜色: [255, 255, 255], 强度: 0.8, 位置: [-0.144528, 49.739968, 80000]}), pointLight2: new PointLight({颜色: [255, 255, 255], 强度: 0.8, 位置: [-3.807751, 54.104682, 8000]}) }) ]; ### 4\.道具由于某些参数是交互式的，因此我们使用“setProps”方法在其值发生变化时更新图层： DeckInstance.setProps({ 图层：[ 新的 GeoJsonLayer({ id: "底图", 数据：国家、线宽最小像素：1，获取线条颜色: [60, 60, 60], 获取填充颜色：[9,16,29] }), 新的六边形层（{ id：“热图”，数据，覆盖范围，半径，上百分位数，颜色范围，海拔比例：50，海拔范围: [0, 5000 * t], 挤压：真实，获取位置：(d) => d, 可挑选：真实，材料：{ 环境：0.64，漫反射：0.6，光泽度：32，镜面反射颜色: [51, 51, 51] } }) ] }); 最后，“t”变量使用 [generator]() 控制挤压六边形的高度（可以通过按钮输入重置）： const t = (函数* () { 常量持续时间= 1000； const start = Performance.now(); const 结束 = 开始 + 持续时间；现在就让； while ((now = Performance.now()) < end) 产量 d3.easeCubicInOut(Math.max(0, (现在 - 开始) / 持续时间)); 产量1； })();

可观察框架 Lib Deckgl

包含技能