Skip to content

场景

Viewer 类是构建 Cesium 应用程序的入口,我们称其为视图容器,它承载了 Cesium 应用的所有内容。

viewer

从组件的层面来说,Cesium 的组件可以分为两大类,一是 3D 地图渲染组件,二是页面上的控件组件,而 Viewer 类就是用来组合和管理这两大类组件的组件。

参数介绍

Viewer 类可以配置众多参数,下面我们简单看下这些参数所代表的含义:

  • container: DOM 元素或者元素的 ID,即将 Cesium 的内容挂载到那个 DOM 上

  • options: 可选参数

    • animation:是否启用动画部件
    • baseLayerPicker:是否启用图层切换器部件
    • fullscreenButton:是否启用全屏按钮部件
    • vrButton:是否使用 vrButton 部件
    • geocoder:使用启用地址搜索部件
    • homeButton:是否启用 homeButton 部件
    • infoBox:是否启用信息框部件
    • sceneModePicker:是否启用场景模式切换部件
    • selectionIndicator:是否启用选择指示器部件
    • timeline:是否启用时间轴部件
    • navigationHelpButton:是否启用导航帮助部件
    • navigationInstructionsInitiallyVisible:导航帮助部件是否一开始就可见,默认为 true。如果设置为 false,则需要用户手动点击导航 帮助按钮才能查看导航说明。
    • scene3DOnly:以 3D 模式渲染
    • shouldAnimate:是否启用动画
    • clockViewModel:时钟视图模型,用于配置时间轴和动画控制面板
    • selectedImageryProviderViewModel:默认选中的底图提供者视图模型
    • imageryProviderViewModels:底图提供者视图模型数组
    • selectedTerrainProviderViewModel: 默认选中的地形提供者视图模型
    • terrainProviderViewModels:地形提供者视图模型数组
    • baseLayer:指定在场景中使用的初始图层。默认情况下,这个属性设置为 ImageryLayer 集合中的第一项,通常是显示卫星影像的底图。可以 将自己的 ImageryProvider 传递给 baseLayer 属性,从而更改初始图层。此外,如果需要同时显示多个图层,则可以创建一个 ImageryLayerCollection,并将多个图层添加到其中,然后将其中一个图层设置为基础图层。
    • ellipsoid:椭球体
    • terrainProvider:地形服务提供者
    • terrain:地形
    • skyBox:是否启用天空盒
    • skyAtmosphere:大气层
    • fullscreenElement:全屏按钮的容器元素
    • useDefaultRenderLoop:是否使用默认的渲染循环
    • targetFrameRate:目标帧率
    • showRenderLoopErrors:渲染发生错误时是否显示错误信息面板
    • useBrowserRecommendedResolution:是否使用浏览器推荐的分辨率
    • automaticallyTrackDataSourceClocks:是否自动跟踪数据源时钟,当设置为 true 时,数据源始终与场景时钟同步,如果数据源没有时 钟,则不会跟踪。默认为 true
    • contextOptions:WebGL 上下文参数,可以设置 antialias、depth、stencil、alpha、premultipliedAlpha 等属性
    • sceneMode:场景模式
    • mapProjection:地图投影
    • globe:地球
    • orderIndependentTranslucency:是否启用独立透明度排序,默认为 true
    • creditContainer:商标版权部件信息的 HTML 元素,默认为 undefined,表示使用内置元素
    • creditViewport:商标版权部件信息的矩形区域,默认为 undefined,表示使用整个视窗
    • dataSources:数据源集合
    • shadows:是否启用阴影
    • terrainShadows:地形阴影模式
    • mapMode2D:二维地图的模式
    • projectionPicker:是否启用投影选择部件
    • blurActiveElementOnCanvasFocus:控制当用户点击或悬停在 Viewer 的画布上时,是否将焦点从当前 DOM 元素中移出。如果设置为 true,则 会自动将焦点从当前的 DOM 元素中移开,以便 Viewer 可以接收键盘事件和鼠标事件。 这个属性对于在 Web 应用程序中使用 Viewer 时很有用,因为用户可能需要与其他 DOM 元素进行交互,例如输入文本或单击按钮。如果不把焦点从当前 元素移开,用户将不能使用键盘或鼠标来与 Viewer 进行交互。 需要注意的是,默认情况下,此属性被设置为 true,因此当用户点击或悬停在 Viewer 的画布上时,焦点将会自动从当前的 DOM 元素中移开。如果您想 要保留焦点,请将该属性设置为 false。
    • requestRenderMode:请求渲染模式
    • maximumRenderTimeChange:最大帧率限制,表示相邻两帧之间最多允许刷新的时间差(毫秒),如果超过该值则自动降低帧率。默认为 0,表示不限制帧率
    • depthPlaneEllipsoidOffset:可以指定深度测试平面相对于椭球体表面的偏移量。这个属性通常用于解决多个三维模型重叠时出现的 Z-fighting 问题,即两个或多个物体处于同一深度位置,导致图像闪烁或不清晰。 通过将 depthPlaneEllipsoidOffset 设置为一个 Cartesian3 类型的向量,可以将深度测试平面上移或下移一定距离。需要注意的是,改变深度测试 平面的偏移量可能会影响场景中的渲染效果和性能。因此,应该谨慎使用这个属性,并进行必要的测试和优化。 另外,需要注意的是,在 Viewer 对象中设置 depthPlaneEllipsoidOffset 属性并不会影响到所有场景中的实体。如果想要对单独的场景实体进行深 度测试平面的偏移量设置,需要参考 Scene 对象的 depthPlaneEllipsoidOffset 属性。
    • msaaSamples:控制多重采样(Multisample Anti-Aliasing,简称 MSAA)的采样数。MSAA 是一种抗锯齿技术,可以减少物体边缘出现的锯齿 和走样效果,提高渲染图像的质量

当前我们只做了一些简单介绍,我们在后面相关章节遇到时再进行详细的举例说明。

属性

Viewer 类的属性比也比较多,我们可以将其大致分为两种

  • 地图渲染相关的属性

camera:相机

相机是三维场景渲染中非常重要的一个概念,用于控制场景的视角。相机用于代表人的眼睛,即从哪儿看,看向哪儿,哪些对象看得见,那些对象看不见。相机的类型为 Camera ,此类提供了大量的方法和属性用于操作视角,我们在 相机 章节进行详细介绍。

canvas:canvas 元素,Cesium 是基于 WebGL 的,而 WebGL 绘图就是将 canvas 元素当做一个画布。

cesiumWidget:Cesium3D 地图渲染部件,是 Cesium3D 地图渲染的起点,整个场景的渲染循环就是在该类中完成的,下面的场景对象也是在该类中创建的。类型为 CesiumWidget ,是 Cesium 场景渲染的入口,上面的 scene 就是在该类中进行创建的,而上面的相机对象是在场景类中创建的。我们很少直接使用它,因为 Cesium 将它的属性进行了对外暴露,比如我们获取 scene 对象,一般是通过 viewer.scene,但其实也可以通过 viewer.cesiumWidget.scene 获取。

dataSourceDisplay: 用于解析数据源中的实体对象

dataSources:数据源集合,用于管理场景中的数据源

ellipsoid:地球椭球体,我们在 地球 章节中介绍

entities:实体集合,用于管理场景中的实体对象,我们在 实体 章节中介绍

imageryLayers:影像图层集合,用于管理场景中的影像图层,我们在 影像 章节中介绍

postProcessStages:后处理集合,用于管理场中的后处理

resolutionScale:获取或设置渲染分辨率的缩放因子。小于 1.0 的值可以提高功能较弱的设备的性能,而大于 1.0 的值将以更高的分辨率渲染,然后按比例缩小,从而提高视觉保真度。例如,如果小部件的布局大小为 640x480,将此值设置为 0.5 将导致场景以 320x240 渲染,然后按比例放大,而将其设置为 2.0 将导致场景先以 1280x960 渲染,然后再按比例缩小。

scene:场景是 Cesium 程序中一个非常重要的对象,它是所有 3D 图形对象的容器,用于管理所有的 3D 图形对象和状态,上面的相机对象也是在场中对象内创建的,场景对象由 cesiumWidget 部件创建,其类型为 Scene

screenSpaceEventHandler:屏幕空间事件对象,我们在 事件 章节中介绍

selectedEntity:获取当前选中的实体对象

selectedEntityChanged:选中的实体对象发生改变事件

shadowMap:场景的阴影贴图

shadows:是否接收光源产生阴影

targetFrameRate:目标帧率

terrainProvider:地形服务提供者,我们在 地形 章节中介绍

terrainShadows:地形的阴影模式

trackedEntity:追踪实体,设置后相机会锁定该实体对象,直到将其设置为 undefined 或者双击实体对象外

trackedEntityChanged:追踪的实体改变事件

useBrowserRecommendedResolution:是否使用浏览器推荐的分辨率

useDefaultRenderLoop:是否使用默认的渲染循环

  • 部件相关的属性

animation:动画部件

baseLayerPicker:图层选择器部件

bottomContainer:获取底部容器

clock:时钟

clockViewModel:时钟视图模型

container:获取场景容器

creditDisplay:商标版权部件

fullscreenButton:全屏按钮部件

geocoder:地址查询部件

homeButton:hone 按钮部件

infoBox:信息框部件

navigationHelpButton:导航帮助部件

projectionPicker:投影选择部件

sceneModePicker:场景模式部件

selectionIndicator:选择指示部件

timeline:时间轴部件

vrButton:vrButton 部件

方法

flyTo(target, options):使相机飞行到指定的目标位置,并设置相应的动画效果和参数。

该方法内部调用的是相机 Camera 的方法,这里指定飞行目标,在内部通过飞行目标来计算相机定位的相关参数,我们在后面 相机 章节进行详细介绍

zoomTo(target, offset):使相机缩放到指定的目标位置,该方法和 flyTo 类似,只是没有飞行动画的效果。

MGis 地理三维库