目录
(7)配置场景(Configuring the Scene)
(7)配置场景(Configuring the Scene)
下一步是增加更多的设置,以便在正确的位置和时间启动观察器。这涉及到与观察器景(viewer.scene)的交互,其控制观察器中所有的图形元素。
首先,我们可以设置场景,用下面一行使用基于太阳位置的照明。
- // Enable lighting based on sun/moon positions
- 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被设计来确定相机的位置和方位。
以下是一些常用的方法:
- Camera.setView(options):立刻在特定的位置和方位设置相机
- Camera.zoomIn(amount):沿着视图矢量向前移动相机
- Camera.zoomOut(amount):沿着视图矢量向后移动相机
- Camera.flyTo(options):创建摄像机移动,从当前相机位置移动到新的位置
- Camera.lookAt(target,offset):确定相机的方位和位置,以便在给定偏移量下观察目标点
- Camera.move(direction,amount):向任何方向移动相机
- Camera.rotate(axis,angle):围绕任何轴旋转相机
要了解API的功能,请查看以下相机演示:
让我们尝试其中一种方法,将相机移动到New York。使用camera.setView()设置初始视图,使用Cartesian3和HeadingPitchRoll设置位置和方位:
- // Create an initial camera view
- var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
- var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
- var homeCameraView = {
- destination : initialPosition,
- orientation : {
- heading : initialOrientation.heading,
- pitch : initialOrientation.pitch,
- roll : initialOrientation.roll
- }
- };
- // Set the initial view
- viewer.scene.camera.setView(homeCameraView);
相机的位置和方位被设置为俯视曼哈顿,我们的视图参数被保存在一个对象中,可以传递给其它相机方法。
实际中,我们可以使用相同的视图来更新按下home按钮的效果。我们可以重载按钮来带我们到初始的曼哈顿视图,而不是从远处返回到地球默认的视图。可以通过增加更多的选项来调整动画,然后添加一个取消默认飞行的事件监听器,并调用flyTo()到新的home视图。
- // Add some camera flight animation options
- homeCameraView.duration = 2.0;
- homeCameraView.maximumHeight = 2000;
- homeCameraView.pitchAdjustHeight = 2000;
- homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
- // Override the default home button
- viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
- e.cancel = true;
- viewer.scene.camera.flyTo(homeCameraView);
- });
有关更多的相机控制内容,可以查看相机教程(Camera Tutorial)
时钟控制(Clock Control)
接下来,我们可以配置观察器(视图)中的时钟(Clock)和时间轴(Timeline)来控制场景的时间变换。
这里是正在运行的时钟API(the colck API in action)。
在特定时间工作时,Cesium使用JulianDate(儒略日)类型,其存储自1月1日中午以来的天数,-4712(公元前4713年)。为了提高精度,该类将日期的整数部分和秒部分存储在分开的组件中。为了计算安全和表示皮秒,日期总是存储在国际原子时间(International Atomic Time)标准中。
下面是如何设置建立场景时间选项的例子:
- // Set up clock and timeline.
- viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
- viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
- viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
- viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
- viewer.clock.multiplier = 2; // sets a speedup
- viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
- viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
- viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); //
上面设置了场景动画、开始和结束时间比率,并告诉时钟当到达结束时间时返回到开始,也设置了时间轴部件来显示合适的时间范围。使用时钟例子代码(clock example code)实验时钟设置。
这就是我们最初的场景设置!当你运行自己的应用时,可能看到的是下面这样: