Skip to main content

Cesium 地球自转Camera版本

需要注意的是,由于 cesium 支持多种视图模式,所以我们还需要针对不同的情况分别进行讨论,不能一概而论。

哥伦布视图

对于哥伦布视图,讨论旋转好像没啥意义。

本身就是个 2.5 D 的视图,我很难想象,什么应用场景下,需要用到该视图模拟地球的旋转。

所以,这一块我们就先不考虑了。

2d视图

由于 cesium 的球处于2d模式的时候,也是能够进行旋转缩放操作的。

因此,为了合理性,我们只考虑我们的 2d 视图一直处于类似初始化时候的平铺状态。

由于,cesium 2d 平面状态的时候,做了连续向左向右无限滚动的处理,因此,我们完全是可以采用平移镜头,而模拟地球自转的效果的。

刚好,cesium 的 camera 也提供了 moveLeftmoveRight 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;
};

注册VIP

如果已经是VIP,请直接登陆 登陆

发表回复