Scene

涉及到与 viewer.scene 进行交互,该类控制了viewer中的所有图形元素。

在初始化视图之前,先学下基本的cesium 类型:

  • Cartesian3:三维笛卡尔直角坐标 – 当用来表示位置的时候,这个坐标指在地固坐标系下,相对地球中心的坐标位置,单位是米。(可以看作,以椭球中心为原点的空间直角坐标系中的一个点的坐标
new Cesium.Cartesian3(x, y, z)

图源:Cesium中的几种坐标和相互转换【转】 - 3D入魔 - 博客园

地固坐标系也称地球坐标系,是固定在地球上与地球一起旋转的坐标系。根据坐标系原点位置的不同,地固坐标系分为地心坐标系(原点与地球质心重合)和参心坐标系(原点与参考椭球中心重合),以地心为原点的地固坐标系也称为地心地固坐标系(ECEF)。无论是参心坐标系还是地心坐标系均可分为空间直角坐标系大地坐标系两种形式。

  • Cartographic:由经度(弧度radian)、纬度(弧度radian)和WGS84椭球面高度确定的位置(单位:米)。
new Cesium.Cartographic(longitude, latitude, height)

  • HeadingPitchRoll:在东北向坐标系中,相对坐标轴的旋转(弧度)。Heading 相对负z轴(垂直向下), Pitch 相对负y轴,Roll 相对正x轴。通过实体与笛卡儿坐标系三个坐标轴的的夹角来确定实体在三维空间中的方向 [ 详情 ]
new Cesium.HeadingPitchRoll(heading, pitch, roll)

  • Quaternion:以4D坐标表示的3D旋转。
new Cesium.Quaternion(x, y, z, w)

Camera

Camera Control

Camera 是 viewer.scene 的一个属性,用来控制当前可见范围。我们可以通过直接设置它的位置和方向来控制相机,或者通过使用Cesium提供的API来控制相机。

一些最常用的方法:

  • Camera.setView(options) : 设置相机位置和朝向。
  • Camera.zoomIn(amount) : 沿着相机方向移动相机。
  • Camera.zoomOut(amount) : 沿着相机方向远离。
  • Camera.flyTo(options) : 创建从一个位置到另一个位置的相机飞行动画。
  • Camera.lookAt(target, offset) : 依据目标偏移来设置相机位置和朝向。
  • Camera.move(direction, amount) : 沿着direction方向移动相机。
  • Camera.rotate(axis, angle) : 绕着任意轴旋转相机。

官方提供的Demo,可以帮助我们更好了解

Cesium Sandcastle

Cesium Sandcastle

把相机位置放置到纽约。分别使用一个 Cartesian3表示位置,一个HeadingPitchRoll表示朝向。

// 创建相机初始位置和朝向
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}
};
// 设置视图
viewer.scene.camera.setView(homeCameraView);

实际上,我们可以使用这个相同的视角来更新按下home按钮的效果。我们不必让它从远处返回地球的默认视角,我们可以重写按钮,使我们看到曼哈顿的初始视角。我们可以通过添加几个选项来调整动画,然后添加一个取消默认航班的事件侦听器,并调用FlyTo()我们的Home视角:

// viewer.scene.camera.setView(homeCameraView);// 增加相机飞行动画参数
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  Mode

在两种相机模式下可以简单的切换:

  • Free Mode(自由模式):默认的相机控制方式
  • Drone Mode(无人机模式):以一个固定距离跟随无人机

自由模式不需要代码,因为它使用默认控件。至于无人机跟随模式,我们可以使用摄像机的内置实体跟踪功能来定位摄像机,并用偏移量定位无人机。这就使得相机即使在移动时也能从指定的实体中得到固定的偏移量。为了跟踪一个实体,我们简单地设置viewer.trackedEntity。要切换到自由相机模式,我们可以将viewer.trackedEntity实体设置为未定义,然后使用camera.flyTo()返回到我们的Home视角。

function setViewMode() {if (droneModeElement.checked) {viewer.trackedEntity = drone;} else {viewer.trackedEntity = undefined;viewer.scene.camera.flyTo(homeCameraView);}
}

Clock Control

Cesium使用 JulianDate 描述某个时刻,这个时间存储了自从公元前4712年1月1日中午的天数。为了提高精度,这个类里分开存储了时刻的日期部分和时刻的秒部分。为了数学运算的安全和闰秒的问题,这个时刻是按照国际原子时标准存储的。

Cesium Sandcastle

一些关于scene中时间的配置选项,设置场景动画的速率、开始和停止时间,并告诉时钟在到达停止时间时循环回到开始。它还将时间线控件设置为适当的时间范围:(运行效果和上图类似,就不贴图了。

// 设置时钟和时间线
viewer.clock.shouldAnimate = true; // 当viewer开启后,启动动画
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; // 设置加速倍率
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER;
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环播放
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // 设置时间的可见范围

参考

Cesium中的几种坐标和相互转换

Cesium坐标转换

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

Ceisum官方教程2 -- 项目实例

系列

Cesium:入门教程(一)之 Hello World

Cesium:入门教程(二)之数据源加载

Cesium:入门教程(三)之视窗配置

Cesium:入门教程(四)之 Entities

Cesium:入门教程(五)之 3D Tiles

Cesium:入门教程(六)之 交互性(Interactivity)

Cesium:入门教程(三)之视窗配置相关推荐

  1. SpringCloud 入门教程(三): 配置自动刷新

    Spring Cloud 入门教程(三): 配置自动刷新 之前讲的配置管理, 只有在应用启动时会读取到GIT的内容, 之后只要应用不重启,GIT中文件的修改,应用无法感知, 即使重启Config Se ...

  2. vue集成cesium入门教程(1)环境搭建、初始化三维地球

    1.概述   这篇内容是<vue集成cesium入门教程>的第一篇,我将记录在vue中集成cesium并实现页面的初始化(显示三维地图页面)等学习内容.效果如下: 2.实现步骤   首先是 ...

  3. qpython3可视图形界面_PySide——Python图形化界面入门教程(三)

    PySide--Python图形化界面入门教程(三) --使用内建新号和槽 --Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...

  4. linux nginx 配置端口访问,Linux入门教程:ubuntu 16.04配置nginx服务器实现一个IP一个端口多个站点,ubuntunginxNginx 使用异步...

    Linux入门教程:ubuntu 16.04配置nginx服务器实现一个IP一个端口多个站点,ubuntunginxNginx 使用异步 特点: Nginx 可以部署在网络上使用 FastCGI,脚本 ...

  5. VAPS XT开发入门教程02:安装配置

    开工第一步是安装软件 windows下 windows下有安装手册,但是此安装手册在安装包里面,只有在安装完成后才能看到.没有安装手册又无法安装. 先准备安装文件和授权证书. License_Tool ...

  6. 【MATLAB Image Processing Toolbox 入门教程三】快速入门之“在多光谱图像中寻找植被”

    [MATLAB Image Processing Toolbox 入门教程三] 本篇摘要 一.从多光谱图像文件导入彩色红外通道 二.构建近红外光谱散射图 三.计算植被系数并显示其定位 四.综合实例部分 ...

  7. python爬虫入门教程(三):淘女郎爬虫 ( 接口解析 | 图片下载 )

    2019/10/28更新 网站已改版,代码已失效(其实早就失效了,但我懒得改...)此博文仅供做思路上的参考 代码使用python2编写,因已失效,就未改写成python3 爬虫入门系列教程: pyt ...

  8. R语言七天入门教程三:学习基本结构

    R语言七天入门教程三:学习基本结构 一.编程的语言的基本结构 1.三种基本结构 绝大多数编程语言,都有三种最基本的程序结构:顺序结构.分支结构.循环结构.这三种结构的流程图如下所示(从左至右依次为:顺 ...

  9. Linux7查看防火墙日志,Linux入门教程:CentOS7防火墙firewalld配置,防火墙日志在哪呢...

    Linux入门教程:CentOS7防火墙firewalld配置,防火墙日志在哪呢 启动: systemctl start firewalld 停止: systemctl stop firewalld ...

  10. 转载:【opencv入门教程之一】:配置

    本系列文章由@浅墨_毛星云 出品,转载请注明出处.   文章链接: http://blog.csdn.net/poem_qianmo/article/details/19809337 作者:毛星云(浅 ...

最新文章

  1. 一天搞定CSS:支持IE的Layout布局--16
  2. robotframework笔记5
  3. 【SPOJ2666】QTree4【链分治】
  4. 洛谷 P1757 通天之分组背包
  5. 目标检测训练trick超级大礼包—不改模型提升精度,值得拥有
  6. python贴吧数据可视化_Python数据可视化
  7. [从零开始学习FPGA编程-8]:快速入门篇 - 总体 - FPGA功能开发详细流程与关键步骤解读
  8. QT版用QLCDnumber显示时间
  9. 蚁群算法(Ant Colony Optimization)
  10. 江苏法院基本解决执行难 设立全国首家环境资源法庭
  11. C语言中的强符号和弱符号
  12. android 西班牙_分析西班牙足球联赛(西甲)
  13. xboxone硬盘坏的表现_希捷新酷鱼硬盘,这次必须要黑你一下了!
  14. centos8调整分辨率
  15. JS 地址截取 省市区 (含自治区,直辖市,县,自治县)
  16. 机器人测钢卷直径_一种基于关节机器人的冷轧钢卷卷芯焊接方法与流程
  17. Python有哪些作用?
  18. 数据挖掘之条件概率和朴素贝叶斯分类器
  19. 计算机科学与技术群头,计算机科学与技术专业课程群建设研究
  20. IHE放射技术框架中的部门业务流程

热门文章

  1. 迟到的总结图文-Hunter司务长
  2. 【重参数化】《Diverse Branch Block: Building a Convolution as an Inception-like Unit》 2021
  3. html和css的基本入门
  4. 闽高校计算机等级考试试题,闽高校计算机等级考试信息技术选择题(含答案)确定书中页码版...
  5. 非常好用的论文写作模板!
  6. 昆明计算机ppt培训机构,师友互助实操培训(昆明)ppt课件.ppt
  7. 如何在2周内交付85%以上需求?阿里工程师这么做
  8. 一步步教你轻松学决策树算法
  9. zabbix4.4.3使用postgresql数据库
  10. 简易单片机人体感应灯光控制器设计