用于构建应用程序的基本小部件。它将所有标准的 Cesium 小部件组合到一个可重用的包中。小部件总是可以通过使用 mixins 来扩展,它添加了对各种应用程序有用的功能。
Name | Type | Description |
---|---|---|
container
|
Element | String | 将包含小部件的 DOM 元素或 ID。 |
options
|
Viewer.ConstructorOptions | 描述初始化选项的 可选 对象 |
Throws:
-
DeveloperError :文档中不存在 ID 为'容器'的元素。
-
DeveloperError : options.selectedImageryProviderViewModel 在不使用 BaseLayerPicker 小部件时不可用,请改为指定 options.imageryProvider。
-
DeveloperError : options.selectedTerrainProviderViewModel 在不使用 BaseLayerPicker 小部件时不可用,请改为指定 options.terrainProvider。
Example:
//Initialize the viewer widget with several custom options and mixins.
const viewer = new Cesium.Viewer('cesiumContainer', {
//Start in Columbus Viewer
sceneMode : Cesium.SceneMode.COLUMBUS_VIEW,
//Use Cesium World Terrain
terrainProvider : Cesium.createWorldTerrain(),
//Hide the base layer picker
baseLayerPicker : false,
//Use OpenStreetMaps
imageryProvider : new Cesium.OpenStreetMapImageryProvider({
url : 'https://a.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()
});
//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
获取 BaseLayerPicker。
获取窗口底部区域的 DOM 元素,该区域包含
CreditDisplay
和可能的其他内容。
readonly camera : Camera
获取相机。
获取画布。
readonly cesiumWidget : CesiumWidget
获取 CesiumWidget。
readonly clock : Clock
获取时钟。
clockTrackedDataSource : DataSource
获取或设置要使用查看器时钟跟踪的数据源。
readonly clockViewModel : ClockViewModel
获取时钟视图模型。
获取父容器。
readonly dataSourceDisplay : DataSourceDisplay
获取用于
DataSource
可视化的显示。
readonly dataSources : DataSourceCollection
获取要可视化的
DataSource
实例集。
readonly entities : EntityCollection
获取未绑定到特定数据源的实体集合。这是
dataSourceDisplay.defaultDataSource.entities
的快捷方式。
readonly fullscreenButton : FullscreenButton
获取全屏按钮。
readonly geocoder : Geocoder
获取地理编码器。
readonly homeButton : HomeButton
获取主页按钮。
readonly imageryLayers : ImageryLayerCollection
获取将在地球上渲染的图像图层的集合。
readonly infoBox : InfoBox
获取信息框。
readonly navigationHelpButton : NavigationHelpButton
获取 NavigationHelpButton。
readonly postProcessStages : PostProcessStageCollection
获取后期处理阶段。
readonly projectionPicker : ProjectionPicker
获取 ProjectionPicker。
获取或设置渲染分辨率的比例因子。小于 1.0 的值可以提高功能较弱的设备的性能,而大于 1.0 的值将以更高的分辨率渲染,然后按比例缩小,从而提高视觉保真度。例如,如果小部件的布局尺寸为 640x480,则将此值设置为 0.5 将导致场景以 320x240 渲染然后放大,而将其设置为 2.0 将导致场景以 1280x960 渲染然后缩放下。
-
Default Value:
1.0
readonly scene : Scene
获取场景。
readonly sceneModePicker : SceneModePicker
获取 SceneModePicker。
readonly screenSpaceEventHandler : ScreenSpaceEventHandler
获取屏幕空间事件处理程序。
selectedEntity : Entity |undefined
获取或设置要为其显示选择指示器的对象实例。如果用户以交互方式选择 Cesium3DTilesFeature 实例,则此属性将包含一个瞬态实体实例,该实例具有名为'feature'的属性,即被选择的实例。
readonly selectedEntityChanged : Event
获取选定实体更改时引发的事件。
readonly selectionIndicator : SelectionIndicator
获取选择指示器。
readonly shadowMap : ShadowMap
获取场景的阴影贴图
确定阴影是否由光源投射。
当
useDefaultRenderLoop
为 true 时,获取或设置小部件的目标帧速率。如果未定义,浏览器的
requestAnimationFrame
实现将确定帧速率。如果已定义,此值必须大于 0。高于底层 requestAnimationFrame 实现的值将无效。
terrainProvider : TerrainProvider
为地球提供表面几何图形的地形提供者。
terrainShadows : ShadowMode
确定地形是否从光源投射或阴影。
readonly timeline : Timeline
获取时间轴小部件。
trackedEntity : Entity |undefined
获取或设置相机当前正在跟踪的实体实例。
readonly trackedEntityChanged : Event
获取被跟踪实体更改时引发的事件。
指示是否使用浏览器推荐的分辨率的布尔标志。如果为 true,则忽略浏览器的设备像素比并改用 1.0,有效地基于 CSS 像素而不是设备像素进行渲染。这可以提高具有高像素密度的功能较弱的设备的性能。当为 false 时,渲染将以设备像素为单位。
Viewer#resolutionScale
无论此标志是真还是假都将生效。
-
Default Value:
true
获取或设置此小部件是否应控制渲染循环。如果设置为 true,小部件将使用
requestAnimationFrame
来执行小部件的渲染和调整大小,以及驱动模拟时钟。如果设置为 false,则必须手动调用
resize
、
render
方法作为自定义渲染循环的一部分。如果在渲染过程中发生错误,会引发
Scene
的
renderError
事件并且该属性将被设置为 false。错误后必须将其设置回 true 才能继续渲染。
readonly vrButton : VRButton
获取 VRButton。
Methods
销毁小部件。如果从布局中永久删除小部件,则应调用。
使用提供的 mixin 扩展基本查看器功能。 mixin 可以向提供的查看器实例添加额外的属性、函数或其他行为。
Name | Type | Description |
---|---|---|
mixin
|
Viewer.ViewerMixin | 要添加到此实例的 Viewer mixin。 |
options
|
Object | 可选 要传递给 mixin 函数的选项对象。 |
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 )> | 要查看的实体、实体数组、实体集合、数据源、Cesium3DTileset、点云或图像层。您还可以传递一个解析为前面提到的类型之一的 Promise。 | ||||||||||||||||
options
|
Object |
具有以下属性的
可选
对象:
|
Returns:
一个 Promise,如果飞行成功则解析为 true,如果目标当前未在场景中可视化或飞行被取消,则解析为 false。//TODO:清理实体提及
这迫使小部件重新考虑其布局,包括小部件大小和信用位置。
Returns:
如果对象已被销毁,则为 true,否则为 false。
渲染场景。该函数会自动调用,除非
useDefaultRenderLoop
设置为 false;
调整小部件的大小以匹配容器大小。此函数会根据需要自动调用,除非
useDefaultRenderLoop
设置为 false。
异步设置相机以查看提供的实体、实体或数据源。如果数据源仍在加载过程中或可视化仍在加载中,则此方法在执行缩放之前等待数据准备好。
偏移量是本地东西北上参考系中的航向/俯仰/范围,以边界球的中心为中心。航向角和俯仰角在当地东西北上参考系中定义。航向是从 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 )> | 要查看的实体、实体数组、实体集合、数据源、Cesium3DTileset、点云或图像层。您还可以传递一个解析为前面提到的类型之一的 Promise。 |
offset
|
HeadingPitchRange | 可选 从本地东西北上参考框架中实体中心的偏移量。 |
Returns:
一个 Promise,如果缩放成功,则解析为 true;如果目标当前未在场景中可视化或缩放已取消,则解析为 false。
Type Definitions
查看器构造函数的初始化选项
Properties:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
animation
|
Boolean |
<optional>
|
true | 如果设置为 false,则不会创建动画小部件。 |
baseLayerPicker
|
Boolean |
<optional>
|
true | 如果设置为 false,则不会创建 BaseLayerPicker 小部件。 |
fullscreenButton
|
Boolean |
<optional>
|
true | 如果设置为 false,则不会创建 FullscreenButton 小部件。 |
vrButton
|
Boolean |
<optional>
|
false | 如果设置为 true,将创建 VRButton 小部件。 |
geocoder
|
Boolean | Array.< GeocoderService > |
<optional>
|
true | 如果设置为 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,则不会创建导航帮助按钮。 |
navigationInstructionsInitiallyVisible
|
Boolean |
<optional>
|
true | 如果导航说明最初应该可见,则为 true,如果在用户明确单击按钮之前不应显示导航说明,则为 false。 |
scene3DOnly
|
Boolean |
<optional>
|
false |
当
true
时,每个几何实例将仅以 3D 呈现以节省 GPU 内存。
|
shouldAnimate
|
Boolean |
<optional>
|
false |
true
时钟应该默认尝试提前模拟时间,则为 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 时有效。 |
imageryProvider
|
ImageryProvider |
<optional>
|
createWorldImagery() | 要使用的图像提供程序。此值仅在 `baseLayerPicker` 设置为 false 时有效。 |
terrainProvider
|
TerrainProvider |
<optional>
|
new EllipsoidTerrainProvider() | 要使用的地形提供程序 |
skyBox
|
SkyBox | false |
<optional>
|
天空盒用于渲染星星。当
undefined
时,使用默认的星星。如果设置为
false
,则不会添加天空盒、太阳或月亮。
|
|
skyAtmosphere
|
SkyAtmosphere | false |
<optional>
|
蔚蓝的天空,以及围绕着地球四肢的光芒。设置为
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 的时钟设置,并在 DataSource 的时钟更改时更新。如果要独立配置时钟,请将其设置为 false。 |
contextOptions
|
Object |
<optional>
|
上下文和 WebGL 创建属性对应于传递给
Scene
的
options
。
|
|
sceneMode
|
SceneMode |
<optional>
|
SceneMode.SCENE3D | 初始场景模式。 |
mapProjection
|
MapProjection |
<optional>
|
new GeographicProjection() | 在 2D 和哥伦布视图模式中使用的地图投影。 |
globe
|
Globe | false |
<optional>
|
new Globe(mapProjection.ellipsoid) |
在场景中使用的地球仪。如果设置为
false
,则不会添加地球。
|
orderIndependentTranslucency
|
Boolean |
<optional>
|
true | 如果为 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 | 如果设置为 true,将创建 ProjectionPicker 小部件。 |
requestRenderMode
|
Boolean |
<optional>
|
false |
如果为 true,则仅在需要时才会渲染帧,具体取决于场景中的变化。启用会减少应用程序的 CPU/GPU 使用率并在移动设备上使用更少的电池,但需要使用
Scene#requestRender
在此模式下显式渲染新帧。在对 API 的其他部分中的场景进行更改后,这在许多情况下是必要的。请参阅
使用显式渲染提高性能
。
|
maximumRenderTimeChange
|
Number |
<optional>
|
0.0 | 如果 requestRenderMode 为 true,则此值定义在请求渲染之前允许的模拟时间的最大变化。请参阅 使用显式渲染提高性能 。 |
depthPlaneEllipsoidOffset
|
Number |
<optional>
|
0.0 | 调整 DepthPlane 以解决椭球零海拔以下的渲染伪影。 |
msaaSamples
|
Number |
<optional>
|
1 | 如果提供,此值控制多重采样抗锯齿的速率。典型的多重采样率为每像素 2、4 甚至有时 8 个样本。更高的 MSAA 采样率可能会影响性能以换取改进的视觉质量。此值仅适用于支持多样本渲染目标的 WebGL2 上下文。 |
使用附加功能扩充 Viewer 实例的函数。
Name | Type | Description |
---|---|---|
viewer
|
Viewer | 查看器实例。 |
options
|
Object | 要传递给 mixin 函数的选项对象。 |