地球自转且昼夜分明(cesium官网效果)

参考:

[1] Cesium 实现地球自转效果_cesium 自转_寻水的鱼lj的博客-CSDN博客

[2] Cesium实现地球自转明暗分割,类似官网封面效果_cesium 地球自转-CSDN博客

[3] cesium入门(一)_cesium.matrix4.identity_ygpGoogle的博客-CSDN博客

官网效果:

本人效果:

核心(具体思路见参考):

1. 地球自转设置,见[1]。

        核心:Cesium.Transforms.computeIcrfToFixedMatrix计算矩阵,

                   lookAtTransform锁定相机视角到地固坐标系

                   知识点:Cesium里由两个基本坐标系,惯性坐标系和地固坐标系

2. 影像图层黑白透明度分开设置,见[2]。 

        注意:viewer.clockViewModel.shouldAnimate = true;

                   layer.dayAlpha = 0.0 //白天图层透明值

                   layer.nightAlpha = 1.0 //夜晚图层透明值

坑:

对于新手来说,可能不熟悉lookAtTransform,那么在结束自传效果时可能会出现相机姿态异常的问题,比如鼠标不能控制相机旋转之类的,只需要使用Cesium.Matrix4.IDENTITY初始化lookAtTransform内的矩阵即可。

代码:

本人菜鸡,可能有些乱,this.earth是我的viewer,本来我想传参数的,但是好像传参数之后没有效果,只能直接使用外部的this.earth才能监听到rotateSetting函数,各位谁要是知道问什么,请告诉我。

updateLighting(viewer) {
    viewer.scene.globe.enableLighting = true//必须开启光照效果,
    this.nightlayer = viewer.imageryLayers.addImageryProvider(
            new Cesium.ArcGisMapServerImageryProvider({
       url:"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
     }));
   this.nightlayer.dayAlpha = 0.0 //白天图层透明值
   this.nightlayer.nightAlpha = 1.0 //夜晚图层透明值
   // this.nightlayer.brightness = 3.5 //图层发光亮度

   viewer.scene.globe.enableLighting = true;//打开光照
   viewer.clock.shouldAnimate = true;//时间轴动画
   viewer.clock.multiplier = 1000;//时间轴速度
}
rotateSetting = () => {
        if (!this.earth || this.earth.scene.mode !== Cesium.SceneMode.SCENE3D) {
            return;
        }
        const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(
            this.earth.clock.currentTime
        )
        console.log(icrfToFixed)
        // icrfToFixed 在上面的方法中,若没加载好所需的计算资源会返回undefined,判断下
        if (Cesium.defined(icrfToFixed)) {
            const camera = this.earth.camera;
            const offset = Cesium.Cartesian3.clone(camera.position)
            const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed)
            camera.lookAtTransform(transform, offset)
        }
    }
// 添加事件监听器
addRotateSettingListener() {
   viewer.scene.postUpdate.addEventListener(rotateSetting);
}
// 移除事件监听器
removeRotateSettingListener(viewer) {
   viewer.scene.postUpdate.removeEventListener(rotateSetting);
   viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
}

调用:

chushihuaEarth(viewer);
addRotateSettingListener();

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值