用 Vue 3 Cesium.js 撸了一个单文件 HTML 的挖填方计算工具支持鼠标绘制多边形、地形采样、体积计算和 3D 可视化完整代码直接贴末尾。开篇做三维 GIS 这几年我发现一个挺有意思的事方量分析这个需求几乎所有做工程方向的团队都会遇到——修路的要知道挖多少填多少做矿山的要算剥离量搞建筑的要做土方平衡。说实话Cesium 官方压根没给现成的轮子。所以只能自己造一个。这事儿其实不复杂。核心链路就四步画多边形 → 采样地形高度 → 积分算体积 → 3D 可视化。但每一步都有坑每一步踩过去才算真的搞懂了。下面我按 Cesium.js 1.140 Vue 3.5 Turf.js 7 这个技术栈把整个工具拆开来讲。核心架构三个库撑起一个工具先看一眼依赖关系。这个工具只靠三个外部库全部从 CDN 加载Cesium.js 负责 3D 地球 地形采样 可视化实体Turf.js 负责空间计算面积、网格、多边形布尔lil-gui 负责右侧那个调参面板Vue 3 做状态管理和生命周期为什么选这几个Cesium 在三维 GIS 领域没对手地形采样 API 是刚需。Turf.js 处理空间运算比手写快得多lil-gui 绑几个数值控制器只需要 5 行代码。Vue 3 的 CDN 引入方式对单文件 HTML 极其友好——createApp({...}).mount(#app)一口气搞定。整个架构一句话Cesium 负责看Turf 负责算Vue 负责管lil-gui 负责调。交互绘制鼠标画多边形那点事交互设计这个工具我最终用了 左键加点 → 右键结束 的模式比双击结束更不容易误触——这事儿是我在好几个项目里被用户投诉之后总结出来的鼠标右键在浏览器里默认弹菜单但 Cesium 的ScreenSpaceEventHandler能拦截倒也省心。来看看ScreenSpaceEventHandler怎么接住三种鼠标动作%%MOUSE_MOVE%%实时预览多边形形状——用CallbackProperty动态重建顶点数组鼠标移动到哪半透明的黄绿色预览就画到哪。这一步如果不用CallbackProperty而是每次都新建 Entity性能会炸。%%LEFT_CLICK%%记录顶点坐标tooltip 跟手显示已添加 N 个点%%RIGHT_CLICK%%结束绘制触发计算管线这里有一个容易被忽略的细节depthTestAgainstTerrain true。如果不开启地形深度检测你画的多边形会被地形遮挡用户根本看不见自己画了啥。这个设置对方量分析是必需的但它会略微增加 GPU 负担所以在不需要地形交互的场景下建议关掉。另外每次startMeasure之前强制clearMeasure清掉上一轮的所有实体和数据。这不是好习惯是必须——留一个旧的CallbackProperty在那里预览会乱套。地形采样最核心也最容易翻车的环节画完多边形后不能直接拿那几个顶点算体积——那叫用 5 个点代表一个足球场。正确做法是在区域内均匀撒点网格每个点采样地形高度逐格积分。// 1. Turf 计算网格this.cellsizeMath.sqrt(this.polygonArea/10000);// 约10000个格constgridturf.pointGrid(bbox,this.cellsize,{units:meters});constptsWithinturf.pointsWithinPolygon(grid,polygon);// 2. Cesium 采样constsamplesawaitCesium.sampleTerrain(this.viewer.terrainProvider,this.terrainLevel,// 地形精度等级默认13cartographics,);关键参数有两个cellsize格子边长按面积/10000 自动算保证网格密度适中。面积越大格子越大避免采样点爆炸terrainLevel传给sampleTerrain的精度等级范围 7-15用 lil-gui 的滑块随时调。精度越高采样越慢我实测 level 13 在江苏 DEM 上是性价比最好的Cesium.sampleTerrain是异步的——它要从terrainProvider读高程瓦片。如果用的是本地地形服务像我这个http://127.0.0.1:8888/3dtiles/jiangsu/dem/延迟可以忽略如果用 Cesium Ion 的全球地形强烈建议加 loading 状态不然用户以为页面卡死了。多说一句%%如果你的地形源挂了sampleTerrain静默返回高度为 0 的数组不会抛错。所以一定要在结果里检查 height 值是否合理别让 0 米高度混进计算。%%体积算法其实就一个网格积分方量计算本身简单到让人怀疑——就是小学几何。把每个格子的高度跟基准面比较height planeHeight→ 挖方土多了要挖掉height planeHeight→ 填方土少了要填上// 格柱体积 高度差 × 格子面积constdiffh-planeHeight;if(hplaneHeight){cutVoldiff*cellsize*cellsize;// 挖方累加}// 填方 基准面以下总体积 - 地形自身体积constplaneBulkpolygonArea*(planeHeight-wallMinHeight);constfillVolplaneBulk-(totalVolume-cutVol);基准面默认取多边形顶点的最低海拔——也就是说第一次画完多边形后基准面自动贴在地形最凹处。然后你可以用面板手动改改了之后applyAdjust()就地重算不重新采样。这里有个我踩过的坑fillVol会出现负数。为什么呢因为planeHeight - wallMinHeight可能是负的你把基准面拖到了墙底之下。所以代码里加了fillVol 0 ? fillVol : 0的保护。一句话总结这个算法把不规则的地形切成 N 个规则的小方柱每个方柱单独算然后加起来。3D 可视化围墙、基准面与实时调参算出来数字不够直观那就在 3D 场景里把结果画出来。我用了三个 Cesium Entity 来表达方量分析结果Wall围墙从wallMinHeight到wallMaxHeight的半透明青色墙体沿多边形边界拉伸。视觉上就像一个从地形里切出来的蛋糕块。outline: true加白边不然透明材质在深色背景上根本看不清。Polygon基准面一个height planeHeight的绿色半透明面浮在围墙内部它就是挖填方的分界线——面以上的土挖掉面以下的坑填上。Label标签画在多边形质心上方显示挖方体积/填方体积/横切面积颜色用GOLD带描边不贴地CLAMP_TO_GROUND在围墙内部会被挡住顶点上还有一圈金色海拔标签——这个细节在调试 DEM 数据的时候巨有用一眼能看出来哪个顶点取到的是异常高度值。参数调整是通过 lil-gui 的三个滑块完成的基准面高、围墙底高、围墙顶高。每次拖滑块点应用调整applyAdjust()会同步更新围墙的minimumHeights/maximumHeights数组并重算体积。%%注意围墙底高不能大于基准面高代码里有自动修正。%%lil-gui让调参从改代码变成拖滑块这部分其实可以展开说说。lil-gui是一个轻量级 UI 面板库它的 API 设计有一个让我特别喜欢的地方// 传一个普通对象和控制属性名自动生成控件letcutDisplay{cutVolume:—};this._ctrlCutVolgui.add(cutDisplay,cutVolume).name(挖方量).disable();// 更新显示只需要改原对象然后调 updateDisplay()this.cutDisplay.cutVolume1.23万立方米;this._ctrlCutVol.updateDisplay();对象是数据源GUI 只是视图层。这种单向数据流让状态管理极其干净——没有面板里的值和 JS 变量里的值不一致的问题。整个面板分了四个功能区测量操作开始绘制、清除、重置视角参数调节基准面、围墙底/顶高、地形精度滑块计算结果挖方量、填方量、横切面积只读图层控制影像开关、透明度每个区都是一个addFolder视觉上清晰分层。lil-gui 默认会折叠所有 folder 再展开第一个——所以测量操作默认可见符合操作流。扯远一句lil-gui 的作者是 georgealways这个库只有 15KB gzipped比 dat.gui 轻一个数量级。如果你还在用 dat.gui真的可以换了。环境搭建与底图环境一个能跑 HTTP 的本地服务器就行。没有 webpack、没有 vite浏览器直接打开 HTML 文件就能跑。前提是有地形数据——我用的是本地 DEM 瓦片服务跑在 8888 端口。如果你没有把initTerrain里的注释打开切到Cesium.createWorldTerrain()但需要 Cesium Ion Token。底图ArcGIS World Imagery 卫星图通过UrlTemplateImageryProvider加载这东西的好处是免费全球覆盖不用 Token。缺点是国内部分地区加载速度一般你可以换成天地图或其他 WMTS 服务。[SEC]完整代码以下是完整的volume_analysis.html可以保存到本地直接打开需替换Cesium.Ion.defaultAccessToken为你自己的 Token文章首发“GIS 开发手记” 原文地址https://mp.weixin.qq.com/s/lHdXVWTexFcwVtcjG93BqA写在最后这个工具从写第一行到能跑通大概花了一个下午但打磨交互细节实时预览、tooltip 跟手、参数面板的组织方式花了两天。说实话Cesium.js 做方量分析的硬核部分不是公式而是三件事一是地形采样 API 的异步时序要处理好二是depthTestAgainstTerrain这类配置开关要知道什么场景用什么值三是可视化实体Wall / Polygon / Label的组合方式要让人一眼看懂数据。如果你也在做类似的东西这个单文件 HTML 可以直接保存到本地改。换自己的地形服务、换底图、加导出 Excel 功能——代码结构很直改起来不费劲。有什么问题或者更好的实现思路欢迎留言聊。我可能说错的地方也有——毕竟这东西迭代了好几版每版都推翻过前面的设计。往期精选3D 城市限高分析Cesium 实战示例Cesium 中北斗网格可视化深度解析 GB/T 39409-2020《北斗网格位置码》Cesium 空间分析坡度分析Cesium 通视分析3D 城市模型上划线看可见区Cesium 3D 热力图从 Canvas 热力到 GPU 顶点着色器Cesium 点聚合海量点地图可视化方案自定义虚线箭头材质把两个内置 Material 焊在一起Cesium 中文字体贴地 / 贴墙 / 动态文字方案网络地图坐标系完全指南WGS84 / GCJ02 / BD09 / CGCS2000 与坐标转换实战