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,您必须在一个自定义渲染循环中手动调用 resizerender 方法。如果在渲染过程中发生错误,ScenerenderError 事件将被触发,并且此属性将被设为 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 论坛 上向社区和团队提问。