经纬志
首页 / Cesium / 使用示例

视角书签

四个预置视角,加上「保存当前视角」按钮随手记下的新视角。 面板顶部实时显示经纬度、视距和俯仰角。

CesiumJS 1.121 · 更新 2026-10-27
源码与运行效果
运行效果

存什么、不存什么

书签里存的是经度、纬度、高度和三个角度,全部是普通数字。 直接存 camera.position(ECEF 坐标)也行,但那个值 与地球半径耦合,换椭球或换场景后不直观,排查问题时也读不出来。

角度存成「度」而不是弧度,是为了让书签能直接放进 JSON、写进数据库、 给人工编辑。恢复时统一走 Cesium.Math.toRadians。

为什么读数要节流

相机每渲染一帧都在变化,如果在 postRender 里直接改 DOM, 一秒会写六十次,既浪费又会让数字闪烁。示例按 200 毫秒节流, 视觉上是连续的,开销降到每秒五次。

可调参数

位置改什么效果
bookmarks 数组增删预置视角面板条目数量与内容
duration: 1.6改成 0瞬间切换,没有过渡动画
Math.round(高度 / 1000)改成保留两位视距读数更精细
书签对象里的 roll改成非零值画面出现倾斜,用于模拟侧飞
节流的 200 毫秒改成 50读数刷新更快,DOM 写入更频繁

刷新后书签丢失。示例把书签保存在内存里,页面刷新就没了。 需要持久化的场景,把 bookmarks 数组 JSON.stringify 后写进 localStorage, 加载时再 JSON.parse 回来即可,不需要额外依赖。

和业务场景的结合

巡检系统里「保存当前视角」通常和工单绑定:用户找到问题点位,存一个视角, 下次点开工单直接回到现场。这时书签除了相机参数,还要记录当时的图层状态、 时间轴位置,恢复时三者一起还原,否则视角对了但画面内容不对。