Cesium 双球联动实现及踩坑记录

前端

2023-11-18 03:44:56

引言

Cesium作为强大的三维地理信息可视化引擎，在构建三维地理信息系统中广泛应用。本文将基于Cesium实现双球联动功能，并分享其中遇到的坑点，希望能为开发者提供借鉴。

实现思路

双球联动的核心在于实时同步两个球体的变换。我们采用以下思路实现：

创建两个球体，分别添加至场景中。
使用Cesium提供的Viewer中的camera对象，监听camera变化事件。
在camera变化时，根据camera的变换矩阵计算出第二个球体的变换矩阵。
将计算出的变换矩阵应用到第二个球体上，使其跟随第一个球体联动。

SEO关键词

实现步骤

创建两个球体

const viewer = new Cesium.Viewer('cesiumContainer');

const globe1 = viewer.scene.primitives.add(Cesium.Globe.create({
    radius: 1000000
}));

const globe2 = viewer.scene.primitives.add(Cesium.Globe.create({
    radius: 500000
}));

监听camera变化事件

viewer.camera.moveEnd.addEventListener(function (e) {
    // 获取 camera 的变换矩阵
    const cameraTransform = viewer.camera.transform;

    // 根据 camera 的变换矩阵计算第二个球体的变换矩阵
    const globe2Transform = Cesium.Matrix4.clone(cameraTransform);

    // 应用变换矩阵到第二个球体
    globe2.modelMatrix = globe2Transform;
});