构建应用程序的基本小部件。它将所有标准的 Cesium 小部件组合成一个可重用的包.
该小部件可以通过使用混入来扩展，混入为各种应用程序增加了有用的功能.
| Name | Type | Description |
|---|---|---|
container |
Element | string | 包含小部件的 DOM 元素或 ID. |
options |
Viewer.ConstructorOptions | optional 描述初始化选项的对象 |
Throws:
-
DeveloperError : 文档中不存在 ID 为“container”的元素.
-
DeveloperError : 当不使用 BaseLayerPicker 小部件时，options.selectedImageryProviderViewModel 不可用，请改为指定 options.baseLayerd.
-
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
获取动画小部件.
readonly baseLayerPicker : BaseLayerPicker
获取基础图层选择器.
获取窗口底部区域的 DOM 元素，该区域包含
CreditDisplay 以及其他可能的内容.
readonly camera : Camera
获取相机.
获取画布.
readonly cesiumWidget : CesiumWidget
获取cesium小部件.
readonly clock : Clock
获取时钟.
clockTrackedDataSource : DataSource
获取或设置要与查看器的时钟一起跟踪的数据源.
readonly clockViewModel : ClockViewModel
获取时钟视图模型.
获取父容器.
creditDisplay : CreditDisplay
管理在屏幕和灯箱中显示的版权信息列表.
readonly dataSourceDisplay : DataSourceDisplay
获取用于
DataSource 可视化的显示.
readonly dataSources : DataSourceCollection
获取要可视化的一组
DataSource 实例.
readonly ellipsoid : Ellipsoid
获取场景的默认椭球体.
-
Default Value:
Ellipsoid.default
readonly entities : EntityCollection
获取不与特定数据源绑定的实体集合.
这个是对 [dataSourceDisplay.defaultDataSource.entities]快捷方式
Viewer#dataSourceDisplay.
readonly fullscreenButton : FullscreenButton
获取全屏按钮.
readonly geocoder : Geocoder
获取地理编码器.
readonly homeButton : HomeButton
获取主页按钮.
readonly imageryLayers : ImageryLayerCollection
获取将在地球上渲染的图像层集合.
readonly infoBox : InfoBox
获取信息框.
readonly navigationHelpButton : NavigationHelpButton
获取导航帮助按钮.
readonly postProcessStages : PostProcessStageCollection
获取后处理阶段.
readonly projectionPicker : ProjectionPicker
获取投影选择器.
“获取或设置渲染分辨率的缩放因子。值小于 1.0 可以提高性能，适用于性能较弱的设备，
而值大于 1.0 将以更高的分辨率渲染，然后缩小，从而改善视觉效果。
例如，如果小部件的布局大小为 640x480，将此值设置为 0.5 会使场景在 320x240 的分辨率下渲染，然后放大；
将其设置为 2.0 会使场景在 1280x960 的分辨率下渲染，然后缩小.
-
Default Value:
1.0
readonly scene : Scene
获取场景.
readonly sceneModePicker : SceneModePicker
获取场景模式选择器.
readonly screenSpaceEventHandler : ScreenSpaceEventHandler
获取屏幕空间事件处理器.
selectedEntity : Entity|undefined
获取或设置用于显示选择指示器的对象实例.
如果用户以交互方式选择了一个 Cesium3DTilesFeature 实例，
则此属性将包含一个临时的 Entity 实例，该实例具有名为 'feature' 的属性，表示被选中的实例.
readonly selectedEntityChanged : Event
获取在选定实体改变时触发的事件.
readonly selectionIndicator : SelectionIndicator
获取选择指示器.
readonly shadowMap : ShadowMap
获取场景的阴影图
确定光源是否会投射阴影.
获取或设置小部件的目标帧率，当
useDefaultRenderLoop 为真时。如果未定义，
则由浏览器的 requestAnimationFrame 实现来确定帧率。如果定义，则该值必须大于 0。
高于基础 requestAnimationFrame 实现的值将无效.
terrainProvider : TerrainProvider
提供地球表面几何形状的地形提供者.
terrainShadows : ShadowMode
确定地形是否会投射光源的阴影.
readonly timeline : Timeline
获取时间轴小部件.
trackedEntity : Entity|undefined
获取或设置当前由相机跟踪的实体实例.
readonly trackedEntityChanged : Event
获取在跟踪实体改变时触发的事件.
布尔标志，指示是否使用浏览器推荐的分辨率。
如果为真，则忽略浏览器的设备像素比，改为使用 1.0，从而基于 CSS 像素而非设备像素进行渲染。
这可以提高在高像素密度的性能较弱设备上的性能。当为假时，渲染将在设备像素中进行。
无论该标志为真还是假，
Viewer#resolutionScale 仍将生效.
-
Default Value:
true
获取或设置该小部件是否应该控制渲染循环。如果为真，则小部件将使用 requestAnimationFrame 来执行渲染和调整小部件的大小，
并驱动模拟时钟。如果设置为假，则必须手动调用
resize、render 方法作为自定义渲染循环的一部分。
如果在渲染过程中发生错误，Scene 的 renderError
事件将被触发，此属性将被设置为假。在错误后，必须将其设置回真以继续渲染.
readonly vrButton : VRButton
获取VR按钮.
Methods
销毁小部件。如果永久地,从布局中移除小部件，则应调用此方法.
通过提供的混入扩展基本查看器功能。混入可以向提供的查看器实例添加额外的属性、函数或其他行为.
| Name | Type | Description |
|---|---|---|
mixin |
Viewer.ViewerMixin | 要添加到此实例的查看器混入. |
options |
object | optional 要传递给混入函数的选项对象. |
See:
将相机飞至提供的实体、实体集合或数据源。如果数据源仍在加载过程中，或者可视化仍在进行中，此方法会等待数据准备好后再执行飞行.
偏移量是以包围球中心为中心的局部东-北-上参考系中的航向/俯仰/范围。航向和俯仰角在局部东-北-上参考系中定义。 航向是从 y 轴开始的角度，并朝着 x 轴增加。俯仰是从 xy 平面的旋转。 正俯仰角在平面上方，负俯仰角在平面下方。范围是从中心的距离。如果范围为零，将计算一个范围，以确保整个包围球是可见的。
在 2D 模式中，必须有一个俯视图。相机会被放置在目标上方向下查看。 目标上方的高度将是范围。航向将根据偏移量来确定。如果航向无法从偏移量中确定，则航向将为北。
| Name | Type | Description | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
target |
Entity | Array.<Entity> | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | TimeDynamicPointCloud | Promise.<(Entity|Array.<Entity>|EntityCollection|DataSource|ImageryLayer|Cesium3DTileset|TimeDynamicPointCloud|VoxelPrimitive)> | 要查看的实体、实体数组、实体集合、数据源、Cesium3DTileset、点云或图像层。你也可以传递一个解析为上述类型之一的 Promise. | ||||||||||||||||
options |
object |
optional
具有以下属性的对象:
|
Returns:
一个 Promise，如果飞行成功则解析为 true；如果目标当前未在场景中可视化或飞行被取消，则解析为 false. //TODO: Cleanup entity mentions
这会迫使小部件重新考虑其布局，包括小部件的大小和版权位置.
Returns:
如果对象已被销毁则返回 true，否则返回 false.
渲染场景。此函数会在需要时自动调用，除非
useDefaultRenderLoop 设置为假;
调整小部件大小以匹配容器大小。此函数会在需要时自动调用，除非
useDefaultRenderLoop 设置为假.
异步设置相机以查看提供的实体、实体集合或数据源。如果数据源仍在加载过程中，或者可视化仍在加载，此方法会等待数据准备好后再执行缩放.
偏移量是以包围球中心为中心的局部东-北-上参考系中的航向/俯仰/范围。 航向和俯仰角度在局部东-北-上参考系中定义。航向是从 y 轴开始的角度，并朝着 x 轴增加。俯仰是从 xy 平面的旋转。 正俯仰角在平面上方，负俯仰角在平面下方。范围是从中心的距离。如果范围为零，将计算一个范围，以确保整个包围球可见。
在 2D 模式中，必须有一个俯视图。相机会被放置在目标上方向下查看。 目标上方的高度将是范围。航向将根据偏移量来确定。如果航向无法从偏移量中确定，则航向将为北。
| Name | Type | Description |
|---|---|---|
target |
Entity | Array.<Entity> | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | TimeDynamicPointCloud | Promise.<(Entity|Array.<Entity>|EntityCollection|DataSource|ImageryLayer|Cesium3DTileset|TimeDynamicPointCloud|VoxelPrimitive)> | 要查看的实体、实体数组、实体集合、数据源、Cesium3DTileset、点云或图像层。你也可以传递一个解析为上述类型之一的 Promise. |
offset |
HeadingPitchRange | optional 在局部东-北-上参考系中，从实体中心的偏移量. |
Returns:
一个 Promise，如果缩放成功则解析为 true；如果目标当前没有在场景中可视化或缩放被取消，则解析为 false.
Type Definitions
Viewer构造函数的初始化选项
Properties:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
animation |
boolean |
<optional> |
true | 如果设置为false，动画部件将不会被创建. |
baseLayerPicker |
boolean |
<optional> |
true | 如果设置为false，基础图层选择器部件将不会被创建. |
fullscreenButton |
boolean |
<optional> |
true | 如果设置为false，全屏按钮部件将不会被创建. |
vrButton |
boolean |
<optional> |
false | 如果设置为true, VR按钮部件将会被创建. |
geocoder |
boolean | Array.<GeocoderService> |
<optional> |
true | 如果设置为false,地理编码器部件将不会被创建.. |
homeButton |
boolean |
<optional> |
true | 如果设置为false, 主页按钮部件将不会被创建. |
infoBox |
boolean |
<optional> |
true | 如果设置为false, 信息框部件将不会被创建. |
sceneModePicker |
boolean |
<optional> |
true | 如果设置为false, 场景模式选择器部件将不会被创建. |
selectionIndicator |
boolean |
<optional> |
true | 如果设置为false, 选择指示器部件将不会被创建. |
timeline |
boolean |
<optional> |
true | 如果设置为false, 时间轴部件将不会被创建. |
navigationHelpButton |
boolean |
<optional> |
true | 如果设置为false, 导航帮助按钮部件将不会被创建. |
navigationInstructionsInitiallyVisible |
boolean |
<optional> |
true | 如果导航说明应该初始可见则为真, 或者如果在用户明确点击按钮之前不显示导航说明则为假. |
scene3DOnly |
boolean |
<optional> |
false | 当设置为true时, 每个几何实例将仅在3D中渲染,以节省GPU内存. |
shouldAnimate |
boolean |
<optional> |
false | true 表示时钟应默认尝试推进模拟时间，false 则表示不这样做。此选项优先于设置 Viewer#clockViewModel. |
clockViewModel |
ClockViewModel |
<optional> |
new ClockViewModel(clock) | 用于控制当前时间的时钟视图模型. |
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 时有效. |
ellipsoid |
Ellipsoid |
<optional> |
Ellipsoid.default | 默认的椭球体. |
terrainProvider |
TerrainProvider |
<optional> |
new EllipsoidTerrainProvider() | 要使用的地形提供者 |
terrain |
Terrain |
<optional> |
一个处理异步地形提供者的地形对象。仅当 options.terrainProvider 未定义时才能指定. | |
skyBox |
SkyBox | false |
<optional> |
用于渲染星星的天空盒。当 undefined 且使用 WGS84 椭球体时，将使用默认星星。如果设置为 false，则不会添加任何天空盒、太阳或月亮. |
|
skyAtmosphere |
SkyAtmosphere | false |
<optional> |
蓝天以及地球边缘的辉光。在使用 WGS84 椭球体时启用。设置为 false 以关闭它. |
|
fullscreenElement |
Element | string |
<optional> |
document.body | 在按下全屏按钮时，要置入全屏模式的元素或 ID. |
useDefaultRenderLoop |
boolean |
<optional> |
true | 如果这个小部件应该控制渲染循环，则为真；否则为假. |
targetFrameRate |
number |
<optional> |
使用默认渲染循环时的目标帧率. | |
showRenderLoopErrors |
boolean |
<optional> |
true | 如果为真，当发生渲染循环错误时，这个小部件将自动向用户显示一个包含错误的 HTML 面板. |
useBrowserRecommendedResolution |
boolean |
<optional> |
true | 如果为真，则以浏览器推荐的分辨率进行渲染，并忽略 window.devicePixelRatio. |
automaticallyTrackDataSourceClocks |
boolean |
<optional> |
true | 如果为真，这个小部件将自动跟踪新添加的数据源的时钟设置，并在数据源的时钟发生变化时更新。如果你希望独立配置时钟，请将其设置为假. |
contextOptions |
ContextOptions |
<optional> |
传递给 Scene 的上下文和 WebGL 创建属性. |
|
sceneMode |
SceneMode |
<optional> |
SceneMode.SCENE3D | 初始场景模式. |
mapProjection |
MapProjection |
<optional> |
new GeographicProjection(options.ellipsoid) | 用于 2D 和哥伦布视图模式的地图投影. |
globe |
Globe | false |
<optional> |
new Globe(options.ellipsoid) | 场景中要使用的地球。如果设置为 false，则不会添加任何地球，并且天空气氛将默认隐藏. |
orderIndependentTranslucency |
boolean |
<optional> |
true | 如果为真，并且配置支持它，则使用无序独立的半透明效果. |
creditContainer |
Element | string |
<optional> |
将包含 CreditDisplay 的 DOM 元素或 ID。如果未指定，版权信息将添加到小部件的底部. |
|
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 | 如果设置为真，将会创建 ProjectionPicker 小部件. |
blurActiveElementOnCanvasFocus |
boolean |
<optional> |
true | 如果为真，当点击查看器的画布时，活动元素将失去焦点。将其设置为假，对于仅用于获取位置或实体数据的情况很有用，而实际上并不想将画布设置为活动元素. |
requestRenderMode |
boolean |
<optional> |
false | 如果为真，渲染帧将仅在场景发生变化时进行。这可以减少应用程序的 CPU/GPU 使用率，并降低移动设备的电池消耗，但需要使用 Scene#requestRender 在此模式下显式渲染新帧。在许多情况下，在对 API 的其他部分进行场景更改后，这将是必要的。请参阅 Improving Performance with Explicit Rendering. |
maximumRenderTimeChange |
number |
<optional> |
0.0 | 如果 requestRenderMode 为真，此值定义在请求渲染之前允许的最大模拟时间变化。请参阅 Improving Performance with Explicit Rendering. |
depthPlaneEllipsoidOffset |
number |
<optional> |
0.0 | 调整深度平面以解决椭球体零高度下的渲染伪影. |
msaaSamples |
number |
<optional> |
4 | 如果提供，此值控制多重采样抗锯齿的速率。典型的多重采样率为每像素 2、4 和有时 8 次采样。更高的 MSAA 采样率可能会影响性能，以换取更好的视觉质量。此值仅适用于支持多重采样渲染目标的 WebGL2 上下文。设置为 1 可禁用 MSAA. |
一个增强 Viewer 实例额外功能的函数。
| Name | Type | Description |
|---|---|---|
viewer |
Viewer | 查看器实例。 |
options |
object | 要传递给混入函数的选项对象。 |