Class: Viewer

Viewer

API使用的开始点，构造后就是我们所能看到的地球对象，里面有很多基础的属性， 比如：控件、图层、场景等。

 const viewer = new Viewer("cesiumContainer", {
  imageryType: "GMap",
  locationBar: true,
  defaultView: new Position(
    118.7863,
    31.9087,
    801.6425,
    1.724684714172732,
    -53.783141852231246,
    0.008819224020548466
  )
});

new Viewer(container, options)

viewer/Viewer.js, line 58

构造一个对象

Name Type Description
container Element | String

Viewer的初始容器，包含Viewer(widget)的DOM元素或ID。
options Object

设置Viewer的属性的对象

Name Type Default Description
imageryType String "TMap" optional

在线地图的类型,`"TMap"--天地图,"AMap"--高德地图,"TencentMap"-腾讯地图, 'ArcGIS' --ArcGIS影像
onlineMapType String "satellite" optional

地图底图类型,"normal"--街道矢量图,"satellite"--卫星图 midnight-blue--午夜蓝/light-blue---淡蓝/blue-black--蓝黑/light-gray--浅灰/dark--暗色
tileProxy String optional

瓦片代理服务url
viewerMode String "3D" optional

场景模式设置，支持三种类型 2D/2.5D/3D
defaultCenter Position

当场景模式为 2D 时有用，不设置会 自动计算当前视图的中心点坐标,可以通过 Viewer.centerPosition 获取坐标值
minLevel Number 0 optional

默认底图资源请求最小层级
maxLevel Number 18 optional

默认底图资源请求最大层级
locationBar Boolean true optional

用于启用或者禁用位置兰控件
defaultView Position

设置三维初始视角，有默认值，可以通过 Viewer.cameraPosition 获取相关值
underground Boolean false optional

是否开启地下模式
globeTranslucency Object

地表透明度设置,只有当开启地下模式的时候才有效

Name Type Default Description
alpha Number 0.5 optional

地表透明度
undergroundColor Color Color.SLATEGRAY optional

地表透明的地下背景色
depthTestAgainstTerrain Boolean true optional

是否开启地形检测
navigation Object

导航的一些属性设置对象

Name Type Default Description
enableCompass Boolean true optional

用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。 默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
enableZoomControls Boolean true optional

用于启用或禁用缩放控件。true是启用，false是禁用。 默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
enableDistanceLegend Boolean true optional

用于启用或禁用距离图例。 true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
enableCompassOuterRing Boolean true optional

用于启用或禁用指南针外环。 true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
备注 *

更多属性设置参照文档: https://cesium.com/docs/cesiumjs-ref-doc/Viewer.html?classFilter=viewer
debugQearth Boolean false optional

开启QEarth日志

Extends

  • Cesium/Viewer

Classes

Viewer

Members

readonlycameraPosition

用于获取当前视图相机位置，获取的位置信息一般用于设置 defaultView

readonlycenterPosition

获取当前视图中心点坐标

defaultCenter

设置/获取默认中心点,主要在二维模式下使用,通过 viewer.centerPosition获取值

defaultView

设置/获取默认视角,通过 viewer.cameraPosition获取值

depthTestAgainstTerrain

是否开启地面深度检测

globeTranslucency

设置/获取地表透明度

imageryType

设置/获取在线地图的类型,"TMap"--天地图, "GMap"--谷歌地图,"AMap"--高德地图,"BMap"--百度地图

isVR

开启/关闭VR模式

locationBar

是否开启 locationBar 控件

readonlyloop

获取相机移动结束后的触发状态

maxLevel

设置/获取默认底图的最大请求层级

minLevel

设置/获取默认底图的最小请求层级

onlineMapType

设置/获取地图底图类型 "normal"--街道矢量图,"satellite"--卫星图

pickingStyleCursor

是否设置了坐标拾取的鼠标样式

readonlyqeContainer

小部件或者一些前端元素的承载容器

underground

是否开启地下模式

readonlyviewBounds

获取当前视图的坐标范围

readonlyviewerEvent

viewer 的事件对象

viewerMode

设置场景模式

readonlyzoom

获取当前地图层级

Methods

addEffect(effect)

viewer/Viewer.js, line 912

添加粒子效果

Name Type Description
effect Effect

粒子类实例

addLayer(layer){Viewer}

viewer/Viewer.js, line 717

给场景中添加图层，用于分类展示图元

Name Type Description
layer Layer

图层对象
Returns:
Type Description
Viewer 返回当前视图对象

addLayerGroup(layerGroup){Viewer}

viewer/Viewer.js, line 644

添加图层组对象

Name Type Description
layerGroup LayerGroup

图层组对象
Returns:
Type Description
Viewer

addLayers(layers){Viewer}

viewer/Viewer.js, line 728

给场景中添加多个图层

Name Type Description
layers Array

图层数组
Returns:
Type Description
Viewer 返回当前视图对象

addTerrain(terrain){Viewer}

viewer/Viewer.js, line 841

添加地形

Name Type Description
terrain TerrainProvider

地形
Returns:
Type Description
Viewer

addWidget(widget){Widget}

viewer/Viewer.js, line 863

添加控件

Name Type Description
widget Widget

控件
Returns:
Type Description
Widget widget 控件

adjustModelBrightness(direction, brightness)

viewer/Viewer.js, line 1110

调节模型亮度

Name Type Default Description
direction Cartesian3

光照方向，以世界坐标表示的摄像机的视图方向 scene.camera.directionWC
brightness Number 1.4 optional

亮度

convertAnimationUTC2BJT()

viewer/Viewer.js, line 1158

将动画控件上面的国际时间转换为北京时间

convertTimelineUTC2BJT()

viewer/Viewer.js, line 1169

将时间线控件上面的国际时间转换为北京时间

eachLayer(method, context)

viewer/Viewer.js, line 825

批量操作当前地图上的全部图层

Name Type Description
method function

操作方法
context Object

this指向

flyTo(target, options){Promise.<boolean>}

viewer/Viewer.js, line 982

将相机飞到提供的实体、实体或数据源.如果数据源仍在加载过程中，或者可视化仍在加载，则此方法在执行飞行之前等待数据准备就绪。

Name Type Description
target Object

要查看的实体、实体数组、实体集合、数据源、Cesium3DTileset、点云或图像层。还可以传递一个promise，该promise将解析为前面提到的类型之一。
options Object

飞行相关参数设置

Name Type Description
duration Number

以秒为单位的飞行持续时间。如果省略， 会根据飞行的距离来计算一个理想的持续时间。
offset Object

定位之后的视角调整

  offset: {
    heading: Cesium.Math.toRadians(0.0), // 航向角（以弧度为单位）
    pitch: Cesium.Math.toRadians(-25), // 俯仰角（以弧度为单位）
    range: 100 // 距中心的距离,以米为单位
  }
maximumHeight number

飞行动画中的最高高度设置
Returns:
Type Description
Promise.<boolean> 一个Promise，如果成功完成了飞行，则为true；如果当前未在场景中看到目标，或者取消了飞行，则为false。

getAllLayerGroups(){Array.<LayerGroup>}

viewer/Viewer.js, line 1241

获取所有图层组，包括嵌套的

Returns:
Type Description
Array.<LayerGroup>

asyncgetAllLayersObj(){Map}

viewer/Viewer.js, line 1256

获取视图中已添加的所有图层对象

Returns:
Type Description
Map 返回 Map 结构数据

getLayer(id){Layer}

viewer/Viewer.js, line 786

根据id获取图层

Name Type Description
id String

图层id
Returns:
Type Description
Layer 返回获取的图层

getLayerGroups(){Array.<LayerGroup>}

viewer/Viewer.js, line 1227

获取图层组数组

Returns:
Type Description
Array.<LayerGroup>

getLayers(){Array}

viewer/Viewer.js, line 808

获取场景中已添加的图层数组(EntityLayer/PrimitivesLayer)

Returns:
Type Description
Array (EntityLayer/PrimitivesLayer)的图层数组

asyncgetLayerTreeNodes(){Array}

viewer/Viewer.js, line 1334

获取图层树结构数据

Returns:
Type Description
Array 返回树结构数据与 element-ui 树结构数据一致

asyncgetLayerVisibleById(id){Boolean}

viewer/Viewer.js, line 1305

通过图层唯一标识 id 获取图层的可见性

Name Type Description
id String

图层唯一标识 id
Returns:
Type Description
Boolean 图层可见性

getLightDirection(brightness, callback)

viewer/Viewer.js, line 1130

通过右键菜单，调节视图方向和亮度，找到模型合适的亮度，然后获取光照方向和亮度

Name Type Default Description
brightness Number 1.4 optional

亮度
callback function

回调函数，返回光照方向和亮度

getWidgets(){Array}

viewer/Viewer.js, line 896

获取当前地图上的全部控件

Returns:
Type Description
Array widgehsArray 返回控件数组

hasLayer(layer){boolean}

viewer/Viewer.js, line 776

检查是否包含该图层

Name Type Description
layer Layer

待检查图层
Returns:
Type Description
boolean

locateTo(target, isFlyTo, params){Promise}

viewer/Viewer.js, line 1036

根据坐标进行视图定位

Name Type Default Description
target Postion | Object

实体位置坐标;要查看的实体、实体数组、实体集合、数据源、Cesium3DTileset、点云或图像层。还可以传递一个promise，该promise将解析为前面提到的类型之一
isFlyTo Boolean false

是否有飞行动画，进入到设定的视角
params Object

其他可选参数

Name Type Default Description
lngPadding Number 0 optional

经度方向的偏移，单位米
latPadding Number 0 optional

纬度方向的偏移，单位米
altPadding Number 0 optional

视高方向的偏移，单位米
duration Number

当isFlyTo = true起作用，以秒为单位的飞行持续时间。如果省略， 会根据飞行的距离来计算一个理想的持续时间。
offset Object

定位之后的视角调整

  offset: {
    heading: Cesium.Math.toRadians(0.0), // 航向角（以弧度为单位）
    pitch: Cesium.Math.toRadians(-25), // 俯仰角（以弧度为单位）
    range: 100 // 距中心的距离,以米为单位
  }
maximumHeight number

飞行动画中的最高高度设置
Returns:
Type Description
Promise 视图缩放或者飞行后的回调

off(type, callback, context){Boolean}

viewer/Viewer.js, line 698

移出事件

Name Type Description
type String

事件类型,参照注册类型
callback String

回调函数
context Object

this指向
Returns:
Type Description
Boolean 是否成功移出事件

on(type, callback, context){Object}

viewer/Viewer.js, line 675

绑定事件

Name Type Description
type String

事件类型

  // 事件类型说明
  'morphComplete' 在场景模式转换完成后触发事件
  'morphStart' 在场景模式转换前触发事件
  'addLayer' 添加图层后触发
  'removeLayer' 移出图层后触发
  // 鼠标事件类型参照 MouseEventType 对象
callback String

回调函数
context Object

this指向
Returns:
Type Description
Object 返回相关监听值，用于事件注销

removeDefaultLayers()

viewer/Viewer.js, line 749

从场景中移出默认图层，包含默认在线底图

removeEffect(effect)

viewer/Viewer.js, line 925

移除粒子效果

Name Type Description
effect Effect

粒子类实例

removeLayer(layer)

viewer/Viewer.js, line 741

从场景中移出图层

Name Type Description
layer Layer

图层对象

removeLayerGroup(layerGroup){Viewer}

viewer/Viewer.js, line 655

删除图层组对象

Name Type Description
layerGroup LayerGroup

图层组对象
Returns:
Type Description
Viewer

removeLayers(layers)

viewer/Viewer.js, line 763

从场景中移出多个图层

Name Type Description
layers Array

图层数组

removeTerrain()

viewer/Viewer.js, line 853

移出地形

removeWidget(widget){Widget}

viewer/Viewer.js, line 878

移除控件

Name Type Description
widget Widget

控件
Returns:
Type Description
Widget widget 控件

screenShot(name)

viewer/Viewer.js, line 938

截屏功能

Name Type Default Description
name String 'qearth-viewer' optional

截屏图片名字

setImageryLayer(imageryType, onlineMapType)

viewer/Viewer.js, line 1198

设置三维球体上在线地图的类型

Name Type Description
imageryType String

在线地图的类型,"TMap"--天地图,"GMap"--谷歌地图,"AMap"--高德地图,"BMap"--百度地图
onlineMapType String

地图底图类型,"normal"--街道矢量图,"satellite"--卫星图

setLayerVisibleById(id, visible)

viewer/Viewer.js, line 1283

通过图层唯一标识 id 设置图层可见性

Name Type Description
id String

图层唯一标识 id
visible Boolean

图层可见性

setViewport(target, isFlyTo, params)

viewer/Viewer.js, line 1067

设置三维视角

Name Type Default Description
target Postion

Position 相机位置
isFlyTo Boolean false

是否有飞行动画，进入到设定的视角
params Object

其他可选参数

Name Type Default Description
lngPadding Number 0 optional

经度方向的偏移，单位米
latPadding Number 0 optional

纬度方向的偏移，单位米
altPadding Number 0 optional

视高方向的偏移，单位米
completeCallback function

当isFlyTo = true起作用，飞行动画,移动结束后的回调事件
duration Number

当isFlyTo = true起作用，以秒为单位的飞行持续时间。如果省略， 会根据飞行的距离来计算一个理想的持续时间。

use(plugin)

viewer/Viewer.js, line 958

插件应用

Name Type Description
plugin *

zoomTo(target, offset){Promise.<boolean>}

viewer/Viewer.js, line 1005

异步设置相机以查看提供的实体、实体或数据源。如果数据源仍在加载过程中，或者可视化仍在加载，则此方法在执行缩放之前等待数据准备就绪。

Name Type Description
target Object

要查看的实体、实体数组、实体集合、数据源、Cesium3DTileset、点云或图像层。还可以传递一个promise，该promise将解析为前面提到的类型之一。
offset Object

定位之后的视角调整

  offset: {
    heading: Cesium.Math.toRadians(0.0), // 航向角（以弧度为单位）
    pitch: Cesium.Math.toRadians(-25), // 俯仰角（以弧度为单位）
    range: 100 // 距中心的距离,以米为单位
  }
Returns:
Type Description
Promise.<boolean> 一个Promise，如果缩放成功，则解析为true；如果当前未在场景中可视化目标，或者取消了缩放，则为false。