Cesium中文教程－Cesium Workshop（二）

目录

(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)

相机Camera是viewer.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）实验时钟设置。

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