惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Vercel News
Vercel News
博客园 - 司徒正美
C
Check Point Blog
G
Google Developers Blog
The GitHub Blog
The GitHub Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
有赞技术团队
有赞技术团队
P
Proofpoint News Feed
IT之家
IT之家
B
Blog
博客园_首页
量子位
MongoDB | Blog
MongoDB | Blog
博客园 - Franky
J
Java Code Geeks
H
Help Net Security
A
About on SuperTechFans
Apple Machine Learning Research
Apple Machine Learning Research
Jina AI
Jina AI
D
DataBreaches.Net
Y
Y Combinator Blog
大猫的无限游戏
大猫的无限游戏
云风的 BLOG
云风的 BLOG
Google DeepMind News
Google DeepMind News

OK Computer

tRPC 配合 Vue 构建端到端类型安全的全栈方案简介 【RPC】如何封装一个远程过程调用 - 实现迷你全栈 rpc 框架 【Cesium】基于 JavaScript 面向对象特性管理 Cesium Primitives 分析 Vue3 Reactivity 的一个重构 PR 前端使用 Web Worker 和 OffscreenCanvas 异步生成图片 【羽毛球】分析巅峰时期的桃田贤斗为什么如此具有统治力 【新年快乐】2024 年末一个人日本跨年之旅游记 【Cesium】实现上下垂直的卷帘分割效果 【单口喜剧】Louis C.K. 《Ridiculous》香港场线下观演小记
【Cesium】在不显示地形的情况下获取地形高度
wumanho · 2026-04-16 · via OK Computer

前言

由于业务需要,要求可以动态对 Cesium 地形进行开启和关闭,同时在获取地形高时,还能获取到实际地形高,用于计算模型(Model Entity)等场景的实际飞行高度。

所以有了这篇博客,记录一下是如何实现的。

动态设置地形

要动态设置地形可以通过修改 viewer 的 terrainProvider 来实现:

1
2
3
4
5
6
7
8
/* 设置地形 */
async function setTerrain(viewer, terrainPath) {
  viewer.terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(terrainPath)
}
/* 清除地形 */
function clearTerrain(viewer){
  viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider()
}

实现思路

由于需求比较奇怪,也不知道有没有什么推荐的最佳实践,就用了一些邪门歪道来实现。

我们在进行地形高查询的时候,一般都是这样获取 provider:

1
2
3
4
// 获取 provider
const terrainProvider = this._viewer.terrainProvider
const graphic = Cesium.Cartographic.fromCartesian(cartesian)
const height = await Cesium.sampleTerrainMostDetailed(terrainProvider, [graphic])

所以只要在初始化时,用一个额外的字段保存 provider,然后在查询的时候,用这个 provider 来查询,就可以了:

1
2
3
4
/* 设置用于查询的地形 */
async function initQueryPrivider(viewer, terrainPath) {
  viewer['terrainProviderForQuery'] = await Cesium.CesiumTerrainProvider.fromUrl(terrainPath)
}

查询的时候:

1
2
3
4
// 获取 provider
const terrainProvider = this._viewer.terrainProviderForQuery
const graphic = Cesium.Cartographic.fromCartesian(cartesian)
const height = await Cesium.sampleTerrainMostDetailed(terrainProvider, [graphic])

(完)