Cesium基础-（Viewer）

1. Viewer 构造参数介绍

Cesium中的Viewer是用于显示和控制3D场景的核心组件。它提供了创建和管理3D地球模型、加载图像覆盖物、设置相机位置和方向以及处理用户输入等功能。Viewer可以看作是一个带有多种功能的可交互的三维数字地球容器，是任何Cesium应用程序的基础。

在创建Viewer时，可以通过new Cesium.Viewer()构造函数来初始化，该函数接受一个容器元素（例如HTML中的canvas）和一些可选参数，允许自定义如动画、图层选择器等组件。Viewer还内置了多种小控件，例如查找位置工具（Geocoder）、首页按钮（Home Button）、图层选择器（Base Layer Picker）等，这些控件可以通过传入参数进行控制。

Viewer不仅支持加载各种数据格式，如CZML、GeoJSON等，还可以通过修改viewer.terrainProvider属性来实现地形图层的渐进式加载和渲染。此外，Viewer还支持通过鼠标和键盘进行交互，例如控制相机的移动和旋转。

总之，Viewer作为Cesium中的核心组件，为开发者提供了一个强大的平台来构建复杂的3D地球应用，并且通过灵活的配置和丰富的API支持，能够满足各种不同的开发需求。

构造函数

new Cesium.Viewer(container, options)
  • container: 容纳Viewer组件的HTML元素的DOM对象或ID。
  • options: 可选对象，包含初始化选项。

选项属性

属性名称类型默认值描述
animationBooleantrue是否创建动画小部件。
baseLayerPickerBooleantrue是否创建基础图层选择器。
fullscreenButtonBooleantrue是否创建全屏按钮。
vrButtonBooleanfalse是否创建VR按钮。
geocoderBooleantrue是否创建地理编码器小部件。
homeButtonBooleantrue是否创建主页按钮。
infoBoxBooleantrue是否创建信息框。
sceneModePickerBooleantrue是否创建场景模式选择器。
selectionIndicatorBooleantrue是否创建选择指示器。
timelineBooleantrue是否创建时间轴。
navigationHelpButtonBooleantrue是否创建导航帮助按钮。
scene3DOnlyBooleanfalse是否仅以3D渲染几何体以节省GPU内存。
clockViewModelClockViewModelnew ClockViewModel()控制当前时间的时钟视图模型。
imageryProviderImageryProvidernew BingMapsImageryProvider()使用的影像提供者。
terrainProviderTerrainProvidernew EllipsoidTerrainProvider()使用的地形提供者。
skyBoxSkyBox用于渲染星空的天空盒。
skyAtmosphereSkyAtmosphere蓝天和地球边缘的光晕效果。
useDefaultRenderLoopBooleantrue是否控制渲染循环。
targetFrameRateNumber使用默认渲染循环时的目标帧速率。

成员属性

  • allowDataSourcesToSuspendAnimation: 数据源是否可以暂停动画。
  • animation: 动画小部件。
  • baseLayerPicker: 基础图层选择器。
  • camera: 相机对象。
  • canvas: 画布对象。
  • clock: 时钟对象。
  • container: 父容器。
  • dataSourceDisplay: 数据源显示。
  • dataSources: 要可视化的数据源集合。
  • entities: 实体集合。
  • fullscreenButton: 全屏按钮。
  • geocoder: 地理编码器。
  • homeButton: 主页按钮。
  • imageryLayers: 影像图层集合。
  • infoBox: 信息框。
  • scene: 场景对象。
  • sceneModePicker: 场景模式选择器。
  • selectedEntity: 显示选择指示符的对象实例。
  • selectionIndicator: 选择指示器。
  • shadows: 是否由太阳投射阴影。
  • terrainProvider: 地形提供者。
  • timeline: 时间轴。
  • trackedEntity: 相机当前跟踪的实体。
  • useDefaultRenderLoop: 是否控制渲染循环。
  • vrButton: VR按钮。

方法

  • destroy(): 销毁组件。

  • extend(mixin, options): 使用提供的mixin扩展基础viewer功能。

  • flyTo(target, options): 相机飞向指定的目标。

  • forceResize(): 强制重调组件布局。

  • isDestroyed(): 是否已销毁。

  • render(): 渲染场景。

  • resize(): 调整组件大小。

  • zoomTo(target, offset): 相机缩放以查看指定的目标。

Cesium Viewer的性能优化技巧有哪些？

Cesium Viewer的性能优化技巧主要包括以下几个方面：

  1. 显式渲染：通过开启requestRenderMode，可以控制渲染的频率。当模拟时间变化超过设定的时间值时，会请求一个新的帧进行渲染。这个时间值可以通过设置maximumRenderTimeChange进行调整。
  2. 批量操作优化：在批量添加或修改实体时，可以使用viewer.entities.suspendEvents ()和viewer.entities.resumeEvents ()方法来暂停和恢复事件处理，从而提高性能。
  3. 避免响应式数据绑定：在Vue.js 中使用Cesium Viewer时，不要将Cesium的实例变成响应式数据，因为Vue的响应式框架会对所有属性进行监听，这会严重影响性能。
  4. 调整渲染分辨率：可以通过获取或设置呈现分辨率的比例因子来优化性能。小于1.0的值可以提高功能较弱设备的性能，而大于1.0的值则可以以更高的分辨率呈现，然后按比例缩小。
  5. 海量数据处理：在加载大量数据时，可以通过生成随机点并进行性能检测来进行优化。例如，利用Turf库生成大量随机点，并进行性能测试和优化。
  6. 调试工具：使用Cesium提供的FPS调试工具来监控当前渲染效果，可以通过viewer.scene.debugShowFramesPerSecond = true;来开启FPS显示，从而帮助识别性能瓶颈。

代码：

var viewer = new Cesium.Viewer( 'cesiumContainer', { animation : false,//是否创建动画小器件，左下角仪表
baseLayerPicker : false,//是否显示图层选择器，右上角图层选择按钮fullscreenButton : false,//是否显示全屏按钮，右下角全屏选择按钮
geocoder : false,//是否显示geocoder 小器件，右上角查询按钮
homeButton : false,//是否显示 Home 按钮，右上角 home 按钮sceneModePicker : false,//是否显示 3D/2D 选择器，右上角按钮navigationHelpButton : false,//是否显示右上角的帮助按钮selectionIndicator : false,//是否显示选取指示器组件
timeline : false,//是否显示时间轴infoBox : false,//是否显示信息框
scene3DOnly : true,//如果设置为 true，则所有几何图形以 3D 模式绘制以节约 GPU 资源
clock : new Cesium.Clock(),//用于控制当前时间的时钟对象shouldAnimate: true,	//自动播放动画控件
shadows: true,//是否显示光照投射的阴影terrainShadows:Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影sceneMode:Cesium.SceneMode.SCENE3D,//初始化渲染 3D 场景
selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型，仅 baseLayerPicker 设为true 有意义
imageryProviderViewModels	:	Cesium.createDefaultImageryProviderViewModels(),//	可	供
BaseLayerPicker 选择的图像图层 ProviderViewModel 数组
imageryProvider : new Cesium.UrlTemplateImageryProvider( {
url : 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali/'
} ),//图像图层提供者，仅baseLayerPicker 设为false 有意义selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型，仅 baseLayerPicker 设为
true 有意义
terrainProviderViewModels	:	Cesium.createDefaultTerrainProviderViewModels(),//	可	供
BaseLayerPicker 选择的地形图层 ProviderViewModel 数组terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者，仅 baseLayerPicker 设为
false 有意义
skyBox : new Cesium.SkyBox({ sources : {
positiveX : '/xxxxxx/px.jpg', negativeX : '/xxxxxx/mx.jpg', positiveY : '/xxxxxx/py.jpg', negativeY : '/xxxxxx/my.jpg', positiveZ : '/xxxxxx/pz.jpg', negativeZ : '/xxxxxx/mz.jpg'
}
}),//用于渲染星空的 SkyBox 对象
fullscreenElement : document.body,// 全 屏 时 渲 染 的 HTML 元 素 , shoSources : new Cesium.DataSourceCollection()	//需要进行可视化的数据源的集合
wRenderLoopErrors : false,//如果设为true，将在一个 HTML 面板中显示错误信息
data} );

viewer._cesiumWidget._creditContainer.style.display = "none";	// 去除版权信息

在这里插入图片描述

resolutionScale

resolutionScale 是一个比例因子，用于调整渲染分辨率。通过调整这个值，可以控制Cesium渲染场景时使用的像素数量。这个比例因子对于在不同性能的设备上平衡性能和视觉质量非常有用。

  • 小于1.0：降低渲染分辨率，可以提高在性能较弱的设备上的渲染性能。例如，设置为0.5时，实际渲染的分辨率会减半，然后将渲染结果放大到原始尺寸，这样可以减轻GPU的负担，但可能会牺牲一些图像细节。
  • 大于1.0：提高渲染分辨率，可以增强视觉保真度，特别是在高像素密度的屏幕上。例如，设置为2.0时，Cesium会以高于屏幕实际分辨率的两倍进行渲染，然后再缩小到屏幕尺寸，这样可以提高图像的细节和清晰度，但需要更强大的GPU支持。

useBrowserRecommendedResolution

useBrowserRecommendedResolution 是一个布尔值，用于决定是否使用浏览器推荐的分辨率进行渲染。

  • true：忽略设备的像素比（device pixel ratio），使用1.0的CSS像素比例进行渲染。这通常适用于像素密度较高的设备，比如视网膜屏，可以提高在这些设备上的性能，因为不需要渲染过多的像素。
  • false：使用设备的像素比进行渲染，这样可以利用设备的高像素密度来提高视觉质量，但可能会增加GPU的负担。

ViewportQuad

与视口对齐的四边形。可以作为公司的 logo 进行渲染。

material
视口四边形的表面外观。这可以是多个内置对象之一，也可以是使用 FabricMaterial 编写的自定义材质 。

默认材质为 Material.ColorType.
viewportQuad.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0); viewportQuad.material = Cesium.Material.fromType(Cesium.Material.StripeType);
BoundingRectangle 定义四边形在视口中的位置。
rectangle
viewportQuad.rectangle = new Cesium.BoundingRectangle(0, 0, 80, 40);

确定是否将显示视口四边形图元。默认值：true show

场景视锥，渲染帧率，地形，几何体监控
viewer.extend(Cesium.viewerCesiumInspectorMixin);

viewerCesiumInspectorMixin

性能监控狗

viewer.extend(Cesium.viewerPerformanceWatchdogMixin, {lowFrameRateMessage : 'Why is this going so <em>slowly</em>?'});

Cesium学习关注【GISer世界】

GISer世界
在这里插入图片描述

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

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

相关文章

利用Arcgis进行沟道形态分析

利用Arcgis进行沟道形态分析

在做项目的时候需要学习到水文分析和沟道形态分析的学习&#xff0c;所以自己摸索着做了下面的工作和内容。如有不对请多指正&#xff01;&#xff01; 一、沟道形态分析概述 沟道形态分析是水文分析的一个重要方面&#xff0c;用于研究河流的形态和特征。沟道形态分析可以帮助…
阅读更多...
C# 企业微信机器人推送消息 windows服务应用程序的使用

C# 企业微信机器人推送消息 windows服务应用程序的使用

C# 企业微信机器人推送消息 先添加一个机器人! 然后查看机器人就可以得到一个 webhook 特别特别要注意&#xff1a;一定要保护好机器人的webhook地址&#xff0c;避免泄漏&#xff01; 然后开始写代码 &#xff0c;只需要httpPost 调用一下这个地址就可以发送消息了。 首先我…
阅读更多...
Z-BlogPHP显示错误Undefined array key 0 (set_error_handler)的解决办法

Z-BlogPHP显示错误Undefined array key 0 (set_error_handler)的解决办法

今天打开博客的时候&#xff0c;意外发现页面&#xff0c;打开均显示错误&#xff1a;Undefined array key 0 (set_error_handler)。 博客程序采用的是Z-BlogPHP。百度了一圈没有找到解决办法&#xff0c;在官方论坛里也没找到解决办法。 于是开始自己排查原因。我服务器采用…
阅读更多...
【vue3|第29期】Vue3中的插槽：实现灵活的组件内容分发

【vue3|第29期】Vue3中的插槽：实现灵活的组件内容分发

日期&#xff1a;2024年10月24日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉在这里插入代码片得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不…
阅读更多...
【分立元件】低阻值电阻器的趋势（Face down type）

【分立元件】低阻值电阻器的趋势（Face down type）

低阻值电阻器不仅可正确显示电阻器的阻值，还是小型、大功率产品或散热性优良的产品所必不可少的。 为了应对大功率或提高散热性，一般使用较大贴片尺寸的产品或长边电极型产品。 但是，如果贴片尺寸变大，就需要一定的贴装空间，还会减弱温度循环试验强度。 长边电极型…
阅读更多...
利用Docker搭建一套Mycat2+MySQL8一主一从、读写分离的最简单集群（保姆教程）

利用Docker搭建一套Mycat2+MySQL8一主一从、读写分离的最简单集群（保姆教程）

文章目录 1、Mycat介绍1.1、mycat简介1.2、mycat重要概念1.3、Mycat1.x与Mycat2功能对比1.2、主从复制原理 2、前提准备3、集群规划4、安装和配置mysql主从复制4.1、master节点安装mysql8容器4.2、slave节点安装mysql8容器4.2、配置主从复制4.3、测试主从复制配置 5、安装mycat…
阅读更多...
yolov11的onnx模型C++ 调用

yolov11的onnx模型C++ 调用

yolov11的onnx模型C调用 效果图一、python调用二、onnx模型导出三、python的onnx调用调用检测模型调用分割模型 四、C的onnx模型调用五 、视频流的检测后续 效果图 一、python调用 本文只记录生成的yolov11模型如何调用&#xff0c;其他可参考各种yolov11博客 模型下载&#x…
阅读更多...
万年历制作

万年历制作

#include<stdio.h> int main() { int year0, month0, day0, y0, m0&#xff1b; scanf_s("%d %d", &year,&month); //判断闰年 for(y1900;y<year;y) { if ((y % 4 0 && y % 100 ! 0) || y % 400 0) …
阅读更多...
C语言[求x的y次方]

C语言[求x的y次方]

C语言——求x的y次方 这段 C 代码的目的是从用户输入获取两个整数 x 和 y &#xff0c;然后计算 x 的 y 次幂&#xff08;不过这里有个小错误&#xff0c;实际计算的是 x 的 (y - 1) 次幂&#xff0c;后面会详细说&#xff09;&#xff0c;最后输出结果。 代码如下: #include…
阅读更多...
Apache Paimon Catalog

Apache Paimon Catalog

Paimon Catalog可以持久化元数据&#xff0c;当前支持两种类型的metastore&#xff1a; 文件系统&#xff08;默认&#xff09;&#xff1a;将元数据和表文件存储在文件系统中。hive&#xff1a;在 hive metastore中存储元数据。用户可以直接从 Hive 访问表。 2.2.1 文件系统…
阅读更多...
centeros7 编译ffmpeg

centeros7 编译ffmpeg

使用yum安装的路似乎已经堵住了&#xff0c;请求的镜像全是404或503 1.打开终端并使用yum安装EPEL存储库(Extra Packages for Enterprise Linux)&#xff1a;sudo yum install epel-release2.接下来&#xff0c;使用以下命令来安装FFmpeg&#xff1a;sudo yum install ffmpeg …
阅读更多...
remote: HTTP Basic: Access denied

remote: HTTP Basic: Access denied

解决方法 输入&#xff1a; git config --system --unset credential.helper 再次进行 Git 操作&#xff0c;输入正确的用户名&#xff0c;密码即可。
阅读更多...
static、 静态导入、成员变量的初始化、单例模式、final 常量（Content）、嵌套类、局部类、抽象类、接口、Lambda、方法引用

static、 静态导入、成员变量的初始化、单例模式、final 常量（Content）、嵌套类、局部类、抽象类、接口、Lambda、方法引用

static static 常用来修饰类的成员&#xff1a;成员变量、方法、嵌套类 成员变量 被static修饰&#xff1a;类变量、成员变量、静态字段 在程序中只占用一段固定的内存&#xff08;存储在方法区&#xff09;&#xff0c;所有对象共享可以通过实例、类访问 (一般用类名访问和修…
阅读更多...
OpenHarmony（1）开发环境搭建

OpenHarmony（1）开发环境搭建

一&#xff1a;开源项目 OpenHarmony是由开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目&#xff0c;目标是面向全场景、全连接、全智能时代&#xff0c;基于开源的方式&#xff0c;搭建一个智能终端设备操作系统的框架和平台&#xff0…
阅读更多...
使用SQL在PostGIS中创建各种空间数据

使用SQL在PostGIS中创建各种空间数据

#1024程序员节&#xff5c;征文# 一、目录 1. 概述 2. 几何&#xff08;Geometry&#xff09;类型 创建点 创建线 创建面 3. 地理&#xff08;Geography&#xff09;类型 地理点&#xff08;GEOGRAPHY POINT&#xff09; 地理线串&#xff08;GEOGRAPHY LINESTRING&#xff…
阅读更多...
Redis 单机、主从、哨兵和集群架构详解和搭建

Redis 单机、主从、哨兵和集群架构详解和搭建

目录 前言 单机部署 检查安装 gcc 环境 下载安装 Redis 启动 Redis 关闭 Redis 配置Redis 主从部署 整体架构图 主从复制配置 重启 Redis 验证 主从复制的作⽤ 主从复制缺点 哨兵部署&#xff08;Sentinel&#xff09; 整体架构图 哨兵模式配置 启动哨兵 验证…
阅读更多...
MySQL-32.索引-操作语法

MySQL-32.索引-操作语法

一.语法 二.代码实现 指定某个字段为主键&#xff0c;其实就是建立一个主键索引。而指定某个字段唯一&#xff0c;就是建立一个唯一索引。 -- 索引 -- 创建&#xff1a;为tb_emp表的name字段建立一个索引 create index idx_emp_name on tb_emp(name);-- 查询&#xff1a;查…
阅读更多...
【智能大数据分析 | 实验四】Spark实验：Spark Streaming

【智能大数据分析 | 实验四】Spark实验：Spark Streaming

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘&#xff0c;以提取有价值的信息和洞察。它结合了大数据技术、人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&a…
阅读更多...
基于java的山区环境监督管理系统（源码+定制+开发）环境数据可视化、环境数据监测、 环境保护管理 、污染防治监测系统 大数据分析

基于java的山区环境监督管理系统（源码+定制+开发）环境数据可视化、环境数据监测、 环境保护管理 、污染防治监测系统 大数据分析

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
《Python游戏编程入门》注-第3章3

《Python游戏编程入门》注-第3章3

《Python游戏编程入门》的“3.2.4 Mad Lib”中介绍了一个名为“Mad Lib”游戏的编写方法。 1 游戏玩法 “Mad Lib”游戏由玩家根据提示输入一些信息&#xff0c;例如男人姓名、女人姓名、喜欢的食物以及太空船的名字等。游戏根据玩家输入的信息编写出一个故事&#xff0c;如图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023