cesium 自定义时间轴 通过改变时间设置光照效果

cesium 自带timeline animation空间有时候满足不了项目的需求,需求要通过自己设置时间来改变光照

this.viewer = new Cesium.Viewer('cesiumContainer', {
  animation: false, //是否显示动画控件
  homeButton: false, //是否显示home键
  geocoder: false, //是否显示地名查找控件
  baseLayerPicker: false, //是否显示图层选择控件
  timeline: false, //是否显示时间线控件
  fullscreenButton: false, //是否全屏显示
  scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
  infoBox: true, //是否显示点击要素之后显示的信息
  sceneModePicker: false, //是否显示投影方式控件  三维/二维
  navigationInstructionsInitiallyVisible: false,
  navigationHelpButton: false, //是否显示帮助信息控件
  selectionIndicator:false,
  // 影像图
  imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
    url: server + ':6080/arcgis/rest/services/dls/CesiumImagery/MapServer'
  }),
  // terrainProvider: Cesium.createWorldTerrain()
  // 地形图
  terrainProvider: new Cesium.CesiumTerrainProvider({
    url: server + ':8080/terrain',
    requestVertexNormals: true // 地形图上添加此属性 效果更好
  })
})
this.viewer._cesiumWidget._creditContainer.style.display = 'none' // 去除版权信息
this.viewer.scene.globe.depthTestAgainstTerrain = true

this.scene = this.viewer.scene
this.camera = this.viewer.camera
this.scene.globe.enableLighting = true

上边是初始化cesium的一些配置属性

重点:关键

1.开始一直想的是通过设置this.viewer.clock.currentTime来改变viewer的时间进而改变光照,但是发现始终设置不成功

原来是因为它只能获取不能设置

2.需要使用clockViewModel,具体为什么,没研究,但是这个是可以设置成功的,参考案例:https://sandcastle.cesium.com/index.html?src=Clock.html

3.具体使用

var utc=Cesium.JulianDate.fromDate(new Date("2019/10/04 09:00:00"));//UTC

this.viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate());//北京时间=UTC+8=GMT+8

这里涉及到一个知识点:julianDate与Date之间的转换关系(参考文档:https://blog.csdn.net/xiaotian602574436/article/details/78293637)

js创建的Date对象是北京时间,但是与JulianDate的日期是不同的,cesium中显示的时间与Date日期的时间是差8个小时。北京时间=JulianDate+8

var date=new Date(“2019/10/04 12:30:00”);//时间为:2019/10/04 12:00:00

var julianTime=Cesium.JulianDate.fromDate(date); //转为JulianDate

//设置时钟的当前日期

this.viewer.clock.currentTime=julianTime.clone();//时钟上显示的时间为:2019/10/04 20:00:00

想让时钟显示 2019/10/04 12:00:00

var utc=Cesium.JulianDate.fromDate(new Date("2019/10/04 12:00:00"));//UTC

this.viewer.clock.currentTime=Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate());//北京时间=UTC+8=GMT+8

你可能感兴趣的:(cesium 自定义时间轴 通过改变时间设置光照效果)