需要注意的是,由于 cesium 支持多种视图模式,所以我们还需要针对不同的情况分别进行讨论,不能一概而论。
哥伦布视图
对于哥伦布视图,讨论旋转好像没啥意义。
本身就是个 2.5 D 的视图,我很难想象,什么应用场景下,需要用到该视图模拟地球的旋转。
所以,这一块我们就先不考虑了。
2d视图
由于 cesium 的球处于2d模式的时候,也是能够进行旋转缩放操作的。
因此,为了合理性,我们只考虑我们的 2d 视图一直处于类似初始化时候的平铺状态。
由于,cesium 2d 平面状态的时候,做了连续向左向右无限滚动的处理,因此,我们完全是可以采用平移镜头,而模拟地球自转的效果的。
刚好,cesium 的 camera 也提供了 moveLeft、moveRight api, 可以刚好用在这个地方,起到平移镜头的作用。
为了模拟真实的自转,有几点是我们需要考虑的问题。
- 系统时间,每过24小时,我们的地球需要转一圈
- 为了模拟地球真实的转速,当相机高度不同时,相机左移或者右移的幅度也是不一样的
- 只在 2d 模式,且需要转的时候,才提供转动支持
- 为了效果平滑,我们每一帧都需要通过计算得出平移距离,然后根据这个距离来平移相机
基于以上几点考量,第一步,我们需要构建一个每一帧都需要被调用的方法。
我们知道,在 cesium 系统中,我们可以通过 viewer.clock.onTick.addEventListener
的方式添加。
// 每一帧都会调用的方法
const icrf = () => {
};
viewer.clock.onTick.addEventListener(icrf);
接下来,就是填充这个方法内部的逻辑了。
首先我们过滤掉关于一些不执行平移操作的情况:
// 地球自转关键代码
const icrf = () => {
if (viewer.scene.mode !== SceneMode.SCENE2D || !viewer.isRotation) {
return;
}
const { camera, clock, scene } = viewer;
if (!clock.shouldAnimate) return;
};