跳到主要内容

Cesium.js

概览​

Cesium.js 是一个开源的 JavaScript 库，用于在浏览器中创建高性能的 3D 地球、地图和地理空间数据可视化应用。支持 2D、2.5D、3D 形式的地图展示。浏览器必须支持 WebGL

其核心功能包括：

  • 支持全球地形、影像和 3D 模型渲染。
  • 提供多种地理坐标系（如 WGS84）支持。
  • 动态数据可视化（如实时轨迹、点云、矢量数据）。
  • 时间动态场景（支持时间轴控制）。
  • 与 WebGL 结合实现硬件加速渲染。

支持的地理空间数据格式：

  • 矢量数据：GeoJSON、KML、CZML、TopoJSON。
  • 影像数据：WMTS、WMS、TMS、XYZ 瓦片服务。
  • 地形数据：STK 地形、Quantized-Mesh、Google Earth 地形。
  • 3D 模型：glTF/GLB（Cesium 原生支持的 3D 模型格式）。

osgb 转 3dtiles​

参考资料：

https://blog.csdn.net/qq_36377037/article/details/86592258

cmd 进入 e 盘 map 文件夹下，找到 3dtile.exe 所在的文件夹

3dtile.exe -f osgb -i E:\Data\倾斜摄影\hgc -o E:\Data\倾斜摄影\hgc_test

Rust 社区公开的第三方包都集中在 crates.io 网站上面，他们的文档被自动发布到 doc.rs 网站上，Rust 提供了非常方便的包管理器 cargo。为了更快速下载第三方包，我们需要把 crates.io 换国内的镜像源。

设置 rustup 的代理​

使用中科大的镜像源

设置系统环境变量：

RUSTUP_DIST_SERVER: http://mirrors.ustc.edu.cn/rust-static

RUSTUP_UPDATE_ROOT: http://mirrors.ustc.edu.cn/rust-static/rustup

设置依赖源的代理​

在 C:/Users/<用户名>/.cargo目录下新建一个文本文件 config（没有后缀）

使用中科大镜像源，添加内容如下：

[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = 'ustc'
[source.ustc]
registry = "git://mirrors.ustc.edu.cn/crates.io-index"

或者使用阿里云镜像源，添加内容如下：

[source.crates-io]
replace-with = "rustcc"
[source.rustcc]
registry = "https://code.aliyun.com/rustcc/crates.io-index"

下载 rustup-init.exe 自动安装工具并按默认执行​

地址：https://www.rust-lang.org/zh-CN/tools/install

双击 rustup-init.exe 后运行安装包，会先提示安装 visual cpp build tools，选择 yes。

接着开始安装 rust，包含 compiler、rustup 和 cargo。若无特殊需求，选择默认安装，即输入 1 即可

平移、贴地、旋转​

let primitive = viewer.scene.primitives.add(tileset);

const longitude = 116.2392;
const latitude = 39.5847;
const height = -20;
primitive.readyPromise.then(() => {
  let hpr = new Cesium.Matrix3();
  // new Cesium.HeadingPitchRoll(heading, pitch, roll)
  // heading围绕负z轴的旋转。pitch是围绕负y轴的旋转。Roll是围绕正x轴的旋转
  let hprObj = new Cesium.HeadingPitchRoll(Math.PI, Math.PI, Math.PI);

  //  Cesium.Matrix3.fromHeadingPitchRoll （headingPitchRoll，result）
  hpr = Cesium.Matrix3.fromHeadingPitchRoll(hprObj, hpr);

  // 2、平移
  // 2.3储存平移的结果
  let modelMatrix = Cesium.Matrix4.multiplyByTranslation(
    // 2.1从以度为单位的经度和纬度值返回Cartesian3位置
    // 2.2计算4x4变换矩阵
    Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(longitude, latitude, height)),
    new Cesium.Cartesian3(),
    new Cesium.Matrix4()
  );
  // 3、应用旋转
  // Cesium.Matrix4.multiplyByMatrix3 （矩阵，旋转，结果）
  Cesium.Matrix4.multiplyByMatrix3(modelMatrix, hpr, modelMatrix);

  // 赋值
  primitive._root.transform = modelMatrix;
});
viewer.zoomTo(tileset);

加载 3D 模型​

使用Cesium.Model.fromGltf加载 glTF 模型：

const model = Cesium.Model.fromGltf({
  url: 'path/to/model.gltf',
  position: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 0),
  scale: 10.0
});
viewer.entities.add(model);

相机​

使用 viewer.camera 设置相机位置：

viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1000), // 经度、纬度、高度
  orientation: {
    heading: Cesium.Math.toRadians(0), // 朝向
    pitch: Cesium.Math.toRadians(-30), // 俯仰角
    roll: 0
  }
});

点击事件​

通过 ScreenSpaceEventHandler 监听点击事件：

const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(event => {
  const picked = viewer.scene.pick(event.position);
  if (picked && picked.id) {
    console.log('点击的实体：', picked.id);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

轨迹更新​

使用 Cesium.Entity 动态更新位置：

const entity = viewer.entities.add({
  position: new Cesium.CallbackProperty(() => {
    return Cesium.Cartesian3.fromDegrees(currentLon, currentLat);
  }, false),
  point: { pixelSize: 10, color: Cesium.Color.RED }
});

性能优化​

1. 如何优化 Cesium 应用的内存占用？

  • 及时销毁不再使用的实体（viewer.entities.remove(entity)）。
  • 使用 destroy 方法释放资源（如地形、影像图层）。
  • 限制同时加载的 3D Tiles 数量，按需加载数据。
  • 启用 Cesium.Resource 缓存管理。

2. 如何处理大规模 3D Tiles 数据的渲染性能？

  • 使用 3D Tiles 的 LOD（细节层次）机制。
  • 按视锥体裁剪（Frustum Culling）和屏幕空间误差（SSE）优化加载细节。
  • 分块加载（使用 Cesium3DTileset 的 maximumScreenSpaceError 参数）。
  • 结合 Web Worker 进行数据预处理。