类名 SceneViewCesium

# new SceneViewCesium(options)

视图类

参数

名称 类型 默认值 描述
options Object

构造参数

map Map

图层管理器

viewId String

图层容器ID

innerView Object

实际三维引擎的场景 cesium对应viewer

center Point new Point({coordinates:[0,0]})

地图视图中心点

scale Number

地图视图比例尺

zoom Number

地图视图层级

minZoom Number 0

最小层级

maxZoom Number 19

最大层级

popup Object

地图弹框

extent Extent

场景视图初始化时,跳转的范围,如果设置了就会跳转,不设置就不跳转

支持如下方法:
[1、视点跳转]
[2、导出场景视图的配置文件]
[3、通过一个配置生成一个场景视图对象]
[4、屏幕像素坐标点转地理坐标点]
[5、地理坐标点转屏幕像素坐标点]
[6、获取当前视图容器的宽高]
[7、获取当前视图中心点]
[8、获取当前视图的地理范围]
[9、获取当前层级]
[10、获取当前比例尺]
11、注册事件
12、移除事件
[15、获取实际的M3DSet对象]
[16、设置缩视野中心]
[17、设置视图的地理范围]
[18、屏幕快照]
[19、图元检测]

示例

初始化三维视图对象

// ES5引入方式
const { Map, SceneViewCesium } = zondy
// ES6引入方式
import { Map, SceneViewCesium } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneViewCesium({
  // 视图id
  viewId: "mapgis-3d-viewer",
  // 图层管理容器
  map: map
});

外部初始化三维视图对象

// ES5引入方式
const { Map, SceneViewCesium } = zondy
// ES6引入方式
import { Map, SceneViewCesium } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
const map = new Map();
let innerView = new Cesium.Viewer(viewId);
// 初始化地图视图对象
const sceneView = new SceneViewCesium({
  // 视图id
  viewId: "mapgis-3d-viewer",
  // 图层管理容器
  map: map,
  // 外部创建的三方cesium对象
  innerView: innerView
});

继承关系

成员变量

成员变量概述

名称 类型 描述
center Point

地图视图中心点

engineType Object

引擎类型,为'cesium'

extent Extent

地图视图范围

height Number

地图视图高度

maxZoom Number

地图视图最大层级

minZoom Number

地图视图最小层级

popup Popup

地图弹框popup

scale Number

地图视图比例尺

spatialReference SpatialReference

视图空间参考系

stationary Boolean

地图视图是否静止

width Number

地图视图宽度

zoom Number

地图视图层级

成员变量详情

Point

# center

地图视图中心点

Object

# readonly engineType

引擎类型,为'cesium'

Extent

# extent

地图视图范围

Number

# readonly height

地图视图高度

Number

# maxZoom

地图视图最大层级

Number

# minZoom

地图视图最小层级

Popup

地图弹框popup

Number

# scale

地图视图比例尺

SpatialReference

# readonly spatialReference

视图空间参考系

Boolean

# readonly stationary

地图视图是否静止

Number

# readonly width

地图视图宽度

Number

# zoom

地图视图层级

方法

方法概述

名称 返回值类型 描述
fromJSON SceneViewCesium

flyTo

视点跳转

getCenter Object

getExtent Extent

getInnerLayer Array.<MapGISM3DSet> | MapGISM3DSet | undefined

getScale Number

获取当前比例尺

getSize Object

getZoom Number

获取当前层级

goTo

视点跳转为给定的目标

hitTest Array

穿透检测,图元拾取。目前支持graphic类型拾取结果,支持图层类型GraphicLayer,FeatureLayer。

setCenter

setExtent

takeScreenshot Promise

屏幕快照

toJSON Object

toMap Point

toScreen Object

方法详情

# static fromJSON(json)

通过一个配置生成一个场景视图对象

参数

名称 类型 描述
json Object

场景视图配置

SceneViewCesium

# flyTo(options)

视点跳转

参数

名称 类型 默认值 描述
options

跳转参数

center Array

相机要跳转的中心点,单位度,[精度,纬度,高程]

duration Number 2

相机飞行到终点时的持续时间,单位秒

extent Extent

相机要飞行的某个范围

orientation Object

相机飞行到终点时的视角朝向,包含偏航角、俯仰角和翻滚角

complete function

相机飞行到终点时触发的函数

cancel function

相机取消飞行时触发的函数

endTransform Object

相机飞行到终点时的矩阵

maximumHeight Number

相机飞行的最大高度

pitchAdjustHeight Number

如果相机的飞行高度高于该值,则调整飞行过程中的俯仰角使相机视角向下看,并将地球保持在相机视窗中

flyOverLongitude Number

强制让相机绕着地球飞行指定经度,直到到达终点位置

flyOverLongitudeWeight Number
示例

按范围跳转

// ES5引入方式
const { Map, SceneViewCesium } = zondy
const { IGSMapImageLayer } = zondy.Layer
const { LayerEventType } = zondy.Enum
const { Extent } = zondy.Geometry
// ES6引入方式
import { Map, SceneViewCesium, IGSMapImageLayer, LayerEventType, Extent } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneViewCesium({
  // 视图id
  viewId: "mapgis-3d-viewer",
  // 图层管理容器
  map: map
});
// 添加一个地图图层
const igsMapImageLayer = new IGSMapImageLayer({
  url: 'http://192.168.82.89:8089/igs/rest/services/Map/Hubei4326/MapServer'
});
map.add(igsMapImageLayer);
// 图层加载完毕
igsMapImageLayer.on(LayerEventType.layerViewCreated, function (result) {
  console.log("加载完毕:", result.layer)
  // 视点跳转
  sceneView.flyTo({
    extent: new Extent({
      xmin: 108.34341,
      ymin: 29.01258222765238,
      xmax: 116.15093956121316,
      ymax: 33.29320177370206
    })
  })
})

跳转中心点

// ES5引入方式
const { Map, SceneViewCesium } = zondy
const { IGSMapImageLayer } = zondy.Layer
const { LayerEventType } = zondy.Enum
// ES6引入方式
import { Map, SceneViewCesium, IGSMapImageLayer, LayerEventType } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneViewCesium({
  // 视图id
  viewId: "mapgis-3d-viewer",
  // 图层管理容器
  map: map
});
// 添加一个地图图层
const igsMapImageLayer = new IGSMapImageLayer({
  url: 'http://192.168.82.89:8089/igs/rest/services/Map/Hubei4326/MapServer'
});
map.add(igsMapImageLayer);
// 图层加载完毕
igsMapImageLayer.on(LayerEventType.layerViewCreated, function (result) {
  console.log("加载完毕:", result.layer)
  // 视点跳转
  sceneView.flyTo({
    center: [113, 30, 1000000]
  })
})

# getCenter()

获取当前视图中心点

当前视图容器的宽高对象

Object

# getExtent()

获取当前视图的地理范围

获取当前视图的地理范围

Extent

# getInnerLayer(layer)

参数

名称 类型 描述
layer IGSSceneLayer | IGSSceneSubLayer

场景图层或场景图的子图层

MapGISM3DSet数组或MapGISM3DSet对象或空对象

Array.<MapGISM3DSet> | MapGISM3DSet | undefined

# getScale()

获取当前比例尺

比例尺 实际10000米:地图1米

Number

# getSize()

获取当前视图容器的宽高,单位像素

当前视图容器的宽高对象

Object

# getZoom()

获取当前层级

层级

Number

# goTo(goToTarget, options)

视点跳转为给定的目标

参数

名称 类型 默认值 描述
goToTarget

跳转参数

center Point | Array

视图跳转中心点

zoom Number

视图跳转层级

scale Number

视图跳转比例尺

target Geometry | Array.<Geometry> | Collection.<Geometry>

按范围跳转

options

动画参数

animate Boolean true

新视图的过渡是否开启动画,默认开启动画

duration Number 200

动画的持续时间,以毫秒为单位,默认200毫秒

示例

中心点跳转示例

// ES5引入方式
const { Map, SceneViewCesium } = zondy
// ES6引入方式
import { Map, SceneViewCesium } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
map = new .Map();
// 初始化地图视图对象
sceneView = new SceneViewCesium({
  // 视图id
  viewId: "view-id",
  // 图层管理容器
  map: map
});
// 视点跳转
sceneView.goTo({
  // 跳转中心点
  center: [115.47643872463577, 30.980700423496124],
  // 地图层级
  zoom: 8
});

按范围跳转示例

// ES5引入方式
const { Map, SceneViewCesium } = zondy
const { Extent, Circle } = zondy.Geometry
// ES6引入方式
import { Map, SceneViewCesium } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
map = new Map();
// 初始化地图视图对象
sceneView = new SceneViewCesium({
  // 视图id
  viewId: "view-id",
  // 图层管理容器
  map: map
});
const extent1 = new Extent({
  xmin: 111.88463529230717,
  ymin: 28.646934514163803,
  xmax: 116.89989408129225,
  ymax: 33.07991791253288,
})
const geometry2 = new Circle({
  center: [111, 29],
  radius: 100,
  radiusUnit: "kilometers",
})
sceneView
  .goTo({
    target: [extent1, geometry2],
  })
  .then(() => {
    console.log("gotoExtent callback")
  })

# hitTest(screenPoint)

穿透检测,图元拾取。目前支持graphic类型拾取结果,支持图层类型GraphicLayer,FeatureLayer。

参数

名称 类型 描述
screenPoint Object

屏幕像素坐标点,例如{ x: 900, y: 500 }

图元检测结果

Array
示例

根据基础图层对象或者图层id查询并返回实际图层

// ES6引入方式
import { SceneViewCesium } from "@mapgis/webclient-leaflet-plugin";
import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle, IGSFeatureLayer, IGSTileLayer } from "@mapgis/webclient-common";
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
this.sceneView = new SceneViewCesium({
  // 视图id
  viewId: "mapgis-3d-viewer",
  // 图层管理容器
  map: map,
})
// 创建一个要素
const feature = [
  new Feature({
    id: '11111',
    geometry: new Point({ coordinates: [113, 30] }),
  }),
  new Feature({
    id: '11112',
    geometry: new Point({ coordinates: [113, 30.15] }),
  }),
  new Feature({
    id: '11112',
    geometry: new Point({ coordinates: [113, 35] }),
  }),
]
// 初始化几何图层
const graphicsLayer = new GraphicsLayer({
  graphics:feature
})
map.add(this.graphicsLayer)
const result = this.sceneView.hitTest({x:1000,y:600})

# setCenter(value)

设置缩视野中心

参数

名称 类型 描述
value Point

视图中心

# setExtent(value)

设置视图的地理范围,设置后会跳转到该范围

参数

名称 类型 描述
value Extent

视图的地理范围

# takeScreenshot(optionsopt)

屏幕快照

参数

名称 类型 默认值 描述
options Object {}

屏幕快照配置配置

format PictureFormat PictureFormat.png

图片格式,支持png,jpeg格式

filename String 'screenshotFile'

下载文件名

width Number

图片宽度

height Number

图片高度

x Number

图片原点x

y Number

图片原点y

isDownload Boolean true

是否下载图片

屏幕快照 {dataUrl String },且浏览器会下载图片

Promise
示例

屏幕快照

// ES5引入方式
var { Map, SceneViewCesium } = zondy
var { PictureFormat } = zondy.Enum
// ES6引入方式
import { Map, SceneViewCesium } from "@mapgis/webclient-cesium-plugin"
import { PictureFormat } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneViewCesium({
  // 二维场景视图的容器(html的div标签)ID
  viewId: "二维场景视图的容器的id",
  // 图层管理容器
  map: map
})
// 设置屏幕快照参数
const screenshotOptions: {
   format: PictureFormat.png
}
// 开始屏幕快照
sceneView.takeScreenshot(screenshotOptions).then((result) => {
  // 获取base64格式的url字符串
  console.log("dataUrl:", result.dataUrl)
})

# toJSON()

导出场景视图的配置文件

导出的配置文件

Object

# toMap(screenPoint)

屏幕像素坐标点转地理坐标点

参数

名称 类型 描述
screenPoint Object

屏幕像素坐标点,传入的 x范围为[0,canvas.width - 1],传入的 x范围为[0,canvas.height - 1],例如{ x: 900, y: 500 }

地理坐标点

Point
示例

屏幕像素坐标点转地理坐标示例

// ES6引入方式
import { SceneViewCesium } from "@mapgis/webclient-cesium-plugin"
import { Map, Point } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneViewCesium({
 // 视图id
 viewId: "mapgis-3d-viewer",
 // 图层管理容器
 map: map,
})
const screenPoint = { x: 900, y: 500 }
sceneView.toMap(screenPoint)

# toScreen(point)

地理坐标点转屏幕像素坐标点

参数

名称 类型 描述
point Point

地理坐标点

屏幕像素坐标点

Object
示例

地理坐标点转屏幕像素坐标示例

// ES6引入方式
import { SceneViewCesium } from "@mapgis/webclient-cesium-plugin"
import { Map, Point, Extent } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const SceneViewCesium = new SceneViewCesium({
  // 视图id
  viewId: "mapgis-2d-viewer",
  // 图层管理容器
  map: map
});
const geoPoint = new Point({ coordinates: [123, 23, 0] })
sceneView.toScreen(geoPoint)