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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/65934.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023/08/13_______JVM(CG)垃圾回收 算法(复制算法,标记清除,标记清除压缩)

JVM GC算法 复制算法 1&#xff0c;每一次GC都会将伊甸&#xff08;Eden&#xff09;活的对象移到幸存区中&#xff1a;一旦Eden区被GC后 就会是空 只要有内容就是from区 谁空谁是to区 内存会从 伊甸->幸存区to->幸存from&#xff08;这个时候to和from交换区域&#xf…

django-基本环境配置

文章目录 django 环境安装1. 安装环境1.1 安装 Python (配置虚拟环境)1.1.1 步骤 1.2 Conda配置环境参考 django 环境安装 1. 安装环境 1.1 安装 Python (配置虚拟环境) 由于国外源速度慢&#xff0c;可以pip添加清华源 pip config set global.index-url https://pypi.tuna.…

Jmeter设置中文的两种方式,建议使用第二种

方案一 进入jmeter图像化界面&#xff0c;选择Options下的Choose Language&#xff0c;再选择Chinese(Simplified)。这个就是选择语言为简体中文&#xff08;缺陷&#xff1a;这个只是在本次使用时为中文&#xff0c;下次打开默认还是英文的&#xff09; 方案二&#xff08;…

uniapp 左右滑动切换页面并切换tab

实现效果如图 要实现底部内部的左右滑动切换带动上方tab栏的切换&#xff0c;并且下方内容要实现纵向滚动 &#xff0c;所以需要swiper&#xff0c;swiper-item,scroll-view组合使用 tab栏部分 <view class"tabs"><view class"tab_item" v-for&…

初步制作做一个AI智能工具网站,持续更新

文章目录 介绍AI对话AI绘画AI音视频AI图片处理AI小工具体验 介绍 网页有五大部分&#xff1a;AI对话、AI绘画、AI音视频、AI 图片处理、AI小工具。 AI对话 AI对话是指人工智能技术在模拟人类对话交流方面的应用。通过使用自然语言处理和机器学习算法&#xff0c;AI对话系统可…

C++ QT(一)

目录 初识QtQt 是什么Qt 能做什么Qt/C与QML 如何选择Qt 版本Windows 下安装QtLinux 下安装Qt安装Qt配置Qt Creator 输入中文配置Ubuntu 中文环境配置中文输入法 Qt Creator 简单使用Qt Creator 界面组成Qt Creator 设置 第一个Qt 程序新建一个项目项目文件介绍项目文件*.pro样式…

基础堆排序(Java 实例代码)

目录 基础堆排序 一、概念及其介绍 二、适用说明 三、过程图示 四、Java 实例代码 src/runoob/heap/Heapify.java 文件代码&#xff1a; 基础堆排序 一、概念及其介绍 堆排序&#xff08;Heapsort&#xff09;是指利用堆这种数据结构所设计的一种排序算法。 堆是一个近…

【linux基础操作】如何一键下载 各个版本的python库文件

把需要下载的库名字&版本号&#xff0c;存在.txt文件中 2. 输入命令执行&#xff0c;下载 pip install -r your_file_name该命令的作用是从指定的文本文件中安装 Python 依赖库。 在这个命令中&#xff0c;-r 参数表示从一个文本文件&#xff08;通常以 .txt 结尾&#xf…

github版面混乱加载不出的解决办法

最近出现打开github 界面加载不成功&#xff0c;网页访问乱码&#xff0c;打开chrome的检查发现 github的github.githubassets.com 拒绝访问&#xff0c; 解法&#xff1a; 1.先打开hosts文件所在的目录C:\Windows\System32\drivers\etc 2.右键点击hosts文件-选择用记事本或者…

【Matplotlib】一文带你掌握Matplotlib绘制各种图形

文章目录 前言一、折线图1 - 单线2 - 多线 二、柱状图&#xff08;条形图&#xff09;1 - 单柱2 - 多柱3 - 堆叠4 - 条形 三、直方图四、箱型图1 - 单个2 - 多个 五、散点图1 - 散点图2 - 气泡图 六、饼图1 - 饼图2 - 甜甜圈 | 空心3 - 甜甜圈 | 实心 七、面积图八、热力图九、…

类加载过程和类加载器

类加载的过程 加载->连接&#xff08;验证->准备->解析&#xff09;->初始化 加载 1.获得二进制字节流&#xff08;可以从本地jar 网络或者动态代理获得&#xff09; 2.转化成方法区中的运行时数据 3.获得类对应的Class对象 加载的过程由类加载器完成&…

CSS练习

CSS练习 工具代码运行结果 工具 HBuilder X 代码 <!DOCTYPE html> <!-- 做一个表格&#xff0c;6行4列实现隔行换色&#xff08;背景色&#xff09;并且第3列文字红色第一个单元格文字大小30px。最后一个单元格文字加粗--> <html><head><meta ch…