3D 场景主要接口,在给定的 DivId 中构建三维场景
<div id="viewer-container"></div>
let viewer = DC.Viewer('viewer-container')
global.viewer = viewer // 添加到全局变量
:::warning 如果开发使用的是 Vue 这样的 MVVM 框架,不要将 viewer、layer、overlay 添加到数据模型中。由于 3D 场景中会不停的刷新每一帧,如果将数据添加到数据模型中,长时间的话会导致浏览器的压力增大而奔溃。 :::
构造函数
{String | Cesium.Viewer } container:容器{Object} options:属性viewer//属性参数(可选)
const config = {
  "contextOptions": {
    "webgl": {
      "alpha": false, //背景
      "depth": true,
      "stencil": false,
      "antialias": true,
      "powerPreference": "high-performance",
      "premultipliedAlpha": true,
      "preserveDrawingBuffer": false,
      "failIfMajorPerformanceCaveat": false
    },
    "allowTextureFilterAnisotropic": true
  },
  "sceneMode": 3,
  //1: 2.5D,2: 2D,3: 3D
  "enableEventPropagation": false,
  //是否开启鼠标事件冒泡
  "enableMouseMovePick": false,
  // 是否开启鼠标移动拾取功能,开启后当覆盖物较多的情况下,帧率会下降
  "enableMouseOver": false
  //是否开启鼠标移入事件,需要开启鼠标移动拾取功能
}
{Element} container:场景容器 readonly{Element} widgetContainer:场景组件容器 readonly{Element} layerContainer:场景图层容器 readonly{Object} scene:场景 readonly,详情参考:Scene{Object} camera:相机 readonly,详情参考:Camera{Element} canvas:canvas 节点 readonly{Object} clock:时钟,详情参考:Clock{Object} dataSources
:数据资源集合,详情参考:DataSourceCollection{Object} imageryLayers
:瓦片集合,详情参考:ImageryLayerCollection{Object} entities:实体集合,详情参考:EntityCollection{Popup} popup:气泡窗口 readonly{ContextMenu} contextMenu:右击弹框 readonly{Tooltip} tooltip:提示框 readonly{MapSplit} mapSplit:地图分割 readonly{TilesetSplit} tilesetSplit:模型分割 readonly{SceneSplit} sceneSplit:场景分割 readonly{Compass} compass:罗盘 readonly{ZoomController} zoomController:罗盘 readonly{LocationBar} locationBar:坐标信息 readonly{DistanceLegend} distanceLegend:比例尺 readonly{LoadingMask} loadingMask:加载蒙层 readonly{Position} cameraPosition:相机位置 readonly{Number} resolution:分辨率 readonly{Number} zoom: 当前层级 readonly{Rect} viewBounds:视野范围 readonly{Boolean} enableEventPropagation: 是否开启鼠标事件冒泡{Boolean} enableMouseMovePick: 是否开启鼠标移动拾取功能,开启后当覆盖物较多的情况下,帧率会下降{Boolean} enableMouseOver: 是否开启鼠标移入事件,需要开启鼠标移动拾取功能设置属性
{Object} options:属性对象
this// 属性参数(可选)
const config = {
  "shadows": false,// 是否开启阴影
  "resolutionScale": 1,// 设置渲染分辨率的缩放比例
  "showAtmosphere": true,//是否显示大气层
  "showSun": true,//是否显示太阳
  "showMoon": true, //是否显示月亮
  "enableFxaa": true,//是否开启抗锯齿
  "msaaSamples": 1,//msaa抗拒出取样度
  "cameraController": { // 相机控制
    "enableRotate": true,// 是否可以旋转
    "enableTilt": true,// 是否可以翻转
    "enableTranslate": true,// 是否可以平移
    "enableZoom": true,// 是否可以缩放
    "enableCollisionDetection": true,// 是否支持碰撞检测
    "minimumZoomDistance": 1.0,// 最小缩放距离
    "maximumZoomDistance": 40489014.0// 最大缩放距离
  },
  "globe": {
    "show": true,// 是否显示地球
    "showGroundAtmosphere": true,// 显示地面大气
    "enableLighting": false,//是否开启灯光,开启后地球会根据当前时间启用灯光
    "depthTestAgainstTerrain": false, //是否开启深度测试
    "tileCacheSize": 100, // 默认瓦片缓存大小
    "preloadSiblings": false,//是否应预加载渲染同级图块
    "terrainExaggeration": 1,//地形夸张系数
    "terrainExaggerationRelativeHeight": 1,//地形相对高度夸张系数
    "baseColor": new DC.Color(0, 0, 0.5, 1), //地球默认底色
    "filterColor": newDC.Color(0, 0, 0, 0),//瓦片过滤色,设置后不可逆
    "translucency": { //地表透明
      "enabled": false, // 是否开启地表透明
      "backFaceAlpha": 1,  // 地球背面透明度
      "backFaceAlphaByDistance": null, //根据距离设置地球背面透明度: {near:400,nearValue:0.2,far:800,farValue:1}
      "frontFaceAlpha": 1,  // 地球正面透明度
      "frontFaceAlphaByDistance": null //根据距离设置地球正面透明度: {near:400,nearValue:0.2,far:800,farValue:1}
    }
  },
  "skyBox": {
    "sources": {}, // 六个面的贴图
    "show": true, //是否显示
    "offsetAngle": 0 //旋转角度
  }
}
设置翻转角度
{Number} min:最小角度{Number} max:最大角度返回值 this
changeSceneMode(sceneMode, duration)
改变场景模式
{Number} sceneMode:场景模式 ,2:2D,3:3D,2.5:2.5D{Number} duration:间隔时间返回值 this
changeMouseMode(mouseMode)
改变鼠标使用模式
{Number} mouseMode:鼠标模式,详情参考:DC.MouseMode返回值 this
addBaseLayer(baseLayers,options)
添加地图
{baseLayer|Array<baseLayer>} baseLayers:地图{Object} options:属性this//属性参数 (可选)
const options = {
  "name": "电子地图",//名称
  "iconUrl": "../preview.png",//缩略图
  "alpha": 1.0,
  "nightAlpha": 1.0,
  "dayAlpha": 1.0,
  "brightness": 1.0,
  "contrast": 1.0,
  "hue": 1.0,
  "saturation": 1.0,
  "gamma": 1.0
}
更改地图
{Number} index:地图索引返回值 this
getImageryLayerInfo(windowPosition)
获取瓦片信息
{Object} windowPosition:窗口坐标返回值 promise
setTerrain(terrain)
设置地形
{Terrain} terrain:地形返回值 this
addLayerGroup(layerGroup)
添加图层组
{LayerGroup} layerGroup:图层组返回值 this
removeLayerGroup(layerGroup)
移除图层组
{LayerGroup} layerGroup:图层组返回值 this
getLayerGroup(id)
获取图层组
{String} id:图层组 ID返回值 layerGroup
addLayer(layer)
添加图层
{Layer} layer:图层返回值 this
removeLayer(layer)
删除图层
{Layer} layer:图层返回值 this
getLayer(id)
获取图层
{String} id:图层 ID返回值 layer
getLayers()
获取所有图层,不包括地图
返回值 layer
eachLayer(method, context)
遍历所有图层
{Function} method:回调函数{Object} context:上下文,默认为 thisthis  viewer.eachLayer((layer) => {})
飞向目标
{VectorLayer|Overlay} target :目标{Number} duration:飞到位置时间,单位:秒返回值 this
zoomTo(target)
缩放到目标
{VectorLayer|Overlay} target :目标返回值 this
flyToPosition(position, completeCallback, duration)
飞到具体位置
{Position} position:位置{Function} completeCallback:飞完之后触发的回调{Number} duration:飞到位置时间,单位:秒返回值 this
zoomToPosition(position, completeCallback)
缩放到具体位置
{DC.Position} position:位置{Function} completeCallback:缩放完成后触发的回调返回值 this
flyToBounds(bounds,{heading,pitch,roll}, completeCallback, duration)
飞到指定的范围
{String|Array} bounds:范围,格式:[minX,minY,maxX,maxY]{Object} hpr:方位角{Function} completeCallback:飞完之后触发的回调{Number} duration:飞到位置时间,单位:秒返回值 this
zoomToBounds(bounds,{heading,pitch,roll}, completeCallback)
缩放到指定的范围
{String|Array} bounds:范围,格式:[minX,minY,maxX,maxY]{Object} hpr:方位角{Function} completeCallback:缩放完之后触发的回调返回值 this
on(type, callback, context)
事件订阅
{Object} type :订阅类型{Function} callback :订阅回调{Object} context :上下文返回值 this
once(type, callback, context)
事件订阅(一次)
{Object} type :订阅类型{Function} callback :订阅回调{Object} context :上下文返回值 this
off(type, callback, context)
取消事件订阅
{Object} type :订阅类型{Function} callback :订阅回调{Object} context :上下文返回值 this
destroy()
销毁三维场景
返回值 this
exportScene(name)
导出场景
{String} name :名称,默认为 scenethis气泡窗口
let popup = viewer.popup
popup.setContent('<div></div>')
{String} state:状态 readonly{Object} config:配置 writeOnly// 配置(可选),配置后会影响全局的popup的显示样式,请慎重。
const config = {
  "position": "center",// popup的位于鼠标的点击位置的方向,有:center,left ,right
  "customClass": "custom"// 添加自定义的Css 类名到popup中,多个用空格隔开
}
设置位置
{Cartesian3} position:世界坐标返回值 this
setContent(content)
设置内容
{String|Element} content:内容返回值 this
setWrapper(wrapper)
设置容器
{Element} wrapper:容器 (一般用于 MVVM 框架的模板)返回值 this
showAt(position, content)
设置内容
{Cartesian3} position:世界坐标{String|Element} content:内容返回值 this
hide()
隐藏气泡窗口
this右击菜单
let contextMenu = viewer.contextMenu
contextMenu.enable = true
contextMenu.DEFAULT_MENU = [
  {
    label: '测试',
    callback: (e) => {
    }, // e是一个对象主要包括 windowPosition,position,surfacePosition,overlay
    context: this,
  },
] // 设置默认的右击菜单,会影响全局右击菜单(慎用)。
{Boolean} enable:是否启用{String} state:状态 readonly{Array} DEFAULT_MENU:默认菜单,菜单的回调函数参数为一个对象 writeOnly提示框
let tooltip = viewer.tooltip
tooltip.enable = true
tooltip.showAt({ x: 100, y: 100 }, '测试')
{Boolean} enable:是否启用{String} state:状态 readonly设置位置
{Cartesian2} position:屏幕坐标{String|Element} content:内容this地图分割
let baseLayer_elc = DC.ImageryLayerFactory.createGoogleImageryLayer()
viewer.mapSplit.enable = true
viewer.mapSplit.addBaseLayer(baseLayer_elc, -1)
{Boolean} enable:是否启用{String} state:状态 readonly添加地图
{BaseLayer} baseLayer:地图{Number} splitDirection:分割方向,-1:左,0:无,1:右this模型分割
let tileset = new DC.Tileset('**/tileset.json')
tileset.setSplitDirection(1)
viewer.tilesetSplit.enable = true
viewer.tilesetSplit.addTileset(tileset)
{Boolean} enable:是否启用{String} state:状态 readonly添加地图
{Tileset} tileset:模型this场景分割
let tileset = new DC.Tileset('**/tileset.json')
tileset.setSplitDirection(1)
viewer.sceneSplit.enable = true
viewer.sceneSplit.addTileset(tileset)
{Boolean} enable:是否启用{String} state:状态 readonly添加地图
{BaseLayer} baseLayer:地图返回值 this
addTileset(tileset)
添加地图
{Tileset} tileset:模型this罗盘
viewer.compass.enable = true
{Boolean} enable:是否启用{String} state:状态 readonly缩放控制
viewer.zoomController.enable = true
{Boolean} enable:是否启用{String} state:状态 readonly坐标信息
viewer.locationBar.enable = true
{Boolean} enable:是否启用{String} state:状态 readonly比例尺
viewer.distanceLegend.enable = true
{Boolean} enable:是否启用{String} state:状态 readonly加载蒙层
viewer.loadingMask.enable = true
{Boolean} enable:是否启用{String} state:状态 readonly天空盒,详情参考
scene.skyBox = new DC.SkyBox({
  sources: {
    positiveX: 'skybox_px.png',
    negativeX: 'skybox_nx.png',
    positiveY: 'skybox_py.png',
    negativeY: 'skybox_ny.png',
    positiveZ: 'skybox_pz.png',
    negativeZ: 'skybox_nz.png',
  },
})
构造函数
{Object} options:配置skyBox//options(可选)
const options = {
  "sources": {},// 六个面的贴图
  "show": true//显示
}
{Object} sources:六个面的贴图{Boolean} show:显示近地天空盒,详情参考
scene.skyBox = new DC.GroundSkyBox({
  sources: {
    positiveX: 'skybox_px.png',
    negativeX: 'skybox_nx.png',
    positiveY: 'skybox_py.png',
    negativeY: 'skybox_ny.png',
    positiveZ: 'skybox_pz.png',
    negativeZ: 'skybox_nz.png',
  },
})
构造函数
{Object} options:配置skyBox//options(可选)
const options = {
  "sources": {},// 六个面的贴图
  "show": true,//显示
  "offsetAngle": 0//旋转角度
}
{Object} sources:六个面的贴图{Boolean} show:显示{Number} offsetAngle:旋转角度坐标类,用于描述物体在场景中的具体位置,采用右手标准
let position = new DC.Position(120, 22, 102)
let position1 = DC.Position.fromString('120,22,102')
let position2 = DC.Position.fromArray([120, 22, 102])
let position3 = DC.Position.fromObject({ lng: 120, lat: 22, height: 102 })
构造函数
{Number} lng:经度{Number} lat:纬度{Number} alt:高度,单位:米,默认:0{Number} heading:偏航角度,可能其他框架作 yaw,表示绕 Z 轴旋转。默认:0{Number} pitch:俯仰角度,表示绕 Y 轴旋转。默认:0{Number} roll:翻转角度,表示绕 X 轴旋转。默认:0position{Number} lng:经度{Number} lat:纬度{Number} alt:高度,单位:米,默认:0{Number} heading:偏航角度,可能其他框架作 yaw,表示绕 Z 轴旋转。默认:0{Number} pitch:俯仰角度,表示绕 Y 轴旋转。默认:0{Number} roll:翻转角度,表示绕 X 轴旋转。默认:0序列化
返回值 string
copy()
复制一个新的位置
返回值 position
toString()
将坐标字符化
返回值 string
toArray()
将坐标数组化
返回值 array
toObject()
将坐标对象化
Object将字符化坐标转换为坐标对象
{String} str:字符化坐标返回值 position
fromArray(array)
将数组化坐标转换为坐标对象
{Array} array:数组化坐标返回值 position
fromObject(obj)
将 Json 对象坐标转换为坐标对象
{Object} obj:Json 对象坐标返回值 position
fromCoordString(str) deprecated
字符坐标串转换为坐标对象
{String} str:字符坐标串返回值 position
fromCoordArray(array) deprecated
坐标数组转换为坐标对象
{Array<String|Number>} array:坐标数组返回值 position
deserialize(valStr)
反序列化
{String} valStr:序列化的对象position颜色类
let red = DC.Color.RED
{Color} RED:红色{Color} YELLOW:黄色{Color} WHITE:白色{Color} GREEN:绿色tileset 样式,用于设置 3dtiles 的颜色设置
let style = new DC.TilesetStyle()
style.color = {
  conditions: [
    ['${floor} >= 5', 'rgb(198, 106, 11)'],
    ['true', 'rgb(127, 59, 8)'],
  ],
}
朱莉安日历
let date = DC.JulianDate.now()
当前朱莉安时间
返回值 date
fromDate(date)
通过 Js 时间创建朱莉安时间
{Date} date:Js 时间date矩形相关函数
let r = DC.Rectangle.fromDegrees(10, 20, 12, 31)
回调属性,用户通过自定义回调函数来返回需要的值。回调函数中,用户可以使用 time 给定 value,也可以自定设置。
let position = new DC.Position(120, 20)
let point = new DC.Point(position)
let size = 0
point.setStyle({
  pixelSize: new DC.CallbackProperty((time) => {
    size += 1
    if (size == 10) {
      size = 0
    }
    return size
  }),
})
坐标解析工具类,可简写为 DC.P
let position = DC.P.parsePosition('123,32,0')
解析坐标为 DC.Position
{String|Array|Position} position:坐标返回值 position
parsePositions(positions)
解析坐标为 Array
{String|Array} positions: 坐标返回值 array
parsePointCoordToArray(position)
解析点位坐标为数组
{String|Position} position:点位坐标返回值 array
parsePolylineCoordToArray(positions)
解析线坐标为二维数组
{String|Array} positions:线坐标返回值 array
parsePolygonCoordToArray(positions,loop)
解析面坐标为三维数组
{String|Array} positions:面坐标{Boolean} loop:闭合array坐标转换工具类 ,可简写为 DC.T
let cartesian3 = DC.T.transformWGS84ToCartesian(new DC.Position(120, 20))
世界坐标转换为 84 坐标
{Cartesian3} cartesian:世界坐标返回值 position
transformWGS84ToCartesian(position)
84 坐标转换为世界坐标
{Position} position:84 坐标返回值 cartesian
transformWGS84ToCartographic(position)
84 坐标转换为制图坐标
{Position} position:84 坐标返回值 cartographic
transformCartesianArrayToWGS84Array(cartesianArr)
世界坐标数组转 84 坐标数组
{Array<cartesian3>} cartesianArr:世界坐标数组返回值 array
transformWGS84ArrayToCartesianArray(WGS84Arr)
84 坐标数组转世界坐标数组
{Array<cartesian3>} WGS84Arr:84 坐标数组返回值 array
transformWGS84ToMercator(position)
84 坐标转 Mercator
{Position} position:84 坐标返回值 position
transformMercatorToWGS84(position)
Mercator 坐标转 84
{Position} position:Mercator 坐标返回值 position
transformWindowToWGS84(position,viewer)
屏幕坐标转 84
{Object} position: 屏幕坐标,格式{x:1,y:1}{Viewer} viewer:3D 场景返回值 position
transformWGS84ToWindow(position,viewer)
84 转屏幕坐标
{Position} position: 84 坐标{Viewer} viewer:3D 场景Object国内坐标转换工具
let point = DC.CoordTransform.BD09ToGCJ02(120, 20)
百度坐标系 (BD-09) 的转换 火星坐标系 (GCJ-02)
{Number} lng:经度{Number} lat:纬度返回值 []
GCJ02ToBD09(lng, lat)
火星坐标系 (GCJ-02) 转换为 百度坐标系 (BD-09)
{Number} lng:经度{Number} lat:纬度返回值 []
WGS84ToGCJ02(lng, lat)
WGS-84 转换为 火星坐标系 (GCJ-02)
{Number} lng:经度{Number} lat:纬度返回值 []
GCJ02ToWGS84(lng, lat)
火星坐标系 (GCJ-02) 转换为 WGS-84
{Number} lng:经度{Number} lat:纬度[]基本函数类
面积,单位:平方米
{Array<Position>} positions: 点位数据返回值 number
bounds(positions , expand)
边界
{Array<Position>} positions: 点位数据{Number}} expand: 扩展比例:0~1返回值 object
mid(start , end)
两点之间的中心点
start: 开始位置end: 结束位置返回值 position
center(positions)
中心点
{Array<Position>} positions: 点位数据返回值 position
distance(positions)
距离,单位:米
{Array<Position>} positions: 点位数据返回值 number
heading(start,end)
偏转角度,单位:度
start: 开始位置end: 结束位置返回值 number
parabola(start, end,height,count)
抛物线
start: 开始位置end: 结束位置{Number} height: 最高点高度{Number} count: 点位数量Array工具类
生成 uuid
{String} prefix:前缀,默认为 D返回值 string
merge(dest, …sources)
属性合并
{Object} dest:目标对象{Object|Array} sources:需要合并的属性返回值 object
emptyImageUrl()
空图片
防抖
节流
Dom 工具类
创建 dom
{String} id: 要素 ID返回值 Element
create(tagName, className, [container])
创建 dom
{String} tagName: 标签名{String} className: 样式名,多个用空格隔开{Element} [container]: 父容器返回值 Element
addClass(el, name)
添加类名
参数
{Element} el: 要素{String} className: 样式名,多个用空格隔开removeClass(el, name)
删除类名
参数
{Element} el: 要素{String} className: 样式名,多个用空格隔开addClass(el, name)
添加类名
参数
{Element} el: 要素{String} className: 样式名,多个用空格隔开createSvg(width, height, path, [container])
添加类名
{Number} width: 宽度{Number} height: 高度{String} path: 路径{Element} [container]: 父容器返回值 svg
parseDom(domStr, [withWrapper], [className])
字符串转 Dom
{String} domStr: dom 字符串{Boolean} withWrapper:返回是否含有父容器{String} className: 类样式名称返回值 Element | Nodes
enterFullscreen(el)
进入全屏
参数
{Element} el: 要素exitFullscreen()
退出全屏
创建视频节点
{String} url: 视频地址{String} className: 样式名,多个用空格隔开{Element} [container]: 父容器Element | Nodes