在 deck.gl 中以纯 JavaScript 方式无 React、无底图构建地图可视化应用【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl导读本文基于 deck.gl 仓库中examples/get-started/pure-js/basic示例见 README.md讲解如何不引入 React也不依赖 Mapbox / MapLibre 等任何底图服务仅用原生 JavaScript 与 Vite 构建一个可交互的 WebGL2 地图可视化应用。读完本文你将掌握deck.gl/core与deck.gl/layers的最小化安装与配置、Deck类的核心用法视图状态、控制器、事件交互、GeoJsonLayer与ArcLayer的组合实战以及开发/生产两种构建流程的完整命令。为什么需要无 React、无底图的纯 JS 方案deck.gl 的核心库与各层layers对 React、Mapbox GL、MapLibre GL没有任何强制依赖可以被任意 JavaScript 应用直接使用参见 docs/get-started/using-standalone.md。这对很多场景非常关键轻量接入只想在现有页面里叠加一层地理数据可视化不必引入整个 React 运行时自由组合底图可以自行渲染底图例如用其他瓦片库、离线数据或 GeoJSON 绘制的世界地图或干脆不要底图作为学习起点Deck类一次调用即可创建画布、管理视图状态并处理事件是理解 deck.gl 渲染管线GPU 渲染、数据管理、交互的最短路径。examples/get-started/pure-js/basic就是这样的最小化起点它用GeoJsonLayer把世界行政边界Natural Earth 数据当作底图渲染再叠加机场点与航线弧线全程零 React、零地图 Token。项目结构与依赖清单该示例目录下只有 4 个文件文件作用examples/get-started/pure-js/basic/package.json声明依赖与 npm 脚本examples/get-started/pure-js/basic/index.html页面入口加载 ES Module 脚本examples/get-started/pure-js/basic/app.js应用逻辑创建 Deck、定义图层examples/get-started/pure-js/basic/README.md使用说明查看 package.json 可以看到其依赖非常精简{ name: deckgl-example-pure-js-basic, version: 0.0.0, private: true, license: MIT, scripts: { start: vite --open, start-local: vite --config ../../../vite.config.local.mjs, build: vite build }, dependencies: { deck.gl/core: ^9.0.0, deck.gl/layers: ^9.0.0 }, devDependencies: { vite: ^7.3.3 } }关键点deck.gl/core核心模块负责 GPU 渲染管线、数据管理与用户交互导出Deck类其文档见 docs/api-reference/core/deck.mddeck.gl/layers基础图层集合本示例用到其中的GeoJsonLayer与ArcLayervite负责打包与本地开发服务器是零配置背后的支撑。如果项目从零开始也可参照 docs/get-started/getting-started.md 安装全家桶npm install deck.gl --save或按需单独安装子模块本示例即采用后者以获得最小依赖树。注意子模块版本需要手动保持同步才能保证结果一致。安装与运行三条命令快速跑起来1. 安装依赖在示例目录下执行npm install # 或 yarn2. 启动开发服务器npm start该命令对应vite --open启动开发服务器并在浏览器中自动打开页面支持热更新HMR改完代码立即生效。3. 构建生产包npm run build该命令对应vite build生成最终 bundle 并写入磁盘默认输出到dist/可直接部署到静态服务器。补充直接基于仓库源码运行如果想用仓库里最新的 deck.gl 源码而非package.json中锁定的已发布版本运行示例可执行npm run start-local该命令会使用仓库根目录下的 vite.config.local.mjs 配置。使用前提是先在 deck.gl 仓库根目录执行过npm install否则本地源码依赖无法解析详见 docs/get-started/getting-started.md 中的说明。该示例不需要 Mapbox Token因为根本不加载任何商业底图服务如果切换到其他使用 mapbox 底图的示例则需要设置MapboxAccessToken环境变量。页面骨架一个全屏画布就够index.html 是整个应用的壳极其简洁!doctype html html langen head meta charsetutf-8 titledeck.gl Example/title style body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;} /style /head body /body script typemodule srcapp.js/script /html三个要点script typemodule以原生 ES Module 方式加载app.js由 Vite 负责后续的依赖解析与打包无需任何框架body 全屏样式margin: 0100vw/100vhoverflow: hidden确保Deck自动创建的 canvas 铺满视口且不出现滚动条无任何 DOM 容器Deck默认会把自动创建的 canvas 挂到document.body对应Deck的parent属性默认值因此body可以是空的。核心逻辑用 Deck 类搭建可视化app.js 是整个示例的灵魂共分三步导入、定义视图状态、创建图层并实例化Deck。1. 导入import {Deck} from deck.gl/core; import {GeoJsonLayer, ArcLayer} from deck.gl/layers;只引入Deck与两个图层类这就是无 React的直接体现——没有 JSX、没有组件生命周期只有类与实例。2. 准备数据与初始视图状态const COUNTRIES https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson; const AIR_PORTS https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson; const INITIAL_VIEW_STATE { latitude: 51.47, longitude: 0.45, zoom: 4, bearing: 0, pitch: 30 };数据源图层data属性直接传入远程 GeoJSON URLdeck.gl 会自动异步加载加载管理是deck.gl/core数据管线的一部分INITIAL_VIEW_STATE初始视角定位在英国上空经度 0.45、纬度 51.47缩放级别 4pitch: 30让视图产生轻微 3D 透视效果bearing为航向角0 表示正北朝上。3. 实例化 Deck 并叠加三个图层new Deck({ initialViewState: INITIAL_VIEW_STATE, controller: true, layers: [ /* 三个图层实例 */ ] });Deck类接收图层实例与视口参数将它们渲染为一个透明覆盖层并处理事件参见 docs/api-reference/core/deck.md。核心配置项配置项作用本示例取值initialViewState初始相机视角经纬度、缩放、俯仰、航向上文对象controller是否启用地图控制器拖拽平移、滚轮缩放、右键旋转等交互truelayers要渲染的图层数组GeoJsonLayer × 2 ArcLayercontroller: true自动接入 MapController用户即可在浏览器里自由漫游整个世界地图无需编写任何事件监听代码。图层详解GeoJsonLayer 与 ArcLayer 的组合实战图层一用 GeoJsonLayer 渲染世界底图new GeoJsonLayer({ id: base-map, data: COUNTRIES, stroked: true, filled: true, lineWidthMinPixels: 2, opacity: 0.4, getLineColor: [60, 60, 60], getFillColor: [200, 200, 200] })这个图层把世界行政边界当底图用stroked: true描边 filled: true填充lineWidthMinPixels: 2保证缩放时边界线至少 2 像素粗避免线过细不可见opacity: 0.4半透明填充让下层内容如有透出getLineColor/getFillColor返回 RGB 颜色数组分别控制边界线与填充色。图层二用 GeoJsonLayer 渲染机场点并支持点击new GeoJsonLayer({ id: airports, data: AIR_PORTS, filled: true, pointRadiusMinPixels: 2, pointRadiusScale: 2000, getPointRadius: f 11 - f.properties.scalerank, getFillColor: [200, 0, 80, 180], pickable: true, autoHighlight: true, onClick: info info.object alert(${info.object.properties.name} (${info.object.properties.abbrev})) })同一个GeoJsonLayer类只要数据是点要素Point/MultiPoint就可以用点相关样式属性渲染点样式pointRadiusScale: 2000与pointRadiusMinPixels: 2组合——半径按经纬度比例缩放但保底 2 像素getPointRadius用访问器函数按机场scalerank规模等级动态计算半径等级越高值越小圆越大交互三件套pickable: true开启拾取、autoHighlight: true鼠标悬停自动高亮该要素、onClick回调读取被点击要素的属性这里是弹出机场名称与缩写——这正是无 React也能获得完整交互体验的证明。图层三用 ArcLayer 绘制航线弧线new ArcLayer({ id: arcs, data: AIR_PORTS, dataTransform: d d.features.filter(f f.properties.scalerank 4), getSourcePosition: f [-0.4531566, 51.4709959], // London getTargetPosition: f f.geometry.coordinates, getSourceColor: [0, 128, 200], getTargetColor: [200, 0, 80], getWidth: 1 })dataTransform在渲染前对原始 GeoJSON 做一次数据变换——只保留scalerank 4的大型机场避免弧线过多、画面过乱。这是 deck.gl 数据管线的实用技巧可在数据进入图层前做过滤/映射/聚合getSourcePosition/getTargetPosition所有弧线起点固定在伦敦坐标终点指向各机场坐标形成以伦敦为中心的辐射航线图颜色渐变getSourceColor起点蓝、getTargetColor终点红ArcLayer 会自动做起点到终点的颜色插值getWidth弧线宽度 1 像素保持整体画面轻盈。三个图层按数组顺序由下至上叠加世界地图 → 机场点 → 航线弧线共同构成一个信息层次清晰的可视化。从源码看设计Deck 与图层的职责边界结合仓库源码结构可以进一步理解这套架构的设计意图Deckdeck.gl/core核心渲染引擎。它负责创建 GPU 设备与画布、管理视图状态与动画循环、处理拾取与事件分发并对图层做 diff 更新。源码位于 modules/core/src其公共 API 文档见 docs/api-reference/core/deck.md其中initialViewState、controller、layers、onClick、pickable等属性都有详细说明GeoJsonLayerdeck.gl/layers复合图层内部按要素几何类型分别委托给ScatterplotLayer点、PathLayer线、SolidPolygonLayer面等基础图层渲染因此一个图层即可统一处理点、线、面混合数据其 API 文档见 docs/api-reference/layers/geojson-layer.mdArcLayerdeck.gl/layers独立基础图层专用于两点间弧线支持颜色渐变与宽度控制文档见 docs/api-reference/layers/arc-layer.md。从代码结构可以推断开发者只需声明图层 声明数据 声明样式渲染细节着色器、缓冲区、属性更新全部由框架接管——这正是 deck.gl 区别于手写 WebGL 的核心价值。测试侧仓库 test/modules 与 test/render 目录提供了对图层渲染结果与交互行为的验证可作为深入阅读的入口。把它改造成自己的应用三步上手换数据把COUNTRIES/AIR_PORTS换成你自己的 GeoJSON URL 或本地数组。deck.gl 的data属性同时接受 URL、数组、Promise与任意可迭代对象调样式按上文表格调整getFillColor、getLineColor、getPointRadius、getWidth等访问器颜色统一使用[r, g, b]或[r, g, b, a]数组加交互给任意图层加上pickable: true、autoHighlight: true与onClick/onHover回调即可实现拾取与事件响应。当项目规模变大、需要更复杂的 UI 时再考虑引入 docs/api-reference/react/deckgl.mdReact 封装或 deck.gl/widgets 组件但在起步阶段纯 JS Deck 是理解 deck.gl 心智模型的最佳路径。常见问题与排查页面空白确认index.html的body样式为全屏100vw/100vh且未设置会遮挡 canvas 的定位元素Deck自动创建的画布 id 默认为deckgl-overlay可通过 CSS 检查其尺寸数据加载失败本示例依赖远程 Natural Earth 数据源若网络受限会导致图层为空可把数据下载到本地后改为本地路径npm run start-local报错先在 deck.gl 仓库根目录执行npm install确保本地模块依赖完整再运行该命令想切换底图本示例用 GeoJSON 自己画底图若需要真实地图服务可参考同目录下的 examples/get-started/pure-js/mapbox、examples/get-started/pure-js/maplibre 等示例这些示例才需要底图服务配置。小结examples/get-started/pure-js/basic以最小代价演示了 deck.gl 的核心能力Deck类一站式完成视图、渲染与交互GeoJsonLayer统一处理点线面数据ArcLayer提供生动的弧线表达Vite 提供开箱即用的开发与构建体验。它既是学习 deck.gl 心智模型的起点也是无需 React、无需地图 Token 的轻量可视化方案的参考模板。掌握这份骨架后无论你是要叠加三维建筑、聚合热力还是海量轨迹都可以在此基础上按需引入 deck.gl/geo-layers、deck.gl/aggregation-layers 等模块继续扩展。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考