用于构建应用程序的基础控件。它将所有标准的 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
获取或设置数据源是否可以在动画过程中临时暂停,以避免向用户展示不完整的画面。例如,如果异步图元正在后台处理,在几何图形准备就绪之前,时钟不会推进。
readonly animation : Animation
获取 Animation 控件。
readonly baseLayerPicker : BaseLayerPicker
获取 BaseLayerPicker。
获取窗口底部区域的 DOM 元素,该区域包含
CreditDisplay 以及可能的其他内容。
readonly camera : Camera
获取 camera(相机)。
获取 canvas(画布)。
readonly cesiumWidget : CesiumWidget
获取 CesiumWidget。
readonly clock : Clock
获取 clock(时钟)。
clockTrackedDataSource : DataSource
获取或设置要使用查看器时钟跟踪的数据源。
readonly clockViewModel : ClockViewModel
获取 clock 视图模型(clock view model)。
获取父容器。
creditDisplay : CreditDisplay
管理要在屏幕和灯箱中显示的版权信息(credits)列表。
readonly dataSourceDisplay : DataSourceDisplay
获取用于
DataSource 可视化的显示对象。
readonly dataSources : DataSourceCollection
获取要可视化的一组
DataSource 实例。
readonly ellipsoid : Ellipsoid
获取场景的默认椭球体。
-
Default Value:
Ellipsoid.default
readonly entities : EntityCollection
获取未绑定到特定数据源的实体集合。这是
dataSourceDisplay.defaultDataSource.entities 的快捷方式。
readonly fullscreenButton : FullscreenButton
获取 FullscreenButton。
readonly geocoder : Geocoder
获取 Geocoder。
readonly homeButton : HomeButton
获取 HomeButton。
readonly imageryLayers : ImageryLayerCollection
获取将在地球上渲染的影像图层集合。
readonly infoBox : InfoBox
获取信息框(info box)。
readonly navigationHelpButton : NavigationHelpButton
获取 NavigationHelpButton。
readonly postProcessStages : PostProcessStageCollection
获取后处理阶段(post-process stages)。
readonly projectionPicker : ProjectionPicker
获取 ProjectionPicker。
获取或设置为渲染分辨率设置的缩放因子。小于 1.0 的值可以在性能较弱的设备上提升性能,而大于 1.0 的值将以更高的分辨率渲染,然后再缩小,从而获得更好的视觉保真度。例如,如果控件布局尺寸为 640x480,将此值设为 0.5 会使场景以 320x240 渲染后再放大,而设为 2.0 则会使场景以 1280x960 渲染后再缩小。
-
Default Value:
1.0
readonly scene : Scene
获取场景(scene)。
readonly sceneModePicker : SceneModePicker
获取 SceneModePicker。
readonly screenSpaceEventHandler : ScreenSpaceEventHandler
获取屏幕空间事件处理器(screen space event handler)。
selectedEntity : Entity|undefined
获取或设置用于显示选择指示器的对象实例。如果用户以交互方式拾取了一个 Cesium3DTilesFeature 实例,则此属性将包含一个临时 Entity 实例,其中包含一个名为 "feature" 的属性,即被拾取的实例。
readonly selectedEntityChanged : Event
获取当所选实体发生变化时引发的事件。
readonly selectionIndicator : SelectionIndicator
获取选择指示器(selection indicator)。
readonly shadowMap : ShadowMap
获取场景的阴影贴图(shadow map)。
确定光源是否投射阴影。
当
useDefaultRenderLoop 为 true 时,获取或设置控件的目标帧率。如果未定义,则由浏览器的 requestAnimationFrame 实现决定帧率。如果已定义,此值必须大于 0。高于底层 requestAnimationFrame 实现的值将不起作用。
terrainProvider : TerrainProvider
为地球提供表面几何体的地形提供者(terrain provider)。
terrainShadows : ShadowMode
确定地形是否投射或接收来自光源的阴影。
readonly timeline : Timeline
获取 Timeline 控件。
trackedEntity : Entity|undefined
获取或设置当前由相机跟踪的 Entity 实例。
readonly trackedEntityChanged : Event
获取当被跟踪实体发生变化时引发的事件。
布尔标志,指示是否使用浏览器推荐的分辨率。如果为 true,则忽略浏览器的设备像素比并使用 1.0,实际上基于 CSS 像素而非设备像素进行渲染。这可以在具有高像素密度的较弱设备上提升性能。当为 false 时,渲染将基于设备像素。
Viewer#resolutionScale 无论此标志为 true 还是 false 都会生效。
-
Default Value:
true
获取或设置此控件是否应控制渲染循环。如果为 true,控件将使用 requestAnimationFrame 来执行控件的渲染和尺寸调整,并驱动仿真时钟。如果设为 false,您必须在一个自定义渲染循环中手动调用
resize、render 方法。如果在渲染过程中发生错误,Scene 的 renderError 事件将被触发,并且此属性将被设为 false。错误发生后,必须将其重新设为 true 才能继续渲染。
readonly vrButton : VRButton
获取 VRButton。
Methods
销毁该控件。如果要从布局中永久移除该控件,应调用此方法。
使用提供的 mixin 扩展基础查看器(viewer)功能。mixin 可以向提供的查看器实例添加额外的属性、函数或其他行为。
| Name | Type | Description |
|---|---|---|
mixin |
Viewer.ViewerMixin | 要添加到此实例的 Viewer mixin。 |
options |
object | optional 要传递给 mixin 函数的选项对象。 |
See:
将相机飞向所提供的实体、实体集合或数据源。如果数据源仍在加载过程中,或者可视化仍在加载中,此方法会等待数据准备就绪后再执行飞行。
偏移量是在以包围球中心为中心的本地东-北-上(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:
|
Returns:
如果飞行成功则解析为 true;如果目标当前未在场景中可视化,或者飞行被取消,则解析为 false。 //TODO: Cleanup entity mentions
强制控件重新计算其布局,包括控件尺寸和版权信息(credits)的放置位置。
Returns:
如果对象已被销毁则为 true,否则为 false。
渲染场景。除非
useDefaultRenderLoop 设为 false,否则此函数会自动被调用;
调整控件大小以匹配容器尺寸。除非
useDefaultRenderLoop 设为 false,否则会根据需要自动调用此函数。
异步将相机设置为查看所提供的实体、实体集合或数据源。如果数据源仍在加载过程中,或者可视化仍在加载中,此方法会等待数据准备就绪后再执行缩放。
偏移量是在以包围球中心为中心的本地东-北-上(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
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。 |
一个使用额外功能增强 Viewer 实例的函数。
| Name | Type | Description |
|---|---|---|
viewer |
Viewer | Viewer 实例。 |
options |
object | 要传递给 mixin 函数的选项对象。 |
