Cesium中文教程-Cesium Workshop(二)

Cesium中文教程 专栏收录该内容
15 篇文章 22 订阅

目录

(7)配置场景(Configuring the Scene) 

相机控制(Camera Control)

时钟控制(Clock Control)


(7)配置场景(Configuring the Scene) 

下一步是增加更多的设置,以便在正确的位置和时间启动观察器。这涉及到与观察器景(viewer.scene)的交互,其控制观察器中所有的图形元素。

首先,我们可以设置场景,用下面一行使用基于太阳位置的照明。

  1. // Enable lighting based on sun/moon positions  
  2. viewer.scene.globe.enableLighting = true

这使得场景的光照随着时间变化而改变。如果缩小的话,可以看到一部分球上是黑暗的,这是因为太阳已经在那个部分落下了。

接下来,在建立初始观察器视图之前,让我们来看看一些基本的Cesium类型:

 

  • Cartesian3:3D笛卡尔坐标-当使用它作为一个位置时,其相对于地球的中心,in meters使用地球固定框架(ECEF);
  • Cartographic(地图的):一个使用经纬度(in radians)和WGS椭球体表面高程定义的位置;
  • HeadingPitchRoll(偏航俯仰滚动):在东-北-上坐标系中,关于局部轴的旋转(以弧度表示),Heading(偏航)围绕负Z轴旋转,Pitch(俯仰)围绕负Y轴旋转,Roll(滚动)围绕正x轴旋转;

  • Quaternion(四元素):四维坐标表示的三维旋转。

这些是在场景中定位和定位Cesium对象所必须的基本类型,并且有许多有用的转换方法,查看每个类型的文档去学习更多内容。

现在把摄像机定位到纽约市,这是我们的数据所在地。

相机控制(Camera Control)

相机Cameraviewer.scene的一种属性,用来控制当前可视内容。我们可以通过设置它的位置和方位来控制相机,或者通过使用Cesium相机API来实现,这些API被设计来确定相机的位置和方位。

以下是一些常用的方法:

  1. Camera.setView(options):立刻在特定的位置和方位设置相机
  2. Camera.zoomIn(amount):沿着视图矢量向前移动相机
  3. Camera.zoomOut(amount):沿着视图矢量向后移动相机
  4. Camera.flyTo(options):创建摄像机移动,从当前相机位置移动到新的位置
  5. Camera.lookAt(target,offset):确定相机的方位和位置,以便在给定偏移量下观察目标点
  6. Camera.move(direction,amount):向任何方向移动相机
  7. Camera.rotate(axis,angle):围绕任何轴旋转相机

要了解API的功能,请查看以下相机演示:

  1. Camera API Demo
  2. CustomCamera Controls Demo

让我们尝试其中一种方法,将相机移动到New York。使用camera.setView()设置初始视图,使用Cartesian3和HeadingPitchRoll设置位置和方位:

  1. // Create an initial camera view  
  2. var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);  
  3. var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);  
  4. var homeCameraView = {  
  5.     destination : initialPosition,  
  6.     orientation : {  
  7.         heading : initialOrientation.heading,  
  8.         pitch : initialOrientation.pitch,  
  9.         roll : initialOrientation.roll  
  10.     }  
  11. };  
  12. // Set the initial view  
  13. viewer.scene.camera.setView(homeCameraView);  

相机的位置和方位被设置为俯视曼哈顿,我们的视图参数被保存在一个对象中,可以传递给其它相机方法。

       实际中,我们可以使用相同的视图来更新按下home按钮的效果。我们可以重载按钮来带我们到初始的曼哈顿视图,而不是从远处返回到地球默认的视图。可以通过增加更多的选项来调整动画,然后添加一个取消默认飞行的事件监听器,并调用flyTo()到新的home视图。

  1. // Add some camera flight animation options  
  2. homeCameraView.duration = 2.0;  
  3. homeCameraView.maximumHeight = 2000;  
  4. homeCameraView.pitchAdjustHeight = 2000;  
  5. homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;  
  6. // Override the default home button  
  7. viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {  
  8.     e.cancel = true;  
  9.     viewer.scene.camera.flyTo(homeCameraView);  
  10. });  

有关更多的相机控制内容,可以查看相机教程Camera Tutorial

时钟控制(Clock Control)

接下来,我们可以配置观察器(视图)中的时钟(Clock)和时间轴(Timeline)来控制场景的时间变换。

这里是正在运行的时钟API(the colck API in action)。

在特定时间工作时,Cesium使用JulianDate(儒略日)类型,其存储自1月1日中午以来的天数,-4712(公元前4713年)。为了提高精度,该类将日期的整数部分和秒部分存储在分开的组件中。为了计算安全和表示皮秒,日期总是存储在国际原子时间(International Atomic Time)标准中。

下面是如何设置建立场景时间选项的例子:

  1. // Set up clock and timeline.  
  2. viewer.clock.shouldAnimate = true// make the animation play when the viewer starts  
  3. viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");  
  4. viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");  
  5. viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");  
  6. viewer.clock.multiplier = 2; // sets a speedup  
  7. viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode  
  8. viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end  
  9. viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); //  

上面设置了场景动画、开始和结束时间比率,并告诉时钟当到达结束时间时返回到开始,也设置了时间轴部件来显示合适的时间范围。使用时钟例子代码(clock example code)实验时钟设置。

这就是我们最初的场景设置!当你运行自己的应用时,可能看到的是下面这样:

 

 

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值