deck.gl Script Gallery：零依赖、开箱即用的 WebGL 可视化示例集

deck.gl Script Gallery零依赖、开箱即用的 WebGL 可视化示例集【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl本篇技术指南围绕 deck.gl 仓库中的 Script Gallery脚本画廊位于 examples/gallery展开它是一个无需安装依赖、无需打包工具在浏览器中直接打开即可运行的 deck.gl 示例集合覆盖点、线、弧、聚合网格、3D 瓦片、地图叠加等多种可视化形态。读完本文你将掌握 Gallery 的本地运行方式、Mapbox/MapLibre 底图 Token 配置方法、如何按照官方规范提交一个新示例以及如何用本地或指定 beta 版本的 deck.gl 源码批量回归测试全部示例最终发布到静态托管站点。Gallery 是什么免构建的 deck.gl 示例仓库Script Gallery 是 deck.gl 仓库中一个特殊目录其定位在 README.md 中定义得非常明确该目录包含独立的standalonedeck.gl 示例运行它们不需要安装依赖也不需要打包bundling。这意味着每个示例都是一个单一、自包含的 HTML 文件直接双击或用浏览器打开即可渲染。之所以能做到这一点是因为每个 HTML 都通过script标签直接引用 CDN 上的预构建 bundlescript srchttps://unpkg.com/deck.gl^9.0.0/dist.min.js/script这个dist.min.js是 deck.gl 官方通过 modules/main 的 bundle 构建 产出的单文件产物将核心 DeckGL 类与所有图层类合并为全局deck命名空间因此脚本中可以直接解构使用const {DeckGL, ScatterplotLayer, TextLayer} deck;当前目录共包含 21 个示例页面src与对应的 21 张缩略图images约定 800x480 尺寸覆盖面如下类别示例文件入门模板boiler-plate.html、boiler-plate-arcgis.html点与图标scatterplot-layer.html、icon-layer.html、point-cloud-layer.html文字标注text-layer.html线与弧line-layer.html、arc-layer.html、great-circle-layer.htmlGeoJSON 面/路径geojson-layer.html、highway.html聚合网格hexagon-layer.html、screengrid-layer.html、contour-layer.html、column-layer.html影像与瓦片bitmap-layer.html、tile-layer.html、tile-3d-layer.html地图叠加interleavemapbox-overlay.html、maplibre-overlay.html视角过渡viewport-transition.htmlGallery 中最基础的 boiler-plate 示例MapLibre 底图 ScatterplotLayer 与 TextLayer 叠加的“Hello World”快速上手直接打开 HTML一行不改看效果运行 Gallery 示例有两种途径方式一无需任何环境直接打开 HTML在浏览器中直接打开 src 目录下的任意.html文件即可。这是 README 推荐的最简单方式。方式二本地静态服务部分示例通过fetch远程加载 JSON/CSV 数据如arc-layer.html加载 counties.json直接以file://协议打开可能受浏览器跨域策略限制此时建议用本地服务托管。README 给出的标准做法是先yarn安装依赖、导出 Token 再启动# 安装依赖express、mustache 等见 package.json 的 devDependencies yarn # 启动服务 export MapboxAccessTokenmapbox-access-token npm start然后访问http://localhost:3000即可看到 Gallery 的索引页点击缩略图进入各个示例。关于底图与访问令牌README 明确提示带底图的示例需要 Mapbox access token 才能渲染。具体做法是打开任意示例 HTML查找mapbox-access-token占位符将其替换为你自己的 token。需要注意的是绝大多数示例其实使用MapLibre GLhttps://unpkg.com/maplibre-gl3.6.0/...作为渲染器、加载 Carto 提供的免费样式如positron-nolabels-gl-style这些示例即使不填 token 也能显示底图。真正的 Mapbox 示例只有 mapbox-overlay.html 一处其中硬编码了mapboxgl.accessToken mapbox-access-token;与mapbox://styles/mapbox/light-v9样式必须替换 token 才能看到 3D 建筑与叠加图层。另外本地开发服务constants.js会在缺少MapboxAccessToken环境变量时直接打印提示并以状态码 1 退出这是仓库对“示例不得包含私有 token”规范的强制约束。从 boiler-plate 看标准示例结构boiler-plate.html 是理解所有示例的最小范式完整结构如下html head titleGet Started with deck.gl and Mapbox/title script srchttps://unpkg.com/deck.gl^9.0.0/dist.min.js/script script srchttps://unpkg.com/maplibre-gl3.6.0/dist/maplibre-gl.js/script link hrefhttps://unpkg.com/maplibre-gl3.6.0/dist/maplibre-gl.css relstylesheet / /head body stylemargin:0; width: 100vw; height: 100vh;/body script typetext/javascript const {DeckGL, ScatterplotLayer, TextLayer} deck; new DeckGL({ mapStyle: https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json, initialViewState: { longitude: -122.45, latitude: 37.78, zoom: 11, maxZoom: 16 }, controller: true, layers: [ new ScatterplotLayer({ data: [{position: [-122.402, 37.79], color: [255, 0, 0], radius: 1000}], getPosition: d d.position, getFillColor: d d.color, getRadius: d d.radius, opacity: 0.3 }), new TextLayer({ data: [{position: [-122.402, 37.79], text: Hello World}], getPosition: d d.position, getText: d d.text }) ] }); /script /html从中可以提炼出 Gallery 示例的四条共性约定页面结构head中按顺序引入 deck.gl bundle、底图渲染器maplibre-gl及其 CSSbody设为全屏width/height: 100vw/100vh。必须包含title标签构建脚本 utils.js 通过正则/title(.*)\/title/提取标题用于生成索引页无 title 的页面无法正确出现在 Gallery 首页。controller: true开启交互允许用户拖拽、缩放、旋转视角这是所有示例的默认交互形态。访问器accessor驱动样式数据通过getPosition、getFillColor、getText等访问器映射到图层属性与 deck.gl 图层 API 完全一致。与 Mapbox/ArcGIS 集成对应还有两个变体模板boiler-plate-arcgis.html通过deck.gl/arcgis的loadArcGISModules([esri/Map, esri/views/MapView])异步加载 ArcGIS JS API再用DeckLayer把 deck.gl 图层挂进esri/Map底图换成gray-vector。mapbox-overlay.html 与 maplibre-overlay.html展示MapboxOverlay/MapLibreOverlay的interleaved交错渲染能力——deck.gl 图层与底图原生图层共享同一个深度缓冲示例中用beforeId指定图层插入到底图第一个 symbol 层之前并借助interpolate表达式让 3D 建筑在 zoom 15.05 内平滑“生长”ArcLayer的弧线则直接绘制在建筑之上。示例速览一页一图层覆盖 deck.gl 主流能力点与图标scatterplot-layer.html曼哈顿人口数据用radiusScale: 10与radiusMinPixels: 0.5控制点大小下限getColor按性别染色。icon-layer.html拉取 deck.gl GitHub 贡献者数据用d3.packSiblings做圆形排布以OrthographicView正交视图 IconLayer渲染头像getIcon返回头像 URLtooltip 显示登录名与贡献数。point-cloud-layer.html百万级点云SAMPLE_SIZE 1e6用程序化曲面方程sin(x²y²)·x/π生成坐标、法线与颜色OrbitView中可 3D 旋转。线与弧line-layer.html希思罗机场航班线getColor根据飞行高度start[2]做渐变高空冷色、低空暖色。great-circle-layer.html全球航班大圆航线getSourceColor/getTargetColor区分出发/到达端。arc-layer.html美国县域迁徙流用d3.scaleQuantile把流量映射到 7 级入/出配色点击某个县会通过deckgl.setProps({layers})重新计算以该县为中心的弧线集合。GeoJSON 面与路径geojson-layer.html温哥华街区多边形extruded: true挤出 3D 高度getElevation取sqrt(valuePerSqm)*10tooltip 展示均价与增长率。highway.html全美公路事故可视化d3.scaleThreshold做死亡率配色、d3.scaleLinear做线宽映射通过年份滑块切换数据并演示了updateTriggers仅当年份变化时更新与transitions: {getLineColor: 1000, getLineWidth: 1000}1000ms 属性过渡动画两个进阶 API。聚合与柱体hexagon-layer.html英国 3D 热力图滑块实时调节radius1000~20000、coverage0~1与upperPercentile90~100colorRange提供 6 级配色。screengrid-layer.html加州公交站点屏幕网格聚合cellSizePixels: 20以屏幕像素定网格不随缩放变化。contour-layer.html同一份数据生成等值线contours数组支持单阈值{threshold: 1, color, strokeWidth}与区间阈值{threshold: [6, 10], color: [0,0,255,128]}支持透明色。column-layer.html柱体图层diskResolution: 12控制圆柱截面精度、radius: 250、elevationScale: 5000放大高度差异。影像与瓦片bitmap-layer.html在经纬度bounds四边形内贴一张雷达影像GIF。tile-layer.html核心示例用 OpenStreetMap 瓦片模板{z}/{x}/{y}.png演示TileLayerrenderSubLayers自定义子图层——每个瓦片被渲染为一个BitmapLayer其bounds取自瓦片bbox的四至renderSubLayers: props { const {bbox: {west, south, east, north}} props.tile; return new BitmapLayer(props, { data: null, image: props.data, bounds: [west, south, east, north] }); }该示例无需任何底图 token是离线验证 Gallery 的首选页面。tile-3d-layer.html接入 ArcGIS 的 I3S 三维建筑场景旧金山建筑 SceneServerloader: I3SLoader指定加载器onTilesetLoad回调拿到tileset.zoom与cartographicCenter后自动把相机飞到数据范围。视角过渡viewport-transition.html城市列表 单选按钮切换城市时通过FlyToInterpolator({speed: 1.5})与transitionDuration: auto实现平滑的“飞越”过渡是 deck.gl 视角动画的极简范例。Gallery 中 GeoJsonLayer 示例温哥华街区按属性挤出高度并支持悬停 tooltip本地开发启动服务与新增示例规范启动开发服务README 给出的本地开发流程# 安装依赖 yarn # 启动服务需先导出 Mapbox token export MapboxAccessTokenmapbox-access-token npm start随后打开http://localhost:3000。服务端由 serve.js 实现基于expressGET /扫描 src 下所有 HTML 的元数据文件名、title、同名缩略图用 index.html 模板渲染索引页GET /deckgl.min.js返回本地构建的 bundle读取modules/main/dist/dist.dev.js路径定义见 constants.jsGET /*.html读取对应示例并替换其中的mapbox-access-token占位符为环境变量中的真实 token再套上 page.html 模板输出未知页面重定向到/404。新增一个示例的完整检查清单README 对贡献者给出了明确要求逐条如下在src下添加一个单一、自包含的 HTML 文件——所有 JS/CSS/数据要么内联要么从公开 CDN 加载不依赖本地模块与打包步骤移除文件中的任何私有 Mapbox token替换为mapbox-access-token占位符——这是仓库的硬性红线构建脚本依赖该占位符注入环境变量所有外部资源数据、第三方库等必须从公开可访问的 URL 加载且不得提交进本仓库——数据统一托管在 deck.gl 官方的deck.gl-data数据仓库各示例通过https://raw.githubusercontent.com/visgl/deck.gl-data/master/...引用每个 HTML 页面必须有title标签——索引页靠它生成链接文字在images目录添加一张同名缩略图.png或.jpg尺寸最好为800x480——构建脚本会先找{name}.png找不到再退而求其次找{name}.jpg见 utils.js提交 Pull Request。用本地或 Beta 版本回归测试全部示例Gallery 最实用的工程能力在于可以让全部示例统一切换到本地源码构建的 deck.gl 或任意指定发布版本从而在发版前做批量可视化回归。测试本地版本# 1. 重建 bundle在仓库根目录下执行 cd modules/main npm run prepublishOnly cd - # 2. 启动本地版本服务 npm run start-local这条链路的原理值得展开modules/main 的prepublishOnly会执行npm run build-bundle构建出dist/dist.dev.js而 utils.js 解析到--versionlocal参数时会把每个示例 HTML 中src..../deck.gl/dist.min.js的引用整体替换为http://localhost:3000/deckgl.min.js即由 serve.js 实时吐出的本地 bundle。这样无需改动任何示例文件就能让全部页面运行最新源码。测试指定发布版本node build-tools/serve --version6.0.0-alpha.0当--version传入具体版本号时utils.js 会将 bundle 引用替换为https://unpkg.com/deck.gl6.0.0-alpha.0/dist.min.js实现对某一 alpha/beta 版本的统一验证。版本替换通过正则src.?\/?deck\.gl.*?\/dist\.min\.js完成因此示例中只需保持 deck.gl 的引入路径形如https://unpkg.com/deck.gl^9.0.0/dist.min.js即可被自动接管。发布到静态托管npm run buildbuild.js 会执行rm -rf dist mkdir dist cp -r images dist node build-tools/build见 package.json生成dist/index.html与每个示例的独立页面并在发布构建中额外注入 Google Analytics 脚本utils.js 中的analytics片段。构建完成后将dist目录的内容复制到 gh-pages 分支的showcases/gallery目录即可上线浏览器直接访问静态文件、零服务端依赖。小结Script Gallery 以“一个 HTML、一个示例、零构建”的极简形态成为 deck.gl 官方能力最直观的活文档它既服务于想要快速上手的新用户直接打开即用也服务于准备发版的维护者一条命令批量切换本地/指定版本 bundle 做回归还为贡献者提供了清晰可循的示例接入规范。配合 build-tools 下短短数百行的 serve/build/utils 实现你可以完整理解从“示例编写”到“索引生成”“Token 注入”“版本切换”“静态发布”的整条流水线——这正是把 Gallery 作为独立子项目打磨的工程价值所在。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考