Cesium入门之五：认识Cesium中的Viewer

Viewer是Cesium中用于显示3D场景的组件。它提供了创建和控制3D场景所需的所有基本功能，包括加载3D模型、添加图像覆盖物、设置相机位置和方向、处理用户输入等。

在创建Viewer时，可以指定要使用的HTML元素（例如canvas），该元素将用于呈现3D场景。一旦创建了Viewer对象，就可以通过调用其方法来添加实体、图像覆盖物和其他元素，并对相机进行操作。

构造函数

new Cesium.Viewer(container, options)：是用来创建一个新的 Cesium 视图器（Viewer）实例的构造函数。

它包含两个参数：

• container：必需，表示视图器容器元素的ID字符串或HTML元素。
• options：可选，是一个包含所有初始选项的JavaScript对象，可以控制如何呈现三维场景、哪些数据源可用以及视图控制器的行为等方面。
  下面代码在名为“cesiumContainer”的HTML元素中创建一个新的Cesium Viewer

const viewer = new Cesium.Viewer('cesiumContainer',{ animation:false,//动画小部件 baseLayerPicker:false,//地图图层组件 fullscreenButton:false,//全屏组件 geocoder:false,//地理编码搜索组件 homeButton:false,//首页组件 infoBox:false,//信息框 sceneModePicker:false,//场景模式 selectionIndicator:false,//选取指示器组件 timeline:false,//时间轴 navigationHelpButton:false,//帮助按钮 navigationInstructionsInitiallyVisible:false, })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

成员变量：

• animation: Animation实例，表示动画控制器，可以用于控制动画的播放和暂停。
• baseLayerPicker: BaseLayerPicker实例，用于选择底图图层。
• bottomContainer: HTMLElement实例，表示Viewer中底部的HTML容器元素。
• camera: Camera实例，表示当前的相机，可以通过该实例控制相机的位置、姿态等属性。
• canvas: HTMLCanvasElement实例，表示Viewer中渲染3D场景的Canvas元素。
• cesiumWidget: CesiumWidget实例，Viewer的基础构建块。
• clock: Clock实例，表示时钟，可以用于控制时间相关的可视化效果。
• clockViewModel: ClockViewModel实例，表示时钟视图模型，用于控制时间相关的可视化效果。
• container: HTMLElement实例，表示Viewer的HTML容器元素。
• creditContainer: HTMLElement实例，表示Viewer中版权信息的HTML容器元素。
• dataSourceDisplay: DataSourceDisplay实例，用于显示数据源中的实体。
• entities: EntityCollection实例，用于管理所有的实体对象。
• fullscreenButton: FullscreenButton实例，用于全屏显示Viewer的内容。
• geocoder: Geocoder实例，用于地名搜索和定位。
• homeButton: HomeButton实例，用于将相机位置和姿态重置为默认值。
• imageryLayers: ImageryLayerCollection实例，表示图像图层集合，可以添加或删除不同的图层。
• infoBox: InfoBox实例，用于显示实体的详细信息和属性。
• navigationHelpButton: NavigationHelpButton实例，用于显示Viewer中的导航帮助信息。
• postProcessStages: PostProcessStageCollection实例，表示后处理阶段的集合，可以添加或删除不同的后处理效果。
• projectionPicker: ProjectionPicker实例，用于选择不同的地球投影方式。
• scene: Scene实例，表示三维场景，包含了所有的3D对象和图层以及相机参数等信息。
• screenSpaceEventHandler: ScreenSpaceEventHandler实例，用于处理鼠标和触摸事件。
• selectedEntity: Entity实例，表示当前选中的实体。
• selectionIndicator: SelectionIndicator实例，用于显示当前选中实体的指示器。
• shadowMap: ShadowMap实例，用于生成和渲染阴影图。
• skyBox: SkyBox实例，用于设置天空盒。
• skyBoxEllipsoid: Cartesian3实例，表示天空盒所在的椭球体。
• sun: Sun实例，用于控制太阳的位置和光照效果。
• targetFrameRate: Number类型，表示目标帧率。
• terrainProvider: TerrainProvider实例，表示当前使用的地形提供程序。
• terrainShadows: ShadowMode类型，表示地形产生阴影的模式。
• useDefaultRenderLoop: Boolean类型，表示是否使用默认的渲染循环。
• useBrowserRecommendedResolution: Boolean类型，表示是否使用浏览器推荐的分辨率。

常用方法：

• destroy(): 销毁Viewer实例。
• flyTo(target, options): 使相机飞行到指定的目标位置，并设置相应的动画效果和参数。
• forceResize(): 强制刷新Viewer的大小和位置。
• isDestroyed(): 判断Viewer是否已经销毁。
• render(): Promise: 渲染3D场景并返回Promise对象，用于异步等待渲染结果。
• resize(): undefined: 调整Viewer的大小和位置。
• zoomTo(target, offset): 用于将视图缩放到指定的范围或尺寸的函数,target:定位到的实体、实体集合、数据源等。 offset：偏移量。

Viewer构造函数的初始化选项

• animation: 是否显示动画控制面板，默认为true。当启用时，动画小部件会在场景下方展示当前时间和时间轴，可以通过鼠标交互来改变时间。
• baseLayerPicker: 是否显示底图选择器，默认为true。底图选择器小部件可以让用户在不同的影像图层之间进行选择切换。
• fullscreenButton: 是否显示全屏按钮，默认为true。全屏按钮允许用户将Viewer切换到全屏模式。
• vrButton: 是否显示VR按钮，默认为false。（需要支持WebVR才能生效）。当用户在支持WebVR的设备中使用时，可以启用VR模式以获得更加沉浸式的体验。
• geocoder：控制是否显示地理编码器小部件，默认为true。地理编码器小部件允许用户输入地址或地名来定位场景视角。
• homeButton: 是否显示回到初始位置按钮，默认为true。Home按钮允许用户重置场景视角到初始状态。
• infoBox: 是否显示信息框，默认为true。信息框小部件可以展示实体、位置、高程等详细信息。
• sceneModePicker: 是否显示场景模式选择器，默认为true。场景模式选择器小部件可以让用户在三种场景模式之间进行切换：2D、3D、哥伦布视图。
• selectionIndicator: 是否显示选择指示器，默认为true。选择指示器可用于显示场景中所选对象的轮廓或边框。
• timeline: 是否显示时间轴控制面板，默认为true。时间轴小部件可以让用户拖动时间来改变场景的显示。
• navigationHelpButton: 是否显示导航帮助按钮，默认为true。导航帮助按钮允许用户查看控制场景的快捷键和鼠标操作。
• navigationInstructionsInitiallyVisible: 导航帮助是否一开始就可见，默认为true。如果设置为false，则需要用户手动点击导航帮助按钮才能查看导航说明。
• scene3DOnly: 是否仅允许3D场景模式，默认为false。
• shouldAnimate：是否应该在每一帧之间循环播放场景动画。如果设置为true，则会循环播放动画，否则将保持静态不动。通过设置此属性，可以控制场景动画是否自动播放。
• clockViewModel: 时钟视图模型，用于配置时间轴和动画控制面板。
• selectedImageryProviderViewModel: 默认选中的底图提供者视图模型。
• imageryProviderViewModels: 底图提供者视图模型数组。
• selectedTerrainProviderViewModel: 默认选中的地形提供者视图模型。
• terrainProviderViewModels: 地形提供者视图模型数组。
• imageryProvider: 底图提供者，可以是Cesium.UrlTemplateImageryProvider、Cesium.WebMapTileServiceImageryProvider等类型。
• baseLayer:指定在场景中使用的初始图层。默认情况下，这个属性设置为ImageryLayer集合中的第一项，通常是显示卫星影像的底图。可以将自己的ImageryProvider传递给baseLayer属性，从而更改初始图层。此外，如果需要同时显示多个图层，则可以创建一个ImageryLayerCollection，并将多个图层添加到其中，然后将其中一个图层设置为基础图层。
• terrainProvider: 地形提供者，可以是Cesium.CesiumTerrainProvider、Cesium.GoogleEarthEnterpriseTerrainProvider等类型。
• terrain:指定一个地形提供者（TerrainProvider），用于加载和显示场景中的地形数据。默认情况下，Cesium会加载一些全球高程数据，并使用这些数据来生成场景中的地形。如果想要更改或增强地形数据，则可以将自己的地形提供者传递给terrain属性。例如，可以使用ArcGIS Server、Mapbox或OpenTopography等服务，来获取更准确或更详细的地形数据。需要注意的是，使用地形数据会增加场景的复杂性和资源消耗，因此需要谨慎使用。
• skyBox: 天空盒样式，可以是Cesium.SkyBox或者Cesium.Color类型。
• skyAtmosphere: 大气层设置，可用于控制大气层渲染效果。
• fullscreenElement: 全屏元素，默认为undefined，表示使用全局document.documentElement进行全屏。
• useDefaultRenderLoop: Boolean类型，表示是否使用默认的渲染循环。
• targetFrameRate: Number类型，表示目标帧率。
• showRenderLoopErrors: 是否显示渲染循环错误信息，默认为true。
• useBrowserRecommendedResolution: Boolean类型，表示是否使用浏览器推荐的分辨率。
• automaticallyTrackDataSourceClocks: 是否自动跟踪数据源时钟，当设置为true时，数据源始终与场景时钟同步，如果数据源没有时钟，则不会跟踪。默认为true。
• contextOptions: WebGL上下文参数，可以设置antialias、depth、stencil、alpha、premultipliedAlpha等属性。
• sceneMode: 场景模式，有Cesium.SceneMode.SCENE3D、Cesium.SceneMode.COLUMBUS_VIEW、Cesium.SceneMode.SCENE2D三种，默认为SCENE3D。
• mapProjection: 地图投影方式，可以是Cesium.WebMercatorProjection或者Cesium.GeographicProjection类型，默认为WebMercatorProjection。
• globe: 地球对象，可以用于控制地球的旋转、缩放和其他属性。
• orderIndependentTranslucency: 是否启用独立透明度排序，默认为true。
• creditContainer: 显示数据源的HTML元素，默认为undefined，表示使用内置元素。
• creditViewport: 显示数据源的矩形区域，默认为undefined，表示使用整个视窗。
• dataSources: 数据源数组，包括所有可视化实体和图层。
• shadows: 是否启用阴影渲染，默认为false。
• terrainShadows: ShadowMode类型，表示地形产生阴影的模式。
• mapMode2D: 在2D场景模式下是否显示地图，默认为true。
• projectionPicker: 是否显示投影方式选择器，默认为true。
• blurActiveElementOnCanvasFocus:控制当用户点击或悬停在Cesium Viewer的画布上时，是否将焦点从当前DOM元素中移出。如果设置为true，则会自动将焦点从当前的DOM元素中移开，以便Cesium Viewer可以接收键盘事件和鼠标事件。
  这个属性对于在Web应用程序中使用Cesium Viewer时很有用，因为用户可能需要与其他DOM元素进行交互，例如输入文本或单击按钮。如果不把焦点从当前元素移开，用户将不能使用键盘或鼠标来与Cesium Viewer进行交互。
  需要注意的是，默认情况下，此属性被设置为true，因此当用户点击或悬停在Cesium Viewer的画布上时，焦点将会自动从当前的DOM元素中移开。如果您想要保留焦点，请将该属性设置为false。
• requestRenderMode: 请求渲染模式，有RequestRenderMode.AUTOMATIC、RequestRenderMode.MANUAL两种，默认为AUTOMATIC。
• maximumRenderTimeChange: 最大帧率限制，表示相邻两帧之间最多允许刷新的时间差（毫秒），如果超过该值则自动降低帧率。默认为0，表示不限制帧率。
• depthPlaneEllipsoidOffset:可以指定深度测试平面相对于椭球体表面的偏移量。这个属性通常用于解决多个三维模型重叠时出现的Z-fighting问题，即两个或多个物体处于同一深度位置，导致图像闪烁或不清晰。
  通过将depthPlaneEllipsoidOffset设置为一个Cartesian3类型的向量，可以将深度测试平面上移或下移一定距离。需要注意的是，改变深度测试平面的偏移量可能会影响场景中的渲染效果和性能。因此，应该谨慎使用这个属性，并进行必要的测试和优化。
  另外，需要注意的是，在Viewer对象中设置depthPlaneEllipsoidOffset属性并不会影响到所有场景中的实体。如果想要对单独的场景实体进行深度测试平面的偏移量设置，需要参考Scene对象的depthPlaneEllipsoidOffset属性。
• msaaSamples:控制多重采样（Multisample Anti-Aliasing，简称MSAA）的采样数。MSAA是一种抗锯齿技术，可以减少物体边缘出现的锯齿和走样效果，提高渲染图像的质量。
  通过将msaaSamples属性设置为一个正整数，您可以指定每个像素采样的次数。默认情况下，这个属性被设置为4，表示每个像素采样4次，以获得更平滑的边缘效果。如果您将这个值设置为0或1，将禁用MSAA，将不会进行多重采样，从而降低了渲染质量。
  需要注意的是，增加MSAA采样数会增加GPU的计算负担和内存消耗，可能会影响场景的性能。因此，在使用MSAA时应该谨慎选择采样数，并进行必要的测试和优化。

使用flyTo方法飞行到指定位置

// 定义目标位置和视角 var targetPosition = Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 1500); var heading = Cesium.Math.toRadians(90.0); var pitch = Cesium.Math.toRadians(-45.0); var roll = Cesium.Math.toRadians(0.0); // 相机飞到目标点 viewer.camera.flyTo({ destination: targetPosition, orientation: { heading:heading, pitch:pitch, roll:roll }, duration: 3 // 飞行动画时长 });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

刷新浏览器，可以看到飞行的过渡效果

Viewer类是Cesium中非常重要的类，它提供了许多常用的功能，如地形数据加载、影像数据加载、高度测量以及绘制几何图形等，后面会进行介绍，这次先介绍到这里，喜欢的小伙伴点赞关注加收藏哦