deck.gl Layer Catalog 图层全目录指南四大图层家族的选型与实践【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gldeck.gl 的核心是一个由数十种开箱即用的图层Layer组成的目录Catalog本文以 docs/api-reference/layers/README.md 为主线系统梳理 Core、Aggregation、Geo、Mesh 四大图层家族各自的定位与成员并结合基类体系、源码导出与官方开发指南讲清楚“图层怎么选、怎么实例化、怎么渲染与更新”这一条完整链路。读完本文你将能够在自己的可视化项目中快速定位合适的图层、正确构造 props并理解图层在 deck.gl 响应式渲染模型中的工作方式。图层deck.gl 的核心概念在 deck.gl 中Layer图层是一个打包好的可视化类型它接收一组数据对象datums把每个对象与位置、颜色、形状、拉伸高度等视觉属性关联起来最终渲染在地图或画布上。正如 developer-guide/using-layers.md 所定义的一个 deck.gl 图层是一个打包的可视化类型它接收一组数据对象为每个对象关联位置、颜色、形状、拉伸等属性并将其渲染在地图上。deck.gl 提供了庞大的图层目录并且被设计成可以自由组合多个图层形成复杂的视觉效果——例如用一个ScatterplotLayer画站点圆点、再用一个TextLayer叠加标注文字。对初次接触 deck.gl 的开发者官方建议在翻阅图层目录之前先阅读两处基础材料Guide to using deck.gl layers图层使用的一般概念与常见问题FAQ所有 deck.gl 图层都继承自Layer或CompositeLayer基类这两个基类的 props 对所有图层都可用除非个别图层文档特别说明基类 props 不会在单个图层文档里重复罗列。两个基类Layer 与 CompositeLayer理解图层目录的第一步是理解它的继承体系这决定了“哪些 props 是通用的”。Layer所有图层的基类Layer是所有 deck.gl 图层的基类它提供了一套基类属性base properties在每一个图层中都可用例如idstring默认取图层类名图层唯一标识用于渲染周期之间的图层匹配同一类型存在多个实例时必须显式设置dataIterable | string | Promise | AsyncIterable | object默认[]图层的数据源可以是数组、可迭代对象、URL 字符串、Promise 等visibleboolean默认true是否可见推荐用它替代条件渲染以保留图层状态opacitynumber默认1图层整体透明度pickableboolean |3d默认false是否响应鼠标拾取事件3d开启深度拾取onHover/onClick/onDragStart/onDrag/onDragEnd交互回调需要pickable: trueautoHighlight/highlightColor/highlightedObjectIndex悬停/指定索引高亮coordinateSystem/coordinateOrigin/modelMatrix/wrapLongitude坐标系相关dataComparator/dataTransform/_dataDiff数据比较与变换updateTriggers/transitions属性更新触发与动画过渡loaders/loadOptions/fetch数据加载parameters/getPolygonOffsetGPU 渲染参数。这些通用 props 在 layer.md 中有完整定义单图层文档中不再重复阅读任何图层文档时都应把基类 props 视为“已默认具备”。CompositeLayer由多个子图层组成的图层CompositeLayer是Layer的子类用于实现“由其他图层生成”的组合图层。它改写了一系列生命周期方法以创建子图层并处理来自子图层的事件其draw方法永远不会被调用——组合图层不直接渲染进 WebGL2/WebGPU 上下文而是通过renderLayers返回一个或多个子图层实例可以是嵌套数组deck.gl 会自动拍平并过滤null。典型例子是GeoJsonLayer它内部把 GeoJSON 的 Point、LineString、Polygon 拆分成多个子图层渲染。文档中还给出两个实用的_subLayerProps实验性用法——让 GeoJsonLayer 只有点要素响应交互import {GeoJsonLayer} from deck.gl/layers; const layer new GeoJsonLayer({ // ... pickable: false, _subLayerProps: { points-circle: { pickable: true } } });以及用ColumnLayer替换默认的散点来渲染点要素import {ColumnLayer, GeoJsonLayer} from deck.gl/layers; const layer new GeoJsonLayer({ // ...other props _subLayerProps: { points: { type: ColumnLayer, diskResolution: 12, radius: 50, extruded: true, getElevation: d d.sourceFeature.feature.properties.value } } });四大图层家族全览图层目录按用途划分为四个家族分别对应四个独立的 npm 包本仓库中对应 modules/layers、modules/aggregation-layers、modules/geo-layers、modules/mesh-layers 四个模块。下面逐一展开。Core Layers通用基础图层deck.gl/layersCore Layers 是一组通用目的的图层是所有数据可视化的“积木”也是 deck.gl 中最稳定、支持最完善的图层。对应仓库源码见 modules/layers/src/index.ts共 13 个成员图层一句话用途文档ArcLayer在两个坐标之间绘制大圆弧如航线arc-layer.mdBitmapLayer在地图上渲染位图图像如卫星影像bitmap-layer.mdColumnLayer渲染带拉伸高度的柱体如 3D 柱状图column-layer.mdGeoJsonLayer渲染任意 GeoJSON 数据点/线/面混合geojson-layer.mdGridCellLayer渲染规则网格单元聚合图层的底层积木grid-cell-layer.mdIconLayer渲染图标/符号如带纹理的标记icon-layer.mdLineLayer在两点之间绘制直线line-layer.mdPathLayer渲染折线路径任意顶点数量path-layer.mdPointCloudLayer渲染 3D 点云point-cloud-layer.mdPolygonLayer渲染多边形支持拉伸为 3D 体polygon-layer.mdScatterplotLayer在给定坐标处绘制圆形最常用的散点图层scatterplot-layer.mdSolidPolygonLayer渲染实体多边形不支持拉伸但性能更优solid-polygon-layer.mdTextLayer在坐标处渲染文本标签text-layer.md源码中每个图层均有独立目录modules/layers/src例如散点图实现位于scatterplot-layer/同时导出了ScatterplotLayerProps等 TypeScript 类型。此外该模块还导出了实验性图层_MultiIconLayer与_TextBackgroundLayer它们是 TextLayer 的底层组成。Aggregation Layers聚合图层deck.gl/aggregation-layers聚合图层会对输入数据进行聚合aggregate再以网格分箱grid/hexagon binning、等高线contour、热力图heatmap等替代形式可视化。当数据点密度远高于屏幕可呈现的精度时聚合图层是首选。对应源码见 modules/aggregation-layers/src/index.ts共 5 个公开图层ContourLayer由点数据生成等高线或等值带GridLayer将点聚合到方形网格单元支持 GPU/CPU 两种聚合路径HeatmapLayer渲染热力图用颜色表达密度HexagonLayer将点聚合到六边形蜂窝网格ScreenGridLayer在屏幕空间而非经纬度空间做网格聚合。源码中还可看到内部基类_AggregationLayer它是上述各聚合图层的公共抽象位于 modules/aggregation-layers/src/common/aggregation-layer.ts从源码结构推断。聚合图层往往同时暴露getPosition等访问器与aggregation相关配置具体参数请查阅各图层文档。Geo Layers地理空间图层deck.gl/geo-layersGeo Layers 专门面向地理空间可视化场景覆盖地图瓦片、主流地理空间索引系统、GIS 格式等。对应源码见 modules/geo-layers/src/index.ts共 13 个成员图层定位文档TileLayer通用瓦片图层基座按需加载瓦片tile-layer.mdMVTLayer渲染 Mapbox Vector Tile矢量瓦片mvt-layer.mdTile3DLayer渲染 3D Tiles倾斜摄影等tile-3d-layer.mdTerrainLayer从高度图瓦片构建地形网格terrain-layer.mdWMSLayer渲染 WMS 服务的栅格地图wms-layer.mdH3HexagonLayer按 H3 索引渲染六边形h3-hexagon-layer.mdH3ClusterLayer按 H3 聚合层级渲染单元h3-cluster-layer.mdS2Layer按 S2 索引渲染单元s2-layer.mdGeohashLayer按 Geohash 索引渲染单元geohash-layer.mdQuadkeyLayer按 Quadkey四叉树瓦片键渲染单元quadkey-layer.mdGreatCircleLayer绘制两点间的大圆航线great-circle-layer.mdTripsLayer动画化轨迹数据如车辆轨迹回放trips-layer.mdA5Layer渲染 A5 蜂窝网格单元a5-layer.md其中 TileLayer、MVTLayer、TerrainLayer、ScenegraphLayer 等还会为各自目标格式内置专用的 loaders.gl 加载器见基类 layer.md 的 loaders 说明。Mesh Layers3D 模型图层deck.gl/mesh-layersMesh Layers 用于可视化 3D 模型对 glTF 格式的 scene graph 提供实验性支持。对应源码见 modules/mesh-layers/src/index.ts共 2 个图层SimpleMeshLayer渲染任意 3D 网格mesh适合加载自定义模型后做平移、旋转、着色ScenegraphLayer渲染 glTF 场景图模型支持动画与多节点层级。图层实例化的四个核心要素无论选择目录中的哪个图层实例化时都围绕四类 props 展开详见 using-layers.md。1. id图层唯一标识id是图层在所有图层中的唯一标识。注意单独构造一个图层实例本身没有性能开销deck.gl 只在图层被创建一个 id 首次出现或更新同一 id 传入不同 props时才做昂贵计算。强烈建议显式设置id以避免冲突相关内容可进一步阅读 Layer Lifecycle。2. data数据源data指定图层可视化的数据来源期望是一组结构相似的数据对象类似数据表的行。deck.gl 图层能够高效处理数百万级的数据对象。data可以是Array、Map、Set、任何含length字段的对象、解析结果为上述类型的Promise或用于加载此类对象的 URL 字符串。完整约束见 layer.md 的 data 属性。3. Accessors把数据映射为视觉属性Accessor 是将data中的对象映射到视觉配置圆半径、线条颜色……的 props所有 accessor 的 prop 名都以get开头。当 accessor 被设置为函数时图层首次绘制前会遍历数据流并对每个元素调用该函数。函数接收两个参数object当前数据元素若data是非可迭代对象此参数恒为nullobjectInfo上下文对象包含index当前索引、datadataprop 的值、target预分配的数组可选地写入结果并返回以减少 GC某些浏览器下可显著提升性能。accessor 通常返回一个数字或数组如果设置为常量值则该值应用于数据流中的所有对象。4. 其他图层 props其余 props 通常是作用于整个图层的数值或布尔值包括渲染选项透明度、PolygonLayer 的拉伸、TextLayer 的字体等、坐标系与交互相关配置。一个完整的实例化示例JavaScriptimport {ScatterplotLayer} from deck.gl/layers; const layer new ScatterplotLayer({ id: bart-stations, data: [ {name: Colma, passengers: 4214, coordinates: [-122.466233, 37.684638]}, {name: Civic Center, passengers: 24798, coordinates: [-122.413756, 37.779528]}, // ... ], stroked: false, filled: true, getPosition: d d.coordinates, getRadius: d Math.sqrt(d.passengers), getFillColor: [255, 200, 0] });对应的 TypeScript 版本泛型约束数据形状import {ScatterplotLayer} from deck.gl/layers; type BartStation { name: string; passengers: number; coordinates: [longitude: number, latitude: number]; }; const layer new ScatterplotLayerBartStation({ id: bart-stations, data: [ {name: Colma, passengers: 4214, coordinates: [-122.466233, 37.684638]}, {name: Civic Center, passengers: 24798, coordinates: [-122.413756, 37.779528]}, // ... ], stroked: false, filled: true, getPosition: (d: BartStation) d.coordinates, getRadius: (d: BartStation) Math.sqrt(d.passengers), getFillColor: [255, 200, 0] });渲染与组合多图层叠加deck.gl 允许用相同或不同的数据集渲染多个图层只要把图层实例数组传给 Deck纯 JS或 DeckGLReact组件它们就会按顺序渲染从而用若干基础图层拼出复杂可视化。纯 JS 组合示例散点 文字标注import {Deck} from deck.gl/core; import {ScatterplotLayer, TextLayer} from deck.gl/layers; // 形如 [{lon: -122.39, lat: 37.62, alt: 1800, callSign: SKW 3342}, ...] 的航班位置 JSON const flights /path/to/data.json; const layers [ new ScatterplotLayer({ id: circles, data: flights, getPosition: d [d.lon, d.lat, d.alt], getFillColor: [255, 255, 255], getRadius: 3, radiusUnits: pixels }), new TextLayer({ id: labels, data: flights, getText: d d.callSign, getPosition: d [d.lon, d.lat, d.alt], getSize: 12 }) ]; const deckInstance new Deck({ initialViewState: { longitude: -122.4, latitude: 37.8, zoom: 8 }, controller: true, layers });React 版本则把同样的layers数组传给DeckGL组件import React from react; import {DeckGL} from deck.gl/react; import {LayersList} from deck.gl/core; import {ScatterplotLayer, TextLayer} from deck.gl/layers; function App() { const flights /path/to/data.json; const layers: LayersList [ new ScatterplotLayer({ id: circles, data: flights, getPosition: d [d.lng, d.lat, d.alt], getFillColor: [255, 255, 255], getRadius: 3, radiusUnits: pixels }), new TextLayer({ id: labels, data: flights, getText: d d.callSign, getPosition: d [d.lng, d.lat, d.alt], getSize: 12 }) ]; return DeckGL initialViewState{{longitude: -122.4, latitude: 37.8, zoom: 8}} controller layers{layers} /; }更新图层响应式范式与常见 FAQ图层一旦实例化其 props 便不可修改即使data是深层嵌套对象修改嵌套元素也不会被监听。要更新一个已有图层应创建同id的新实例并通过Deck.setProps/DeckGL的layersprop 提交。下面的例子通过轮询服务器定期刷新数据import {Deck} from deck.gl/core; import {ScatterplotLayer, TextLayer} from deck.gl/layers; const deckInstance new Deck({ initialViewState: {longitude: -122.4, latitude: 37.8, zoom: 8}, controller: true }); update(); async function update() { // queryServer 是假设的接口返回形如 [{lon, lat, alt, callSign}, ...] 的航班列表 const flights await queryServer({time: Date.now()}); deckInstance.setProps({ layers: [ new ScatterplotLayer({ id: circles, data: flights, getPosition: d [d.lng, d.lat, d.alt], getFillColor: [255, 0, 0], getRadius: 3, radiusUnits: pixels }), new TextLayer({ id: labels, data: flights, getText: d d.callSign, getPosition: d [d.lon, d.lat, d.alt], getSize: 12 }) ] }); // 60 秒后再次刷新 setTimeout(update, 60000); }FAQ每次渲染都新建图层会不会很浪费deck.gl 的架构基于响应式编程范式应用状态每次变化时完整地“重新渲染”一份 UI 描述即新的图层数组框架通过 diff 新旧描述只做最小必要的变更对 deck.gl 是 GPU 状态对 React 是 DOM 树。关键在于图层实例很廉价图层只是包含 props 的描述符对象所有计算得到的状态WebGL2/WebGPU 的 program、顶点属性等存储在独立的 state 对象中每个渲染周期会被“移交”给新匹配到的图层。新图层拿到旧图层的状态 新图层的 props旧图层则被丢弃回收。只要保持id不变图层就会被匹配、状态就会被保留更新应用无需感知内部细节。频繁创建与销毁 JS 对象在现代 JS 环境中非常高效这与 React 每个渲染周期生成一棵新的 ReactElement 树是同构的模式已被验证可行。FAQ为什么我的图层没有随新 props 更新由于响应式框架靠 diff 实现效率deck.gl 对大多数 props 默认使用浅比较shallow equality。但 accessor 是例外改变 accessor 函数本身不会触发属性更新——函数标识identity无法可靠地表明是否需要重算且局部函数作为 prop 值非常普遍。function render() { const layer new ScatterplotLayer({ // ... getColor: x x.color, // 每次 render 都新建函数不会触发更新 getRadius: this._getRadius.bind(this) // bind 每次生成新函数 }); deck.setProps([layer]); }deck.gl 无法仅通过比较函数来判断程序员意图而重算属性可能很昂贵因此默认忽略 accessor 的浅变化。此时应使用updateTriggers做细粒度控制它的键是图层 accessor 名值是影响该 accessor 输出的变量列表任一变量变化依赖该 accessor 的所有属性都会重算function render({maleColor, femaleColor}: {maleColor: Color; femaleColor: Color}) { const layers [ new ScatterplotLayer({ getPosition: (d: DataType) d.position, getFillColor: (d: DataType) d.gender M ? maleColor : femaleColor, // 当 [maleColor, femaleColor] 中任一值变化时重新求值 getFillColor updateTriggers: { getFillColor: [maleColor, femaleColor] } }) ]; deckInstance.setProps({layers}); }注意两点dataprop 的变化优先级高于updateTriggers新 data 会触发全部属性更新可用dataComparator阻止updateTriggers的变量支持数字、字符串、对象或函数每轮渲染进行浅比较。更深入的行为分析见 Performance Optimization。选型速查什么场景选哪类图层结合上文四大家族的定位可以给出如下选型思路基础几何/标注散点、圆、线、弧线、路径、多边形、图标、文本 → Core LayersScatterplotLayer、LineLayer、ArcLayer、PathLayer、PolygonLayer、IconLayer、TextLayer 等海量点密度表达网格/六边形分箱、等高线、热力图 → Aggregation LayersGridLayer、HexagonLayer、ContourLayer、HeatmapLayer、ScreenGridLayer地理空间数据瓦片底图、矢量瓦片、3D Tiles、地形、H3/S2/Geohash/Quadkey 空间索引、大圆航线、轨迹回放 → Geo Layers3D 模型自定义 mesh、glTF 场景图 → Mesh LayersSimpleMeshLayer、ScenegraphLayer混合数据源GeoJSON 点线面混合 → GeoJsonLayer组合图层可配合_subLayerProps定制子图层。进阶延伸基类 props 深入transitions属性动画支持interpolation与spring两种类型、loaders/loadOptions/fetch数据加载、coordinateSystem/modelMatrix非 Web Mercator 坐标系、parameters/getPolygonOffsetGPU 渲染参数等全部可在 layer.md 查阅动画细节见 Animations and Transitions图层生命周期创建、更新、销毁各阶段的方法initializeState、shouldUpdateState、updateState等见 Layer Lifecycle自定义图层如果要编写目录之外的新图层继承Layer基础图层或CompositeLayer组合图层参考 自定义图层开发指南完整目录入口本文全部图层的权威清单与链接始终以 Layer Catalog Overview 为准。小结deck.gl 的图层目录通过四个定位清晰的家族Core / Aggregation / Geo / Mesh覆盖了从基础几何、统计聚合到地理空间与 3D 模型的可视化场景。选对图层只是第一步真正发挥其能力的关键在于理解统一的 props 体系id、data、accessors与响应式更新模型同 id 新建实例、浅比较、updateTriggers 细粒度重算。掌握了这套骨架你就可以在这个目录之上自由组合、定制甚至扩展出属于自己的图层。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考