请选择 进入手机版 | 继续访问电脑版
查看: 5840|回复: 0

Cesium入门教程 8 - Configuring the Scene - 配置视窗

[复制链接]

该用户从未签到

9

主题

9

帖子

129

积分

超级版主

Rank: 8Rank: 8

积分
129
发表于 2019-9-27 11:49:53 | 显示全部楼层 |阅读模式
本帖最后由 论坛超级版主 于 2019-9-27 13:44 编辑

接下来将添加一些更多的正确的时间和空间设置到Viewer中。涉及到与viewer.scene进行交互,该类控制了viewer中的所有图形元素。

  1. 首先,我们配置一下我们的scene,用以下代码激活基于太阳位置的光照:
  1. // Enable lighting based on sun/moon positions
  2. viewer.scene.globe.enableLighting = true;</font>
复制代码
按照以上配置,我们scene(场景)中的光照将会随着每天时间的变化而变化。如果你zoom out,你就会看到一部分数字地球位于黑暗之中,因为模拟真实的地球,太阳只能照射到地球的一部分。

  2. 在我们开始初始化启动view之前,我们先简略的过一下一些基础的Cesium类型:


这些是在场景中定位和定位Cesium objects所必需的基本类型,并且有许多有用的转换方法。请参阅每种类型的文档以了解更多信息。

现在让我们把相机定位在我们数据所在的NYC(纽约)的场景中。

Camera Control

相机是viewer.scene中的属性,用来控制当前可见的域。我们可以通过直接设置它的位置和方向来控制相机,或者通过使用Cesium提供的API来控制相机,它被设计成指定相机的位置和方向随时间的变化。

一些最常用的方法如下:


进一步获得API功能,看看这些相机演示:


让我们尝试一种方法将相机跳转到纽约。使用camera.setView()初始化view,使用Cartesian3HeadingpitchRoll指定相机的位置和方向:

  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);</font>
复制代码

相机现在被定位和定向以俯瞰曼哈顿,并且我们的视图参数被保存在一个对象中,我们可以将其传递给其他相机方法。

实际上,我们可以使用这个相同的视角来更新按下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. });</font>
复制代码

更多关于基本相机控制,请访问我们的Camera Tutorial

Clock Control

接下来,我们配置viewer的ClockTimline来控制scene的时间进度。

这里是clock的相关API

当使用特定时间时,Cesium使用JulandDATE类型,它存储了1月1日中午以来的天数-4712(公元前4713年)。为了提高精度,该类将日期和秒的全部部分存储在单独的组件中。为了计算安全和代表跳跃秒,日期总是存储在国际原子时间标准中。

下面是我们如何设置场景时间选项的例子:
  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); // set visible range
复制代码

这设置场景动画的速率、开始和停止时间,并告诉时钟在到达停止时间时循环回到开始。它还将时间线控件设置为适当的时间范围。看看这个时钟示例代码来测试时钟设置。

这是我们的初始场景配置!现在,当你运行你的应用程序时,你应该看到以下内容:

5b73993cde9af.jpg

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

cesium中国官方网站

网站简介:cesiumChina是国内cesium相关技术开源社区,旨在为国内更多的技术开发人员提供最前沿的技术资讯,为更多的图形工作从业者提供一个学习、交流的技术平台。

联系我们

  • 工作时间:09:00 - 18:00
  • 反馈邮箱:1315785073@qq.com

QQ|Archiver|手机版|小黑屋|cesiumchina ( 陕ICP备14000835号-5 )

快速回复 返回顶部 返回列表