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

共计 7088 个字符，预计需要花费 18 分钟才能阅读完成。

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, 
  })

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：偏移量。

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 时应该谨慎选择采样数，并进行必要的测试和优化。

// 定义目标位置和视角
  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 // 飞行动画时长
  });