MapGIS Client for JavaScript API

new SceneView(options)

view/SceneView.js, line 43

支持如下方法：

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

场景视图类
继承自zondy.SceneView

Name Type Description

options

Object

构造参数

Name	Type	Default	Description
`map`	Map		可选图层管理器
`viewId`	String		可选图层容器ID
`innerView`	Object		可选实际三维引擎的场景 cesium对应viewer
`center`	Point	new Point({coordinates:[105.1250000000032,24.427133220306196]})	可选地图视图中心点。如果中心点有高度，则优先使用中心点（经纬高）定位；如果中心点没有高度，看是否存在zoom/scale，使用center和zoom/scale定位（同时设置scale和zoom时，scale优先于zoom），否则默认zoom为到底3级。如果没有设置center，设置extent，则以extent定位。
`scale`	Number		可选地图视图比例尺。如果scale、zoom、extent都未设置，那么初始化scale默认scale为36978669.4318207。
`zoom`	Number		可选地图视图层级。如果scale和zoom都未设置。
`extent`	Extent		可选场景视图初始所在的范围。如果没有设置center，但设置extent了，则地图视图定位到extent范围内。
`maxScale`	Number		可选地图视图的最大比例尺（比例尺的分母，该值越小，比例尺越大）。视图的当前比列尺不会大于地图视图的最大比例尺。默认值为undefined，undefined表示用户未设置，地图视图会根据当前加载的图层，自动计算maxScale、minScale的值。如果用户设置了该值，则地图视图将直接采用用户设置的值。maxScale的值应该始终小于minScale的值。
`minScale`	Number		可选地图视图的最小比例尺（比例尺的分母，该值越大，比例尺越小）。视图的当前比列尺不会小于地图视图的最小比例尺。默认值为undefined，undefined表示用户未设置，地图视图会根据当前加载的图层，自动计算maxScale、minScale的值。如果用户设置了该值，则地图视图将直接采用用户设置的值。minScale的值应该始终大于maxScale的值。
`maxZoom`	Number		可选最大缩放级数。优先级低于maxScale
`minZoom`	Number		可选最小缩放级数。优先级低于minScale
`popup`	Object		可选地图弹框
`extensionOptions`	Object	{}	可选初始化视图的额外参数，可以通过该参数传入引擎原生的构造参数
`logoScale`	Number	1	可选商标缩放系数。默认为1倍，图标大小为宽98px、高28px。
`initialGoTo`	Boolean	true	可选是否在视图构造时根据视图的center、scale、zoom、extent属性进行视图范围的设置

Fires

BaseView#event:鼠标点击事件
BaseView#event:鼠标双击事件
BaseView#event:鼠标按下事件
BaseView#event:鼠标抬起事件
BaseView#event:鼠标右键点击事件
BaseView#event:鼠标移动事件
BaseView#event:地图视图改变事件

Examples

初始化三维视图对象

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

外部初始化三维视图对象

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

Extends

zondy.SceneView

Members

centerPoint

地图视图中心点

engineTypeEngineType

引擎类型，为'cesium'

extensionOptionsObject

初始化视图的额外参数，可以通过该参数传入引擎原生的构造参数

extentExtent

地图视图范围

heightNumber

地图视图高度

logoScaleNumber

商标缩放系数

maxZoomNumber

地图视图最大层级

minZoomNumber

地图视图最小层级

popupPopup

地图弹框popup

scaleNumber

地图视图比例尺

spatialReferenceSpatialReference

视图空间参考系

stationaryBoolean

地图视图是否静止

widthNumber

地图视图宽度

zoomNumber

地图视图层级

Methods

SceneView.fromJSON(json){SceneView} view/SceneView.js, line 2315

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

Name	Type	Description
`json`	Object	场景视图配置

Returns:

Type	Description
SceneView

destroy() view/SceneView.js, line 2017

销毁视图对象

flyTo(options) view/SceneView.js, line 718

视点跳转

Name Type Description

options

跳转参数

Name	Type	Default	Description
`center`	Array		可选相机要跳转的中心点，单位度，[精度，纬度，高程]
`duration`	Number	2	可选相机飞行到终点时的持续时间，单位秒
`extent`	Extent		可选相机要飞行的某个范围
`orientation`	Object		可选相机飞行到终点时的视角朝向，包含偏航角、俯仰角和翻滚角
`complete`	function		可选相机飞行到终点时触发的函数
`cancel`	function		可选相机取消飞行时触发的函数
`endTransform`	Object		可选相机飞行到终点时的矩阵
`maximumHeight`	Number		可选相机飞行的最大高度
`pitchAdjustHeight`	Number		可选如果相机的飞行高度高于该值，则调整飞行过程中的俯仰角使相机视角向下看，并将地球保持在相机视窗中
`flyOverLongitude`	Number		可选强制让相机绕着地球飞行指定经度，直到到达终点位置
`flyOverLongitudeWeight`	Number		可选

Examples

按范围跳转

// ES5引入方式
const { Map } = zondy
const { IGSMapImageLayer } = zondy.layer
const { LayerEventType } = zondy.Enum
const { Extent } = zondy.geometry
const { SceneView } = zondy.cesium
// ES6引入方式
import { Map, SceneView, IGSMapImageLayer, LayerEventType, Extent } from "@mapgis/webclient-common"
import { SceneView} from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
  // 视图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 } = zondy
const { IGSMapImageLayer } = zondy.layer
const { LayerEventType } = zondy.Enum
const { SceneView } = zondy.cesium
// ES6引入方式
import { Map, IGSMapImageLayer, LayerEventType } from "@mapgis/webclient-common"
import { SceneView } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
  // 视图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} view/SceneView.js, line 1273

获取当前视图中心点

Returns:

Type	Description
Object	当前视图容器的宽高对象

getExtent(){Extent} view/SceneView.js, line 1321

获取当前视图的地理范围

Returns:

Type	Description
Extent	获取当前视图的地理范围

getScale(){Number} view/SceneView.js, line 1909

获取当前比例尺

Returns:

Type	Description
Number	比例尺实际10000米:地图1米

getSize(){Object} view/SceneView.js, line 1261

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

Returns:

Type	Description
Object	当前视图容器的宽高对象

getZoom(){Number} view/SceneView.js, line 1851

获取当前层级

Returns:

Type	Description
Number	层级

goTo(goToTarget, options){Promise.<Boolean>} view/SceneView.js, line 862

视点跳转为给定的目标

Name Type Description

goToTarget

跳转参数

Name	Type	Default	Description
`center`	Point \| Array		可选视图跳转中心点
`zoom`	Number		可选视图跳转层级
`scale`	Number		可选视图跳转比例尺
`layer`	Layer \| SubLayer \| undefined		可选跳转的图层。如果是模型缓存图层，或者是场景子图层(模型缓存)，则优先会使用模型缓存的外包盒跳转。如果传入IGS场景图层，默认会跳转到场景图层的第一个非组类型子图层范围
`target`	Geometry \| Array.<Geometry> \| Collection.<Geometry>		可选按范围跳转
`goToLayerMode`	String	'extent'	可选跳转图层的模式，仅在传入layer参数且layer为瓦片类图层时生效。支持两种模式，'extent' 表示根据图层范围进行跳转， 'fix-level'按范围并调整到到整数级

options

动画参数

Name	Type	Default	Description
`animate`	Boolean	true	可选新视图的过渡是否开启动画，默认开启动画
`duration`	Number		可选动画的持续时间，以毫秒为单位，默认不设置引擎跳转接口参数duration，此时会根据飞行需要移动的距离来计算一个理想的持续时间

Returns:

Type	Description
Promise.<Boolean>	视图跳转是否成功

Examples

中心点跳转示例

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

按范围跳转示例

// ES5引入方式
const { Map } = zondy
const { Extent, Circle } = zondy.geometry
const { SceneView } = zondy.cesium
// ES6引入方式
import { Map, Extent, Circle } from "@mapgis/webclient-common"
import { SceneView } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
map = new Map();
// 初始化地图视图对象
sceneView = new SceneView({
  // 视图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){Array} view/SceneView.js, line 1432

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

Name	Type	Description
`screenPoint`	Object	屏幕像素坐标点，例如{ x: 900, y: 500 }

Returns:

Type	Description
Array	图元检测结果。备注：10.7.4.10及以后中，对于外置属性的模型缓存数据，拾取结果中的graphic为Promise对象，其他均为Feature对象。

Example

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

// ES5引入方式
const { Map, Feature } = zondy
const { Point, Polygon, MultiPolygon ,Extent } = zondy.geometry
const { GraphicsLayer, IGSFeatureLayer, IGSTileLayer } = zondy.layer
const { SceneView } = zondy.cesium
// ES6引入方式
import { SceneView } 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 SceneView({
  // 视图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) view/SceneView.js, line 1293

设置缩视野中心

Name	Type	Description
`value`	Point	视图中心

setExtent(value) view/SceneView.js, line 1350

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

Name	Type	Description
`value`	Extent	视图的地理范围

takeScreenshot(options){Promise} view/SceneView.js, line 2002

屏幕快照

Name Type Default Description

options

Object

{}

可选

屏幕快照配置配置

Name	Type	Default	Description
`format`	PictureFormat	PictureFormat.PNG	可选图片格式，支持png，jpeg格式
`filename`	String	'screenshotFile'	可选下载文件名
`width`	Number		可选图片宽度
`height`	Number		可选图片高度
`x`	Number		可选图片原点x
`y`	Number		可选图片原点y
`isDownload`	Boolean	true	可选是否下载图片

Returns:

Type	Description
Promise	屏幕快照 {dataUrl String }，且浏览器会下载图片

Example

屏幕快照

// ES5引入方式
var { Map, SceneView } = zondy
var { PictureFormat } = zondy.Enum
// ES6引入方式
import { Map, SceneView } from "@mapgis/webclient-cesium-plugin"
import { PictureFormat } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
  // 二维场景视图的容器(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} view/SceneView.js, line 1162

导出场景视图的配置文件

Returns:

Type	Description
Object	导出的配置文件

toMap(screenPoint){Point} view/SceneView.js, line 1191

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

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

Returns:

Type	Description
Point	地理坐标点

Example

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

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

toScreen(point){Object} view/SceneView.js, line 1241

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

Name	Type	Description
`point`	Point	地理坐标点

Returns:

Type	Description
Object	屏幕像素坐标点

Example

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

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

Class: SceneView

new SceneView(options)

支持如下方法：

Fires

Examples

Extends

Members

centerPoint

engineTypeEngineType

extensionOptionsObject

extentExtent

heightNumber

logoScaleNumber

maxZoomNumber

minZoomNumber

popupPopup

scaleNumber

spatialReferenceSpatialReference

stationaryBoolean

widthNumber

zoomNumber

Methods

SceneView.fromJSON(json){SceneView}

Returns:

destroy()

flyTo(options)

Examples

getCenter(){Object}

Returns:

getExtent(){Extent}

Returns:

getScale(){Number}

Returns:

getSize(){Object}

Returns:

getZoom(){Number}

Returns:

goTo(goToTarget, options){Promise.<Boolean>}

Returns:

Examples

hitTest(screenPoint){Array}

Returns:

Example

setCenter(value)

setExtent(value)

takeScreenshot(options){Promise}

Returns:

Example

toJSON(){Object}

Returns:

toMap(screenPoint){Point}

Returns:

Example

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

toScreen(point){Object}

Returns:

Example

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