Viewer

new Cesium.Viewer(container, options)

用于构建应用程序的基础控件。它将所有标准的 Cesium 控件组合成一个可复用的包。该控件始终可以通过使用 mixin 进行扩展,这些 mixin 会为各种应用程序添加有用的功能。
Name Type Description
container Element | string 将包含该控件的 DOM 元素或 ID。
options Viewer.ConstructorOptions optional Object describing initialization options
Throws:
  • DeveloperError :文档中不存在 id 为 "container" 的元素。
  • DeveloperError :未使用 BaseLayerPicker 控件时,options.selectedImageryProviderViewModel 不可用,请改用 options.baseLayer。
  • DeveloperError :未使用 BaseLayerPicker 控件时,options.selectedTerrainProviderViewModel 不可用,请改用 options.terrainProvider。
Example:
// Initialize the viewer widget with several custom options and mixins.
try {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // Start in Columbus Viewer
    sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
    // Use Cesium World Terrain
    terrain: Cesium.Terrain.fromWorldTerrain(),
    // Hide the base layer picker
    baseLayerPicker: false,
    // Use OpenStreetMaps
    baseLayer: new Cesium.ImageryLayer(new Cesium.OpenStreetMapImageryProvider({
      url: "https://tile.openstreetmap.org/"
    })),
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: "stars/TychoSkymapII.t3_08192x04096_80_px.jpg",
        negativeX: "stars/TychoSkymapII.t3_08192x04096_80_mx.jpg",
        positiveY: "stars/TychoSkymapII.t3_08192x04096_80_py.jpg",
        negativeY: "stars/TychoSkymapII.t3_08192x04096_80_my.jpg",
        positiveZ: "stars/TychoSkymapII.t3_08192x04096_80_pz.jpg",
        negativeZ: "stars/TychoSkymapII.t3_08192x04096_80_mz.jpg"
      }
    }),
    // Show Columbus View map with Web Mercator projection
    mapProjection: new Cesium.WebMercatorProjection()
  });
} catch (error) {
  console.log(error);
}

// Add basic drag and drop functionality
viewer.extend(Cesium.viewerDragDropMixin);

// Show a pop-up alert if we encounter an error when processing a dropped file
viewer.dropError.addEventListener(function(dropHandler, name, error) {
  console.log(error);
  window.alert(error);
});
Demo:
See:

Members

allowDataSourcesToSuspendAnimation : boolean

获取或设置数据源是否可以在动画过程中临时暂停,以避免向用户展示不完整的画面。例如,如果异步图元正在后台处理,在几何图形准备就绪之前,时钟不会推进。
获取 Animation 控件。
获取 BaseLayerPicker。

readonly bottomContainer : Element

获取窗口底部区域的 DOM 元素,该区域包含 CreditDisplay 以及可能的其他内容。
获取 camera(相机)。

readonly canvas : HTMLCanvasElement

获取 canvas(画布)。
获取 CesiumWidget。
获取 clock(时钟)。
获取或设置要使用查看器时钟跟踪的数据源。
获取 clock 视图模型(clock view model)。

readonly container : Element

获取父容器。
管理要在屏幕和灯箱中显示的版权信息(credits)列表。
获取用于 DataSource 可视化的显示对象。
获取要可视化的一组 DataSource 实例。
获取场景的默认椭球体。
Default Value: Ellipsoid.default
获取未绑定到特定数据源的实体集合。这是 dataSourceDisplay.defaultDataSource.entities 的快捷方式。
获取 FullscreenButton。
获取 Geocoder。
获取 HomeButton。
获取将在地球上渲染的影像图层集合。
获取信息框(info box)。
获取 NavigationHelpButton。
获取后处理阶段(post-process stages)。
获取 ProjectionPicker。

resolutionScale : number

获取或设置为渲染分辨率设置的缩放因子。小于 1.0 的值可以在性能较弱的设备上提升性能,而大于 1.0 的值将以更高的分辨率渲染,然后再缩小,从而获得更好的视觉保真度。例如,如果控件布局尺寸为 640x480,将此值设为 0.5 会使场景以 320x240 渲染后再放大,而设为 2.0 则会使场景以 1280x960 渲染后再缩小。
Default Value: 1.0
获取场景(scene)。
获取 SceneModePicker。
获取屏幕空间事件处理器(screen space event handler)。

selectedEntity : Entity|undefined

获取或设置用于显示选择指示器的对象实例。如果用户以交互方式拾取了一个 Cesium3DTilesFeature 实例,则此属性将包含一个临时 Entity 实例,其中包含一个名为 "feature" 的属性,即被拾取的实例。

readonly selectedEntityChanged : Event

获取当所选实体发生变化时引发的事件。
获取选择指示器(selection indicator)。
获取场景的阴影贴图(shadow map)。
确定光源是否投射阴影。

targetFrameRate : number

当 useDefaultRenderLoop 为 true 时,获取或设置控件的目标帧率。如果未定义,则由浏览器的 requestAnimationFrame 实现决定帧率。如果已定义,此值必须大于 0。高于底层 requestAnimationFrame 实现的值将不起作用。
为地球提供表面几何体的地形提供者(terrain provider)。
确定地形是否投射或接收来自光源的阴影。
获取 Timeline 控件。

trackedEntity : Entity|undefined

获取或设置当前由相机跟踪的 Entity 实例。

readonly trackedEntityChanged : Event

获取当被跟踪实体发生变化时引发的事件。

useBrowserRecommendedResolution : boolean

布尔标志,指示是否使用浏览器推荐的分辨率。如果为 true,则忽略浏览器的设备像素比并使用 1.0,实际上基于 CSS 像素而非设备像素进行渲染。这可以在具有高像素密度的较弱设备上提升性能。当为 false 时,渲染将基于设备像素。Viewer#resolutionScale 无论此标志为 true 还是 false 都会生效。
Default Value: true

useDefaultRenderLoop : boolean

获取或设置此控件是否应控制渲染循环。如果为 true,控件将使用 requestAnimationFrame 来执行控件的渲染和尺寸调整,并驱动仿真时钟。如果设为 false,您必须在一个自定义渲染循环中手动调用 resize、render 方法。如果在渲染过程中发生错误,Scene 的 renderError 事件将被触发,并且此属性将被设为 false。错误发生后,必须将其重新设为 true 才能继续渲染。
获取 VRButton。

Methods

销毁该控件。如果要从布局中永久移除该控件,应调用此方法。

extend(mixin, options)

使用提供的 mixin 扩展基础查看器(viewer)功能。mixin 可以向提供的查看器实例添加额外的属性、函数或其他行为。
Name Type Description
mixin Viewer.ViewerMixin 要添加到此实例的 Viewer mixin。
options object optional 要传递给 mixin 函数的选项对象。
See:

flyTo(target, options) → Promise.<boolean>

将相机飞向所提供的实体、实体集合或数据源。如果数据源仍在加载过程中,或者可视化仍在加载中,此方法会等待数据准备就绪后再执行飞行。

偏移量是在以包围球中心为中心的本地东-北-上(east-north-up)参考系中的 heading(航向)/pitch(俯仰)/range(距离)。heading 和 pitch 角定义在本地东-北-上参考系中。heading 是从 y 轴开始并朝 x 轴方向增大的角度。pitch 是从 xy 平面的旋转角度。正 pitch 角在平面之上,负 pitch 角在平面之下。range 是到中心的距离。如果 range 为零,则会计算一个 range,使整个包围球可见。

在 2D 模式下,必须是俯视视角。相机将放置在目标上方朝下看。目标上方的高度即为 range。heading 将由偏移量确定。如果无法从偏移量确定 heading,则 heading 为北向。

Name Type Description
target Entity | Array.<Entity> | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | TimeDynamicPointCloud | Promise.<(Entity|Array.<Entity>|EntityCollection|DataSource|ImageryLayer|Cesium3DTileset|TimeDynamicPointCloud|VoxelPrimitive|BufferPrimitiveCollection.<BufferPrimitive>)> 要查看的实体、实体数组、实体集合、数据源、Cesium3DTileset、点云或影像图层。你也可以传入一个解析为上述任一类型的 promise。
options object optional Object with the following properties:
Name Type Default Description
duration number 3.0 optional 飞行持续时间,以秒为单位。
maximumHeight number optional 飞行到达顶点时的最大高度。
offset HeadingPitchRange optional 在以目标为中心的本地东-北-上参考系中,相对于目标的偏移量。
Returns:
如果飞行成功则解析为 true;如果目标当前未在场景中可视化,或者飞行被取消,则解析为 false。 //TODO: Cleanup entity mentions
强制控件重新计算其布局,包括控件尺寸和版权信息(credits)的放置位置。

isDestroyed() → boolean

Returns:
如果对象已被销毁则为 true,否则为 false。
渲染场景。除非 useDefaultRenderLoop 设为 false,否则此函数会自动被调用;
调整控件大小以匹配容器尺寸。除非 useDefaultRenderLoop 设为 false,否则会根据需要自动调用此函数。

zoomTo(target, offset) → Promise.<boolean>

异步将相机设置为查看所提供的实体、实体集合或数据源。如果数据源仍在加载过程中,或者可视化仍在加载中,此方法会等待数据准备就绪后再执行缩放。

偏移量是在以包围球中心为中心的本地东-北-上(east-north-up)参考系中的 heading(航向)/pitch(俯仰)/range(距离)。heading 和 pitch 角定义在本地东-北-上参考系中。heading 是从 y 轴开始并朝 x 轴方向增大的角度。pitch 是从 xy 平面的旋转角度。正 pitch 角在平面之上,负 pitch 角在平面之下。range 是到中心的距离。如果 range 为零,则会计算一个 range,使整个包围球可见。

在 2D 模式下,必须是俯视视角。相机将放置在目标上方朝下看。目标上方的高度即为 range。heading 将由偏移量确定。如果无法从偏移量确定 heading,则 heading 为北向。

Name Type Description
target Entity | Array.<Entity> | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | TimeDynamicPointCloud | Promise.<(Entity|Array.<Entity>|EntityCollection|DataSource|ImageryLayer|Cesium3DTileset|TimeDynamicPointCloud|VoxelPrimitive|BufferPrimitiveCollection.<BufferPrimitive>)> 要查看的实体、实体数组、实体集合、数据源、Cesium3DTileset、点云或影像图层。你也可以传入一个解析为上述任一类型的 promise。
offset HeadingPitchRange optional 在本地东-北-上参考系中,相对于实体中心的偏移量。
Returns:
如果缩放成功则解析为 true;如果目标当前未在场景中可视化,或者缩放被取消,则解析为 false。

Type Definitions

Cesium.Viewer.ConstructorOptions

Initialization options for the Viewer constructor
Properties:
Name Type Attributes Default Description
animation boolean <optional>
true 如果设为 false,则不会创建 Animation 控件。
baseLayerPicker boolean <optional>
true 如果设为 false,则不会创建 BaseLayerPicker 控件。
fullscreenButton boolean <optional>
true 如果设为 false,则不会创建 FullscreenButton 控件。
vrButton boolean <optional>
false 如果设为 true,则会创建 VRButton 控件。
geocoder boolean | IonGeocodeProviderType | Array.<GeocoderService> <optional>
IonGeocodeProviderType.DEFAULT 使用 Geocoder 控件搜索时要使用的地理编码服务或服务列表。如果设为 false,则不会创建 Geocoder 控件。
homeButton boolean <optional>
true 如果设为 false,则不会创建 HomeButton 控件。
infoBox boolean <optional>
true 如果设为 false,则不会创建 InfoBox 控件。
sceneModePicker boolean <optional>
true 如果设为 false,则不会创建 SceneModePicker 控件。
selectionIndicator boolean <optional>
true 如果设为 false,则不会创建 SelectionIndicator 控件。
timeline boolean <optional>
true 如果设为 false,则不会创建 Timeline 控件。
navigationHelpButton boolean <optional>
true 如果设为 false,则不会创建导航帮助按钮(navigation help button)。
navigationInstructionsInitiallyVisible boolean <optional>
true 如果导航说明在初始时应可见则为 true;如果直到用户显式点击按钮之前都不应显示,则为 false。
scene3DOnly boolean <optional>
false 当为 true 时,为了节省 GPU 内存,每个几何实例将仅在 3D 中渲染。
shouldAnimate boolean <optional>
false true 表示时钟在默认情况下应尝试推进仿真时间,false 表示不推进。此选项优先于对 Viewer#clockViewModel 的设置。
clockViewModel ClockViewModel <optional>
new ClockViewModel(clock) 用于控制当前时间的时钟视图模型(clock view model)。
selectedImageryProviderViewModel ProviderViewModel <optional>
当前基础影像图层的视图模型,如果未提供则使用第一个可用的基础图层。此值仅在 `baseLayerPicker` 设为 true 时有效。
imageryProviderViewModels Array.<ProviderViewModel> <optional>
createDefaultImageryProviderViewModels() 可从 BaseLayerPicker 中选择的 ProviderViewModel 数组。此值仅在 `baseLayerPicker` 设为 true 时有效。
selectedTerrainProviderViewModel ProviderViewModel <optional>
当前基础地形图层的视图模型,如果未提供则使用第一个可用的基础图层。此值仅在 `baseLayerPicker` 设为 true 时有效。
terrainProviderViewModels Array.<ProviderViewModel> <optional>
createDefaultTerrainProviderViewModels() 可从 BaseLayerPicker 中选择的 ProviderViewModel 数组。此值仅在 `baseLayerPicker` 设为 true 时有效。
baseLayer ImageryLayer | false <optional>
ImageryLayer.fromWorldImagery() 应用于地球的最底层影像图层。如果设为 false,则不会添加影像提供者。此值仅在 `baseLayerPicker` 设为 false 时有效。当 `globe` 设为 false 时不能使用。
ellipsoid Ellipsoid <optional>
Ellipsoid.default 默认椭球体。
terrainProvider TerrainProvider <optional>
new EllipsoidTerrainProvider() 要使用的地形提供者(terrain provider)。
terrain Terrain <optional>
用于处理异步地形提供者的地形对象。仅当 options.terrainProvider 未定义时才能指定。
skyBox SkyBox | false <optional>
用于渲染星星的天空盒(skybox)。当为 undefined 且使用 WGS84 椭球体时,使用默认星空。如果设为 false,则不添加天空盒、太阳或月亮。
skyAtmosphere SkyAtmosphere | false <optional>
蓝天,以及地球边缘周围的光晕。在使用 WGS84 椭球体时启用。设为 false 可将其关闭。
fullscreenElement Element | string <optional>
document.body 按下全屏按钮时要进入全屏模式的元素或 ID。
useDefaultRenderLoop boolean <optional>
true 如果此控件应控制渲染循环则为 true,否则为 false。
targetFrameRate number <optional>
使用默认渲染循环时的目标帧率。
showRenderLoopErrors boolean <optional>
true 如果为 true,当渲染循环发生错误时,此控件会自动向用户显示一个包含错误信息的 HTML 面板。
useBrowserRecommendedResolution boolean <optional>
true 如果为 true,则以浏览器推荐的分辨率渲染,并忽略 window.devicePixelRatio。
automaticallyTrackDataSourceClocks boolean <optional>
true 如果为 true,此控件会自动跟踪新添加的数据源(DataSource)的时钟设置,并在数据源的时钟发生变化时更新。如果您想独立配置时钟,请将其设为 false。
contextOptions ContextOptions <optional>
传递给 Scene 的上下文和 WebGL 创建属性。
sceneMode SceneMode <optional>
SceneMode.SCENE3D 初始场景模式(scene mode)。
mapProjection MapProjection <optional>
new GeographicProjection(options.ellipsoid) 在 2D 和 Columbus View 模式下使用的地图投影。
globe Globe | false <optional>
new Globe(options.ellipsoid) 场景中要使用的地球。如果设为 false,则不会添加地球,并且天空大气默认会被隐藏。
orderIndependentTranslucency boolean <optional>
true 如果为 true 且配置支持,则使用顺序无关透明度(order independent translucency)。
creditContainer Element | string <optional>
将包含 CreditDisplay 的 DOM 元素或 ID。如果未指定,版权信息(credits)会被添加到控件本身的底部。
creditViewport Element | string <optional>
将包含由 CreditDisplay 创建的版权弹出框的 DOM 元素或 ID。如果未指定,它将显示在控件本身之上。
dataSources DataSourceCollection <optional>
new DataSourceCollection() 由该控件可视化的数据源集合。如果提供了此参数,则认为该实例归调用者所有,并且在查看器被销毁时不会被销毁。
shadows boolean <optional>
false 确定光源是否投射阴影。
terrainShadows ShadowMode <optional>
ShadowMode.RECEIVE_ONLY 确定地形是否投射或接收来自光源的阴影。
mapMode2D MapMode2D <optional>
MapMode2D.INFINITE_SCROLL 确定 2D 地图是否可旋转,或者是否可以在水平方向上无限滚动。
projectionPicker boolean <optional>
false 如果设为 true,则会创建 ProjectionPicker 控件。
blurActiveElementOnCanvasFocus boolean <optional>
true 如果为 true,点击查看器的 canvas 时,活动元素会失去焦点(blur)。将其设为 false 适用于以下情况:点击 canvas 仅仅是为了获取位置或实体数据,而实际上并不打算将 canvas 设为活动元素。
requestRenderMode boolean <optional>
false 如果为 true,仅在场景内发生变化需要时才会渲染一帧。启用此选项可降低应用程序的 CPU/GPU 使用率,并在移动设备上消耗更少的电量,但在此模式下需要使用 Scene#requestRender 显式地渲染新的一帧。在对 API 的其他部分修改场景后,很多情况下都需要这样做。参见 Improving Performance with Explicit Rendering。
maximumRenderTimeChange number <optional>
0.0 如果 requestRenderMode 为 true,此值定义了在请求渲染之前允许的仿真时间最大变化量。参见 Improving Performance with Explicit Rendering。
depthPlaneEllipsoidOffset number <optional>
0.0 调整 DepthPlane 以解决椭球体零高程以下的渲染瑕疵(artefacts)。
msaaSamples number <optional>
4 如果提供此值,它将控制多重采样抗锯齿(multisample antialiasing)的速率。典型的多重采样率为 2、4,有时为 8 个样本/像素。更高的 MSAA 采样率可能会影响性能,以换取更好的视觉质量。此值仅适用于支持多重采样渲染目标的 WebGL2 上下文。设为 1 可禁用 MSAA。

Cesium.Viewer.ViewerMixin(viewer, options)

一个使用额外功能增强 Viewer 实例的函数。
Name Type Description
viewer Viewer Viewer 实例。
options object 要传递给 mixin 函数的选项对象。
See:
需要帮助?获取答案的最快方式是在 Cesium 论坛 上向社区和团队提问。