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: 可选对象，包含初始化选项。
选项属性
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
animation | Boolean | true | 是否创建动画小部件。 |
baseLayerPicker | Boolean | true | 是否创建基础图层选择器。 |
fullscreenButton | Boolean | true | 是否创建全屏按钮。 |
vrButton | Boolean | false | 是否创建VR按钮。 |
geocoder | Boolean | true | 是否创建地理编码器小部件。 |
homeButton | Boolean | true | 是否创建主页按钮。 |
infoBox | Boolean | true | 是否创建信息框。 |
sceneModePicker | Boolean | true | 是否创建场景模式选择器。 |
selectionIndicator | Boolean | true | 是否创建选择指示器。 |
timeline | Boolean | true | 是否创建时间轴。 |
navigationHelpButton | Boolean | true | 是否创建导航帮助按钮。 |
scene3DOnly | Boolean | false | 是否仅以3D渲染几何体以节省GPU内存。 |
clockViewModel | ClockViewModel | new ClockViewModel() | 控制当前时间的时钟视图模型。 |
imageryProvider | ImageryProvider | new BingMapsImageryProvider() | 使用的影像提供者。 |
terrainProvider | TerrainProvider | new EllipsoidTerrainProvider() | 使用的地形提供者。 |
skyBox | SkyBox | 用于渲染星空的天空盒。 | |
skyAtmosphere | SkyAtmosphere | 蓝天和地球边缘的光晕效果。 | |
useDefaultRenderLoop | Boolean | true | 是否控制渲染循环。 |
targetFrameRate | Number | 使用默认渲染循环时的目标帧速率。 |
成员属性
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的性能优化技巧主要包括以下几个方面：
- 显式渲染：通过开启
requestRenderMode，可以控制渲染的频率。当模拟时间变化超过设定的时间值时，会请求一个新的帧进行渲染。这个时间值可以通过设置maximumRenderTimeChange进行调整。 - 批量操作优化：在批量添加或修改实体时，可以使用
viewer.entities.suspendEvents ()和viewer.entities.resumeEvents ()方法来暂停和恢复事件处理，从而提高性能。 - 避免响应式数据绑定：在Vue.js 中使用Cesium Viewer时，不要将Cesium的实例变成响应式数据，因为Vue的响应式框架会对所有属性进行监听，这会严重影响性能。
- 调整渲染分辨率：可以通过获取或设置呈现分辨率的比例因子来优化性能。小于1.0的值可以提高功能较弱设备的性能，而大于1.0的值则可以以更高的分辨率呈现，然后按比例缩小。
- 海量数据处理：在加载大量数据时，可以通过生成随机点并进行性能检测来进行优化。例如，利用Turf库生成大量随机点，并进行性能测试和优化。
- 调试工具：使用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世界
