cesium学习记录06-视图、场景与相机
一、视图(Viewer)
viewer是cesium的核心类,是一切的开端。通过new Cesium.Viewer(container, options)来创建一个Viewer对象,而通过这个 Viewer对象,可以添加图层、实体、相机控制等,以及设置一些全局属性。在日常Cesium开发中,几乎都是围绕着这个对象展开的。
创建Viewer实例
let viewer = new Cesium.Viewer(container, options);
container:必需,表示视图器容器元素的ID字符串或HTML元素。
options:可选,用于定制Viewer对象。有许多选项可以配置。更多选项请查看
示例代码:
// 实例化地球let viewerOption = {geocoder: false, // 地名查找,默认truehomeButton: false, // 主页按钮,默认truesceneModePicker: false, //二三维切换按钮baseLayerPicker: false, // 地图切换控件(底图以及地形图)是否显示,默认显示truenavigationHelpButton: false, // 问号图标,导航帮助按钮,显示默认的地图控制帮助// animation: false, // 动画控制,默认true .shouldAnimate: true, // 是否显示动画控制,默认true .shadows: true, // 阴影timeline: true, // 时间轴,默认true .CreditsDisplay: false, // 展示数据版权属性fullscreenButton: false, // 全屏按钮,默认显示trueinfoBox: true, // 点击要素之后显示的信息,默认trueselectionIndicator: true, // 选中元素显示,默认truecontextOptions: {webgl: {preserveDrawingBuffer: true //cesium状态下允许canvas转图片convertToImage}}};let viewer = new Cesium.Viewer("cesiumContainer", viewerOption);

主要方法(更多内容请查看):
destroy(): 销毁viewer。
extend(): 扩展viewer。
resize(): 调整viewer的大小。
zoomTo(): 缩放视图以查看给定的对象。
flyTo(): 飞向一个对象。
forceResize(): 强制重新调整viewer的大小。
例如:
viewer.destroy(); //销毁viewer
二、场景 (Scene)
通过Scene对象可以在视图下添加图形(primitive)、添加场景特效(如后处理特效postProcessStage)、添加场景事件或控制视图下的星空skyBox、大气层skyAtmosphere、地球globe、太阳sun和月亮moon。
示例代码:
添加场景特效之雪天效果
viewer.scene.postProcessStages.add(this.snowStage);
/*** 雪天效果*/SnowEffect() {var viewer = this.viewer;let option = {snowSize: 0.01, // 雪花大小,值越大雪花越大 最好不要超过0.01snowSpeed: 60 // 雪花速度,值越大雪花越慢};this.snowStage = new Cesium.PostProcessStage({name: "czm_snow",fragmentShader: this.Snow(),uniforms: {snowSize: () => {return option.snowSize;},snowSpeed: () => {return option.snowSpeed;}}});viewer.scene.postProcessStages.add(this.snowStage);},/*** 雪天效果着色器* @returns {string} 着色器*/Snow() {return "uniform sampler2D colorTexture;\n\varying vec2 v_textureCoordinates;\n\\n\uniform float snowSpeed;\n\uniform float snowSize;\n\float snow(vec2 uv,float scale){\n\float time = czm_frameNumber / snowSpeed;\n\float w=smoothstep(1.,0.,-uv.y*(scale/10.));\n\if(w<.1)return 0.;\n\uv+=time/scale;\n\uv.y+=time*2./scale;\n\uv.x+=sin(uv.y+time*.5)/scale;\n\uv*=scale;\n\vec2 s=floor(uv),f=fract(uv),p;\n\float k=3.,d;\n\p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;\n\d=length(p);\n\k=min(d,k);\n\k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\return k*w;\n\}\n\\n\void main(){\n\vec2 resolution = czm_viewport.zw;\n\vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\vec3 finalColor=vec3(0);\n\float c = 0.0;\n\c+=snow(uv,30.)*.0;\n\c+=snow(uv,20.)*.0;\n\c+=snow(uv,15.)*.0;\n\c+=snow(uv,10.);\n\c+=snow(uv,8.);\n\c+=snow(uv,6.);\n\c+=snow(uv,5.);\n\finalColor=(vec3(c));\n\gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);\n\\n\}\n\";},

三、相机(Camera)
Camera表示观察场景的视角。通过操作摄像机,可以控制视图的位置、方向和角度。
更多请查看
示例代码:
//设置相机位置viewer.camera.setView({// 定义相机的目标位置(笛卡尔坐标)destination: {x: -2349785.4381783823,y: 4596905.031779513,z: 3743318.751622788},// 定义相机的方向和角度orientation: {// 相机的偏转角度(heading表示从正北开始逆时针旋转的角度。其数值是以弧度表示的。一个值为0的heading通常表示正北)// 偏航角(飞机向左飞还是向右飞)heading: 0.1015029573852555,// 相机的上下倾斜角度(一个负的pitch值表示相机是向下倾斜的。)// 俯仰角(飞机向上抬头或是向下低头)pitch: -0.3482370478292893,// 相机围绕其查看方向(或称前进方向)的旋转角度(当roll值为π/2或90°(转换为弧度)时,相机将绕其前进方向旋转90度。这意味着相机的“顶部”现在指向其右侧。)// 翻滚角(飞机沿前进方向轴顺时针翻转为正角度)roll: 0.00005029594533212389}});
Cesium中的orientation属性用于设定各种对象的方向,不仅仅是相机的方向,还包括其他实体如模型的方向。下面以飞机模型为例,当设定飞机模型的orientation,实际上是在定义飞机的朝向和姿态。想象自己在驾驶这架飞机,那么飞机的前进方向和你的视线方向在概念上是相似的,那么你的眼就相当于相机 。
飞机水平飞行:

飞机向左偏:

飞机抬头:

飞机顺时针旋转:

相机操作:
1,飞行(fly): 使相机飞向某个指定的位置。这通常是一个平滑的过渡,不仅仅是简单的位置变换。
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(lon,lat,height),duration: duration //持续时间});
2,缩放(zoom): 使相机向前或向后移动,从而使视野放大或缩小。
// 缩小
viewer.camera.zoomOut(500); // 向后移动500米
// 放大
viewer.camera.zoomIn(500); // 向前移动500米
3,移动(move): 沿着地平面或其他方向移动相机,而不改变它的高度或朝向。
// 向右移动
viewer.camera.moveRight(500); // 地面上向右移动500米
4,视角(look): 改变相机的朝向,但不改变其位置。通常用于围绕某个点旋转。
viewer.camera.look(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(-10)); // 向下看10度
5,平面扭转(twist): 改变相机的roll值,使相机绕其前进方向轴旋转。
viewer.camera.twistRight(Cesium.Math.toRadians(10)); // 顺时针扭转10度
6,3D旋转(rotate): 在三维空间中旋转相机,可以是任意方向的旋转。
viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(10)); // 绕Z轴旋转10度
7,用于将相机视角锁定到目标位置(lookAt): 设置相机的位置和朝向,以使其始终面向某个特定的点或对象。
var targetPosition = Cesium.Cartesian3.fromDegrees(103.851959, 1.290270);
viewer.camera.lookAt(targetPosition, new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_FOUR, 1500.0));
8,将地球或场景缩放到该实体的视图范围内(viewer.zoomTo()): 调整相机的位置和朝向,以最佳地查看某个特定的实体或对象
var entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(103.851959, 1.290270),box: {dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.RED}
});
viewer.zoomTo(entity);
相关文章:
cesium学习记录06-视图、场景与相机
一、视图(Viewer) viewer是cesium的核心类,是一切的开端。通过new Cesium.Viewer(container, options)来创建一个Viewer对象,而通过这个 Viewer对象,可以添加图层、实体、相机控制等,以及设置一些全局属性…...
flutter开发实战-MethodChannel实现flutter与原生Android双向通信
flutter开发实战-MethodChannel实现flutter与原生Android双向通信 最近开发中需要原生Android与flutter实现通信,这里使用的MethodChannel 一、MethodChannel MethodChannel:用于传递方法调用(method invocation)。 通道的客户端和宿主端通过传递给通…...
django使用多个数据库实现
一、说明: 在开发 Django 项目的时候,很多时候都是使用一个数据库,即 settings 中只有 default 数据库,但是有一些项目确实也需要使用多个数据库,这样的项目,在数据库配置和使用的时候,就比较麻…...
Linux常见面试题,应对面试分享
操作系统基础 1.cpu占⽤率太⾼了怎么办? 排查思路是什么,怎么定位这个问题,处理流程 其他程序: 1.通过top命令按照CPU使⽤率排序找出占⽤资源最⾼的进程 2.lsof查看这个进程在使⽤什么⽂件或者有哪些线程 3.询问开发或者⽼⼤,是什么业务在使⽤这个进程…...
mysql索引的数据结构(Innodb)
首选要注意,这里的数据结构是存储在硬盘上的数据结构,不是内存中的数据结构,要重点考虑io次数. 一.不适合的数据结构: 1.Hash:不适合进行范围查询和模糊匹配查询.(有些数据库索引会使用Hash,但是只能精准匹配) 2.红黑树:可以范围查询和模糊匹配,但是和硬盘io次数比较多. 二…...
【MySQL】Java实现JDBC编程
文章目录 1. JDBC2. 添加驱动包3. 编程3.1 创建数据源3.2 与数据库建立连接3.3 构造SQL语句3.4 执行SQL语句3.5 释放资源,关闭连接 1. JDBC 数据库编程必须掌握至少一门编程语言,一种数据库,会导入数据库驱动包。 操作和连接不同数据库都需要…...
纽扣电池寿命和功率增强器
近日,基础半导体器件领域的高产能生产专家Nexperia(安世半导体)宣布推出NBM7100和NBM5100。这两款IC采用了具有突破意义的创新技术,是专为延长不可充电的典型纽扣锂电池寿命而设计的新型电池寿命增强器,相比于同类解决…...
bilibili倍数脚本,油猴脚本
一. 内容简介 bilibili倍数脚本,油猴脚本 二. 软件环境 2.1 Tampermonkey 三.主要流程 3.1 创建javascript脚本 点击添加新脚本 就是在 (function() {use strict;// 在这编写自己的脚本 })();倍数脚本,含解析 // UserScript // name bi…...
8.14 作业
1. .text .globl _start_start:mov r0,#0x9mov r1,#0xfbl loop loop:cmp r0,r1beq stopsubhi r0,r1subls r1,r0mov pc,lr stop:b stop 2.实现1-100的和 .text .globl _start_start:mov r0,#0x1bl loop loop:cmp r0,#0x64bhi stopaddls r1,r0addls r0,#0x1mov pc,lr stop:b sto…...
Debian安装和使用Elasticsearch 8.9
命令行通过 .deb 包安装 Elasticsearch 创建一个新用户 adduser elastic --> rust # 添加sudo权限 # https://phoenixnap.com/kb/how-to-create-sudo-user-on-ubuntu usermod -aG sudo elastic groups elastic下载Elasticsearch v8.9.0 Debian 包 https://www.elastic.co/…...
三 、CTR预估数据准备
三 CTR预估数据准备 3.1 分析并预处理raw_sample数据集 # 从HDFS中加载样本数据信息 df spark.read.csv("hdfs://localhost:9000/datasets/raw_sample.csv", headerTrue) df.show() # 展示数据,默认前20条 df.printSchema()显示结果: ------------…...
netty学习分享 二
操作系统IO模型与实现原理 阻塞IO 模型 应用程序调用一个IO函数,导致应用程序阻塞,等待数据准备好。如果数据没有准备好,一直等待….数据准备好了,从内核拷贝到用户空间,IO函数返回成功指示。 当调用recv()函数时,系…...
聊聊web服务器NGINX
文章目录 聊聊web服务器NGINXNGINX的起源NGINX早期阶段首次发布快速扩展模块化架构逐步增加功能商业收购 NGINX能做什么NGINX的优势NGINX为何能兴起 聊聊web服务器NGINX NGINX的起源 NGINX是一个 HTTP 和反向代理服务器,一个邮件代理服务器,以及一个通…...
【hello C++】特殊类设计
目录 一、设计一个类,不能被拷贝 二、设计一个类,只能在堆上创建对象 三、设计一个类,只能在栈上创建对象 四、请设计一个类,不能被继承 五、请设计一个类,只能创建一个对象(单例模式) C🌷 一、设计一个类&…...
js实现按创建时间戳1609459200000 开始往后开始显示运行时长-demo
运行时长 00日 00时 17分 59秒 代码 function calculateRuntime(timestamp) {const startTime Date.now(); // 获取当前时间戳//const runtimeElement document.getElementById(runtime); // 获取显示运行时长的元素function updateRuntime() {const currentTimestamp Date…...
latex三线表按页面大小填充
latex三线表按页面大小填充 使用Latex表格时会出现下图情况,表格没有填充整个页面,导致不美观。 解决方法: 在\begin{tabular}前加上\resizebox{\linewidth}{!}{ , 在\end{tabular} 后加 ‘}’ 如下:\resizebox{…...
佛祖保佑,永不宕机,永无bug
当我们的程序编译通过,能预防的bug也都预防了,其它的就只能交给天意了。当然请求佛祖的保佑也是必不可少的。 下面是一些常用的保佑图: 佛祖保佑图 ——————————————————————————————————————————…...
redis分布式集群-redis+keepalived+ haproxy
redis分布式集群架构(RedisKeepalivedHaproxy)至少需要3台服务器、6个节点,一台服务器2个节点。 redis分布式集群架构中的每台服务器都使用六个端口来实现多路复用,最终实现主从热备、负载均衡、秒级切换的目标。 redis分布式集…...
快递管理系统springboot 寄件物流仓库java jsp源代码mysql
本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 快递管理系统springboot 系统有1权限:管…...
自学黑客/网络安全(学习路线+教程视频+工具包+经验分享)
一、为什么选择网络安全? 这几年随着我国《国家网络空间安全战略》《网络安全法》《网络安全等级保护2.0》等一系列政策/法规/标准的持续落地,网络安全行业地位、薪资随之水涨船高。 未来3-5年,是安全行业的黄金发展期,提前踏入…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中,合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式:工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...
大数据驱动企业决策智能化的路径与实践
📝个人主页🌹:慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言:数据驱动的企业竞争力重构 在这个瞬息万变的商业时代,“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...
