做三维 GIS 的朋友应该都有过这种经历地图上有一个点或者一串经纬度坐标领导扔过来一句“把这片区域每个格子的地形高度都给我算出来”或者产品经理说“鼠标挪过去就显示当前位置的海拔”。你以为在 Cesium 里调一个 API 就完事等真正落库、理路径、做贴地的时候才发现“Cesium 地形高度获取”这件事牵扯到数据源、坐标系、LOD 精度、异步时序甚至服务端架构。我这段时间刚把一个项目的相关方案完整过了一遍从最简单的鼠标拾取到大批量离线计算都试过踩了不少坑这篇文章把能直接抄的代码和判断逻辑一起整理出来。1. 为什么需要地形高度先看清楚需求和底层机制1.1 地形高度的典型应用场景在我接触过的项目里“获取地形高度”基本落在下面几类需求里虽然最后都叫“拿高度”但技术选型差别很大第一类是模型贴地和实景融合。比如把建筑物、树木、管线模型放到真实地表上不能简单地用经纬度转成笛卡尔坐标就完事因为那个坐标是椭球面上的点和真实地形表面差着几十米甚至几百米。必须拿到该位置的地形高度用Cartesian3.fromDegrees(lon, lat, height)才能把模型“按”到地面上。第二类是飞行和路径规划。无人机巡检、车辆越野轨迹、航线自动巡航都需要根据沿途地形高度去设置离地高度否则飞着飞着就撞山了。这类需求通常是连续点列动辄几百上千个坐标点要求方法必须是批量且异步的。第三类是查询和展示。鼠标在地图上移动时显示当前点的高程或者点击某个点弹出一个高程属性的面板。这类需求频率高、单次数据量小实时性反而是第一位的。第四类是地形分析和数据预处理。比如淹没分析、可视域分析、坡度坡向计算通常需要把大范围的 DEM 高度数据读出来再结合业务算法处理。这种一般不会全部放前端跑而是需要服务端参与。所以别看一个“获取地形高度”好像很基础它背后对应的其实是好几套不同的技术路径。1.2 先分清三个“高度”很多人在这里就乱了我在现场帮别人排查问题时发现大量高度对不上号的问题根源不是代码写错了而是根本没用同一个“高度基准”。Cesium 里有三种容易混淆的高度概念椭球高度相对于 WGS84 参考椭球面的高度。Cesium 里Cartographic.fromCartesian拿到的height以及地形瓦片顶点的高度默认就是这个值。海拔高度相对于平均海平面更准确说是大地水准面的高度。日常业务说的海拔 300 米在 Cesium 里其实是椭球高加上一个大地水准面差距geoid undulation。国内常用的高程基准和 WGS84 椭球之间通常有几十米的系统差。地形表面高度也就是 DEM / 地形瓦片里存的那个高度值。在 Cesium 的地形数据里它通常也是椭球高但如果你用的地形数据源是自己处理的本地高程要确认处理时用的基准。打个比方椭球面像一个数学上光滑的椭圆体大地水准面像一个有起伏的“虚拟海平面”。两者之间的差距在中国大部分区域是 -10 到 40 米之间这个数如果不修正做无人机高度告警时可能直接导致误报。所以先和业务方确认清楚“要的高度是哪种”再动手写方案。1.3 Cesium 地形数据的底层机制TerrainProvider 与 Quantized-MeshCesium 的地形能力依赖TerrainProvider这个抽象接口。不管是最常用的官方在线地形还是自己处理的本地地形瓦片都要实现这个接口。地形数据以瓦片Tile为单位组织每个瓦片内部的网格结构通常是 Quantized-Mesh也就是一种以三角形网格来表达地形的格式。每个地形瓦片里存的是密密麻麻的三角形顶点每个顶点有一个高度值。所以 Cesium 要“查询某个经纬度的高度”本质上是定位到对应瓦片再在这个三角形网格里做插值。vue 层调用的Globe.pick、后面要讲的sampleTerrainMostDetailed底层都是从这个三角形网格里取值。理解这一点对后面排查问题特别有用返回值的高度精度取决于当前加载的地形瓦片的分辨率LOD而不是取决于你要查的经纬度本身。同一个点在加载第 10 级瓦片和第 14 级瓦片时拿到的地形高度可能相差好几米。2. 方案总览与选型拿到需求先别写代码先选路径2.1 六种常见实现路径一览我按照自己项目里的经验把可行的方案整理成一张对照表。你可以先根据自己的数据源、点位数量和实时性要求圈定一个方向。方案核心 API / 渠道实时性高度精度适用场景A. 鼠标屏幕拾取viewer.scene.globe.pick极快依赖当前可视 LOD点击/鼠标移动显示高程、贴地交互B. 地形批量采样Cesium.sampleTerrainMostDetailed异步最高可用 LOD路径规划、批量点位查询、飞行剖面C. 深度缓冲拾取viewer.scene.pickPosition极快场景中可见表面倾斜摄影模型表面高度、模型贴地D. 服务端高程接口HTTP 接口查询网络延时可控海量点位、离线数据、GIS 分析E. 本地地形瓦片解析直接解析 Quantized-Mesh离线与数据一致服务端离线批量计算、内网部署F. 原始 DEM 采样GDAL / 高程文件读取离线最高数据预处理、批量地形分析2.2 选型判断标准一个很实用的判断顺序是这样的先看数据源。如果用的是 Cesium 官方在线地形那么 A、B、C 三个方案都可以用因为它们默认都吃同一个 terrainProvider。如果项目是内网环境必须用本地地形瓦片那么 B 方案很可能直接不可用因为sampleTerrainMostDetailed要求地形 provider 带有 availability 信息本地瓦片没有的话要么自己生成 availability要么就绕道 E 或 D。再看点位数量。一两个点用 A 或 C 最舒服几百个点的连续轨迹用 B 更合适几万个格网点就别硬塞给前端了D 才是正路。最后看是否需要模型表面高度。如果业务关心的是倾斜摄影楼顶、地表平台这类“非地形”的高度A 和 B 都拿不到只能走 C或者直接把加载 3D Tiles 时的属性字段拿出来。3. 方案一场景射线与地形求交Globe.pick 实战3.1 原理与最小实现viewer.scene.globe.pick(ray, scene)做的事情非常朴素从相机位置沿着屏幕点击位置射出一条射线和当前 globe 的地形表面做求交返回第一个交点的笛卡尔坐标。因为地形表面是一个带有高度的网格所以交点的 Z 值自然就是地形高度。直接给一个能跑的最小实现const handler new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction(function (movement) { const ray viewer.camera.getPickRay(movement.position); if (!ray) { return; } const cartesian viewer.scene.globe.pick(ray, viewer.scene); if (!cartesian) { console.log(没有拾取到地形可能点在海面之外); return; } const carto Cesium.Cartographic.fromCartesian(cartesian); const lon Cesium.Math.toDegrees(carto.longitude); const lat Cesium.Math.toDegrees(carto.latitude); const height carto.height; console.log(经度: ${lon.toFixed(6)}, 纬度: ${lat.toFixed(6)}, 地形高度: ${height.toFixed(2)} 米); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);注意一个细节getPickRay返回的是一个射线对象不是屏幕坐标本身。如果相机朝向地平线方向射线可能完全碰不到地形globe.pick就会返回undefined。所以在生产代码里一定要判空。3.2 从屏幕拾取到经纬度转换上面代码里Cartographic.fromCartesian这一步很多人会漏掉。globe.pick返回的直接是Cartesian3世界坐标你没办法直接读出一个人类能看的“经纬度和高度”。要先转成Cartographic再转经纬度。如果反过来你手头有一个经纬度坐标想获取这个位置的地形高度不用非要模拟屏幕点击。可以自己构造一条从该点正上方垂直到地心的射线再调用globe.pick。有一个更简单的办法先把经纬度转成一个椭球面上的Cartesian3再从高空中垂直看向这个点function getHeightByLonLat(viewer, lon, lat) { const position Cesium.Cartesian3.fromDegrees(lon, lat, 100000); const ray new Cesium.Ray(position, Cesium.Cartesian3.negate(position, new Cesium.Cartesian3())); // 射线方向指向地心方向但更推荐直接用 globe.pick 配合 camera 方向 }其实日常批量场景不建议这么干因为每次都要构造射线和求交效率不高。单点临时调试可以用正式需求请优先看方案二。3.3 鼠标移动实时显示地形高度交互类需求最常见的形态是“鼠标在地图上移动状态栏显示当前高度”。实现起来也很简单把事件类型换成MOUSE_MOVE就行。但有个性能细节值得注意如果每次mousemove都立刻做globe.pick并操作 DOM在高分屏上很可能会出现卡顿感。我习惯加一个requestAnimationFrame节流保证一帧最多处理一次拾取逻辑let pendingPick false; handler.setInputAction(function (movement) { if (pendingPick) { return; } pendingPick true; requestAnimationFrame(() { const ray viewer.camera.getPickRay(movement.position); const cartesian viewer.scene.globe.pick(ray, viewer.scene); if (cartesian) { const carto Cesium.Cartographic.fromCartesian(cartesian); updateHeightLabel(carto.height); } pendingPick false; }); }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);3.4 为什么有时候拾不到或者高度不对这个方案最典型的坑有两个。第一个是地形还没加载完。刚开始初始化 Cesium 时地形瓦片是边加载边渲染的。如果用户立刻点击一片还没有加载出高细节瓦片的区域globe.pick拿到的可能是粗分辨率地形高度甚至可能直接因为该区域还没有可用的地形数据而返回undefined。处理办法是根据业务需要监听地形加载事件比如scene.globe.tileLoadProgressEvent等加载完成后再允许拾取或者至少给用户一个“地形加载中”的提示。第二个是“模型覆盖地形”的场景。如果场景里加载了倾斜摄影模型或 3D Tiles 建筑鼠标点击时射线先碰到的是模型表面但globe.pick并不会管你点没点中模型它只会一厢情愿地去找地形表面的交点。这会导致你辛辛苦苦做了一个“点击建筑看高度”的功能拿到的却是建筑脚下地形的高度而不是建筑顶部的高度。这种场景需要的是方案三里的pickPosition而不是globe.pick。4. 方案二sampleTerrainMostDetailed 批量采样地形高度4.1 为什么这才算“正经”的批量方案如果你要用 Cesium 做航线设计或者把一段轨迹上每 50 米取一个采样点你会发现globe.pick根本没法用它只能基于当前可视的画面拾取而且每个点都要从相机位置构造射线逻辑上就很别扭。真正解决“给一组经纬度返回一组地形高度”问题的是Cesium.sampleTerrainMostDetailed。这个 API 做的事情是对于一个Cartographic[]数组逐个点找到对应区域最精细的地形瓦片从瓦片网格插值出高度然后把高度值回填到每个Cartographic对象的height属性上。它天然是异步的返回一个PromiseCartographic[]。4.2 完整代码示例async function queryHeights(viewer, lonLatList) { const terrainProvider viewer.terrainProvider; if (!terrainProvider || !terrainProvider.availability) { throw new Error(当前地形数据源不支持 sampleTerrainMostDetailed); } const positions lonLatList.map(([lon, lat]) Cesium.Cartographic.fromDegrees(lon, lat) ); await Cesium.sampleTerrainMostDetailed(terrainProvider, positions); return positions.map((carto) ({ lon: Cesium.Math.toDegrees(carto.longitude), lat: Cesium.Math.toDegrees(carto.latitude), height: carto.height, })); }从代码里可以看到我没有用Cesium.Cartesian3.fromDegrees而是用了Cesium.Cartographic.fromDegrees。这也是一个容易错的点sampleTerrainMostDetailed接收的是Cartographic不是Cartesian3。如果你传错了类型运行时会直接报错或者拿不到任何高度。4.3 版本与数据源的限制availability 是一道门槛sampleTerrainMostDetailed并不是对所有地形 provider 都有效。它要求传入的terrainProvider必须带availability这个属性用来判断哪些区域在哪些层级有可用的地形瓦片。官方在线地形服务默认支持自己用工具生成的 Cesium 地形瓦片如果生成时没有产出 availability.json那么调用sampleTerrainMostDetailed时会直接提示 provider 不支持。还有一个常见的版本问题新版本 Cesium 推出了createWorldTerrainAsync异步创建官方地形而老版本常用的是同步创建的createWorldTerrain。如果你在初始化时用错了版本可能导致 terrainProvider 还没就绪就开始采样拿到的高度全是 0。我现在的建议是统一用异步写法viewer.terrainProvider await Cesium.createWorldTerrainAsync();如果你的项目需要在没有官方地形服务的环境运行可以考虑把地形瓦片提前本地化然后生成带 availability 的 terrain tiles或者干脆用后面的服务端方案不要死磕这个 API。4.4 大批量点位的高效采样策略sampleTerrainMostDetailed虽然好用但有个肉眼可见的问题它会把每个采样点都去请求最精细的瓦片数据。如果你一次性传 500 个点浏览器会瞬间发起大量瓦片请求轻则卡顿重则超出浏览器并发限制。我在项目里的做法是“分批 缓存 降级”三件事一起做。分批是指每批最多 100 个点一批准许全部返回后再发下一批async function queryHeightsInBatch(viewer, lonLatList, batchSize 100) { const results []; for (let i 0; i lonLatList.length; i batchSize) { const batch lonLatList.slice(i, i batchSize); const batchResult await queryHeights(viewer, batch); results.push(...batchResult); } return results; }缓存更简单用Map把已经查过的经纬度记下来下次再问直接取const heightCache new Map(); function cacheKey(lon, lat) { return ${lon.toFixed(6)},${lat.toFixed(6)}; } function getCachedHeight(lon, lat) { return heightCache.get(cacheKey(lon, lat)); } function setCachedHeight(lon, lat, height) { heightCache.set(cacheKey(lon, lat), height); }降级是指在某个点到不了最精细瓦片时sampleTerrainMostDetailed返回的高度可能是NaN。这时候可以退回去用globe.pick拿一个近似值或者干脆标记为“数据缺失”不要让脏数据进入后续的航线计算。5. 方案三模型表面的高度获取pickPosition 深度拾取5.1 模型表面高度与地形高度有什么区别很多做智慧城市、数字孪生的朋友会问“我已经加载了整栋楼的倾斜摄影模型能不能用 terrainProvider 里的高度来表示楼顶的高程”答案是不能。地形高度描述的是裸露地表或者经过地形化处理的地面而倾斜摄影模型自带几何楼顶高度是模型表面某个三角面的高度。举一个实际例子管线监测系统里评估一条高压线塔的高度需要的是“线塔模型顶部”的高程而不是地面高程。这种场景如果还用globe.pick拿到的是塔底的地面高等于默认塔高为 0整个业务逻辑就崩了。5.2 使用 scene.pickPosition 获取场景表面高度Cesium 的Scene.pickPosition可以从当前帧的深度缓冲里还原出屏幕坐标对应的世界坐标。如果你拾取的位置正好落在某个 3D Tiles 模型上拿到的就是模型表面高度如果落在裸露地形上拿到的就是地形高度。它和globe.pick最大的不同就是它关心“你看到了什么”而globe.pick只关心“射线什么时候穿过了地球”。viewer.scene.globe.depthTestAgainstTerrain true; viewer.scene.pickTranslucentDepth true; handler.setInputAction(function (movement) { const pickedPosition viewer.scene.pickPosition(movement.position); if (!Cesium.defined(pickedPosition)) { return; } const carto Cesium.Cartographic.fromCartesian(pickedPosition); console.log(场景表面高度: ${carto.height.toFixed(2)} 米); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);这里有两个开关很容易被忽略depthTestAgainstTerrain会把地形写入深度缓冲这样拾取时才能正确区分模型和地形pickTranslucentDepth则是为了把半透明对象的深度也纳入拾取范围。如果你发现pickPosition拿到的坐标一直在跳动、或者经常返回相机背后的点先检查这两个开关。5.3 什么情况下 pickPosition 会失效pickPosition依赖 WebGL 的深度缓冲读取能力所以有几个硬性限制。第一如果场景没有渲染过比如刚初始化相机就立刻 pick深度缓冲里没有数据拿不到任何结果。解决办法是在viewer.scene.requestRender()触发一帧渲染之后再执行拾取。第二WebGL 1 环境在某些设备上不支持深度纹理扩展pickPosition会直接失效。项目如果需要兼容老设备最好做一层能力检测失败时退到globe.pick并给用户提示“模型表面高度不可用”。第三拾取元素必须是“能被场景拾取的东西”。动态贴图、粒子、线条这类非几何对象即使你在屏幕上看到了pickPosition也很有可能取不到。还有一个经验如果只是想在点击模型后拿到高度其实未必非要走深度拾取。很多模型本身带有属性表比如倾斜摄影里的Height字段用viewer.scene.pick选中模型后直接从pickResult.primitive或pickResult.id的属性里取高度往往比深度拾取更稳定、更精确。深度拾取更适合那些“模型上没有直接存储高度属性”的场景。6. 方案四服务端批量算高绕开前端性能天花板6.1 前端方案的瓶颈在哪里讲完前面三个方案你可能会以为前端已经够用了。可一旦点位规模上来比如要生成 5 公里范围内每 10 米一个网格点的高程矩阵那就是 25 万个点。直接把 25 万个Cartographic丢给sampleTerrainMostDetailed哪怕分批也要烤干浏览器。这个时候需要把“获取地形高度”从 Cesium 的前端移到一个独立的高程服务里。前端只负责把点位发给服务端服务端算好高度后一次性返回。6.2 自建高程查询接口的思路与伪代码服务端方案的核心是准备一份高精度 DEM 数据。常见的格式是 GeoTIFF也就是一个带有地理坐标信息的栅格文件。服务端拿到经纬度坐标后从 GeoTIFF 对应的像素位置上读出高程值。下面是基于 Python GDAL 的伪代码表达核心逻辑生产环境你还要考虑缓存、地理变换边界、瓦片化等from osgeo import gdal, osr dataset gdal.Open(path/to/dem.tif) band dataset.GetRasterBand(1) # 拿到栅格的地理变换参数用它可以算像素位置 transform dataset.GetGeoTransform() inv_transform gdal.InvGeoTransform(transform) def get_elevation(lon, lat): px, py gdal.ApplyGeoTransform(inv_transform, lon, lat) px int(px) py int(py) if px 0 or py 0 or px dataset.RasterXSize or py dataset.RasterYSize: return None value band.ReadAsArray(px, py, 1, 1)[0][0] return float(value) # 对一批点循环调用即可 points [(116.39, 39.90), (116.40, 39.91)] heights [get_elevation(lon, lat) for lon, lat in points]前端的调用就更干净了async function fetchHeightsFromService(lonLatList) { const query lonLatList.map(([lon, lat]) ${lon},${lat}).join(;); const res await Cesium.Resource.fetchJson( /elevation/api?points${encodeURIComponent(query)} ); return res.data; // [{ lon, lat, height }] }这种方案的稳定性远超前端批量采样。毕竟服务端访问本地文件没有网络瓶颈可以做多线程并发、Redis 缓存、结果落库想怎么优化都行。6.3 离线地形瓦片解析把 Quantized-Mesh 的价值榨干如果你的项目已经离线部署了 Cesium 地形瓦片Quantized-Mesh 格式又不想另起一套 GeoTIFF 流程可以考虑让服务端直接解析地形瓦片。原理不复杂每个地形瓦片里面是一个 TIN 三角形网你定位到经纬度对应的瓦片后找到包含这个点的三角形然后对三个顶点的高度做平面插值。具体实现通常借助开源库解析瓦片二进制格式再把瓦片文件路径和经纬度范围做成索引。这个方案相对 GeoTIFF 要绕一些但好处是前端和服务端共用同一份地形数据不会出现两边高度不一致的问题。6.4 混合架构前端快、服务端稳我在一个实际项目里最终采用的是混合架构鼠标移动、单点点击这种高频低量级操作走globe.pick返回飞快。几十到几百个点的航线剖面分析走sampleTerrainMostDetailed加缓存。需要生成网格高程矩阵或入库离线分析的走服务端高程接口一次性拉回结果。这套架构的好处是每种场景都用了最合适的手段而不是把一种方案硬套到所有需求上。特别是服务端高程接口可以说是一劳永逸的兜底手段前端不管遇到什么花式需求都能用一个 HTTP 请求解决。7. 常见问题与排查技巧实录下面这些是实际项目里遇到频率最高的问题我按“现象—原因—解决办法”整理成了速查表方便你定位。问题现象常见原因解决方法sampleTerrainMostDetailed返回 NaN 或者直接报错terrainProvider 没有 availability换用官方在线地形或者自己生成带 availability 的地形瓦片globe.pick返回 undefined地形尚未加载完毕点击了海面之外或相机射线没有碰到地形监听 tileLoadProgressEvent等待地形就绪后再拾取globe.pick和sampleTerrainMostDetailed高度不一致可视 LOD 和最高 LOD 不同插值高度不同明确自己的精度需求批量场景统一用 sampleTerrainMostDetailedpickPosition拿到的是相机背后的点深度测试没开设置depthTestAgainstTerrain truepickPosition偶尔拿不到模型高度透明对象没参与深度拾取设置pickTranslucentDepth true内网环境用不了官方地形服务没有外网权限走本地地形瓦片 自建高程接口海拔和代码里的高度相差几十米椭球高和海拔的基准不同做 geoid 校正或和业务确认好基准一次性传太多点浏览器卡死请求并发量过大每批 100 个加缓存或转服务端计算7.1 sampleTerrain 返回 NaN问题多半出在 availability有一个朋友问过我“我在 Cesium 里加载了自己切的 terrain 瓦片调用 sampleTerrainMostDetailed 后所有 height 都是 NaN什么情况”我一看他用的瓦片是用某开源工具转出来的文件里根本没有 availability 信息。sampleTerrainMostDetailed需要知道“哪个区域有更高精度的瓦片”才能去请求最合适的层级。没有 availability它不知道该往哪个层级采样。解决办法有两个方向一是生成地形瓦片时选择生成 availability二是不用sampleTerrainMostDetailed改用固定层级的Cesium.sampleTerrain(terrainProvider, level, positions)。7.2 两种方案高度不一致是 LOD 而不是 bug你可能遇到过同一个经纬度用鼠标点击globe.pick得到高度 123.4 米调用sampleTerrainMostDetailed得到 128.7 米。这不一定是你代码错了很可能是两层瓦片的网格密度不同导致的插值差异。当前视野下相机加载的是第 10 级地形而sampleTerrainMostDetailed拼命地去请求了第 15 级地形。地形越精细越接近真实地表。所以做批量场景时高度值请全部用sampleTerrainMostDetailed的输出不要每次把globe.pick和sampleTerrainMostDetailed混着用。7.3 地形还没就绪就拾取怎么等它Cesium 地形是分块异步加载的。在初始化后立刻监听鼠标事件点击很可能落在未加载瓦片的区域。让我给一个监听加载完成的写法let tilesLoaded false; viewer.scene.globe.tileLoadProgressEvent.addEventListener((remainingTiles) { if (remainingTiles 0) { tilesLoaded true; console.log(当前视野地形全部加载完成); } });注意这个事件只在当前视野内瓦片加载完时触发。如果后面相机移动到没去过的新区域又会开始加载新的地形瓦片所以不能只判断一次就永相信任。更稳妥的做法是拾取时主动检查viewer.scene.globe.tilesLoaded属性。7.4 大批量调用会卡死浏览器分批不彻底有人以为把 1000 个点分成 100 个一批逐批调用就万事大吉了但每批内部仍然会并行发起大量瓦片请求。如果同时还有多个页面操作照样卡。我的经验是并发数控制在 6 个以内特别是涉及很多不同瓦片区域时。可以自己写一个简单的请求队列一次只处理 6 个点完成后再补充把瞬时负载压下去。更彻底的方案仍然是服务端计算前端不要硬扛。7.5 海拔 vs 椭球高别被几十米的差整懵这个坑我吃过一次亏。某个无人机航线项目业务方给的是海拔高度Cesium 里读出来的是椭球高两者差了约 20 米。一开始没意识到是基准问题都在排查代码是不是写错了后来加了 geoid 校正才恢复正常。Cesium 里没有内置一个通用的“椭球高转海拔”函数因为它需要依赖区域的大地水准面模型。一般做法是引入 EGM2008 网格数据或者直接找当地测绘部门要一个区域的基准差值常数。对于精度要求不高的场景一个固定差值也能解决大部分问题精度要求高的话建议服务端用一个专业工具做转换。8. 工程落地心得一个可复用的混合封装8.1 我最终采用的组合策略按我现在的习惯前端会准备两个函数一个走globe.pick单点实时查询一个走sampleTerrainMostDetailed批量点位查询。再加上服务端接口做终极兜底。函数内部统一走缓存。因为地形数据不会频繁变化同一个经纬度在一段时间内的高度基本是稳定的。缓存命中率如果做到 70% 以上交互流畅度会有质的提升。8.2 一个可直接抄的高度服务封装思路下面这个封装把“单点拾取、批量采样、缓存、服务端降级”打包在一起实际项目里我都是在这个骨架上加业务逻辑class TerrainHeightService { constructor(viewer) { this.viewer viewer; this.cache new Map(); } cacheKey(lon, lat) { return ${lon.toFixed(6)},${lat.toFixed(6)}; } async getHeight(lon, lat) { const key this.cacheKey(lon, lat); if (this.cache.has(key)) { return this.cache.get(key); } // 首选官方地形批量采样适合批量也能处理单点 const provider this.viewer.terrainProvider; if (provider provider.availability) { try { const carto Cesium.Cartographic.fromDegrees(lon, lat); await Cesium.sampleTerrainMostDetailed(provider, [carto]); const height carto.height; this.cache.set(key, height); return height; } catch (e) { // 采样失败后走射线拾取 } } // 降级用射线拾取 const cartesian this.viewer.scene.globe.pick( new Cesium.Ray( Cesium.Cartesian3.fromDegrees(lon, lat, 50000), Cesium.Cartesian3.fromDegrees(lon, lat, 0) ), this.viewer.scene ); if (cartesian) { const height Cesium.Cartographic.fromCartesian(cartesian).height; this.cache.set(key, height); return height; } return null; } clearCache() { this.cache.clear(); } }这个封装的思路很直白先用最可靠的sampleTerrainMostDetailed如果数据源不支持就降级到射线拾取。实际使用中射线降级部分需要根据你的相机视角做调整不能机械地从固定高处往地心打射线否则可能打到地球背面。正式项目里我一般把降级方案换成“请求服务端接口”。8.3 后续还能怎么扩展这套方案做完之后后面衍生需求就都顺手了想做等高线可以基于采样回来的高程矩阵用插值算法生成等值线。想做剖面分析把路径上的连续高程点连起来按距离画断面图。想做模型贴地把每个模型中心点采一次高度再微微下沉避免 z-fighting。我个人在实际操作中的体会是Cesium 本身给的地形高度接口已经很好用但真正拉开项目质量差距的是能不能把“数据基准”“LOD 精度”“服务端能力”这几个点想清楚。遇到地形高度对不上的问题先停下来确认一下你要的到底是椭球高还是海拔你用的地形数据源有没有 availability你当前的 LOD 够不够把这三个问题回答清楚了代码层面往往十分钟就能解决。
