# new SceneView(options)
场景视图类
继承自zondy.SceneView
参数:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
options |
Object | 构造参数 |
|
map |
Map | 图层管理器 |
|
viewId |
String | 图层容器ID |
|
innerView |
Object | 实际三维引擎的场景 cesium对应viewer |
|
center |
Point | new Point({coordinates:[0,0]}) | 地图视图中心点。如果中心点有高度,则优先使用中心点(经纬高)定位;如果中心点没有高度,看是否存在zoom/scale,使用center和zoom/scale定位(同时设置scale和zoom时,scale优先于zoom),否则默认zoom为到底3级。如果没有设置center,设置extent,则以extent定位。 |
scale |
Number | 地图视图比例尺 |
|
maxScale |
Number | 地图视图的最大比例尺(比例尺的分母,该值越小,比例尺越大)。视图的当前比列尺不会大于地图视图的最大比例尺。默认值为undefined,undefined表示用户未设置,地图视图会根据当前加载的图层,自动计算maxScale、minScale的值。如果用户设置了该值,则地图视图将直接采用用户设置的值。maxScale的值应该始终小于minScale的值。 |
|
minScale |
Number | 地图视图的最小比例尺(比例尺的分母,该值越大,比例尺越小)。视图的当前比列尺不会小于地图视图的最小比例尺。默认值为undefined,undefined表示用户未设置,地图视图会根据当前加载的图层,自动计算maxScale、minScale的值。如果用户设置了该值,则地图视图将直接采用用户设置的值。minScale的值应该始终大于maxScale的值。 |
|
zoom |
Number | 地图视图层级 |
|
maxZoom |
Number | 最大缩放级数 。优先级低于maxScale |
|
minZoom |
Number | 最小缩放级数。优先级低于minScale |
|
popup |
Object | 地图弹框 |
|
extent |
Extent | 场景视图初始所在的范围。如果没有设置center,但设置extent了,则地图视图定位到extent范围内。 |
|
extensionOptions |
Object | {} | 初始化视图的额外参数,可以通过该参数传入引擎原生的构造参数 |
logoScale |
Number | 1 | 商标缩放系数,该系数需大于等于0.2。默认为1倍,图标大小为宽98px、高28px。 |
- BaseView#event:鼠标点击事件
- BaseView#event:鼠标双击事件
- BaseView#event:鼠标按下事件
- BaseView#event:鼠标抬起事件
- BaseView#event:鼠标右键点击事件
- BaseView#event:鼠标移动事件
- BaseView#event:地图视图改变事件
支持如下方法:
[1、视点跳转][2、导出场景视图的配置文件]
[3、通过一个配置生成一个场景视图对象]
[4、屏幕像素坐标点转地理坐标点]
[5、地理坐标点转屏幕像素坐标点]
[6、获取当前视图容器的宽高]
[7、获取当前视图中心点]
[8、获取当前视图的地理范围]
[9、获取当前层级]
[10、获取当前比例尺]
11、注册事件
12、移除事件
[15、获取实际的M3DSet对象]
[16、设置缩视野中心]
[17、设置视图的地理范围]
[18、屏幕快照]
[19、图元检测]
示例
// 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
});
继承关系
- zondy.SceneView
成员变量
方法
# 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 } = 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]
})
})
# goTo(goToTarget, options)
参数:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
goToTarget |
跳转参数 |
||
center |
Point | Array | 视图跳转中心点 |
|
zoom |
Number | 视图跳转层级 |
|
scale |
Number | 视图跳转比例尺 |
|
layer |
Layer | SubLayer | undefined | 跳转的图层。如果是模型缓存图层,或者是场景子图层(模型缓存),则优先会使用模型缓存的外包盒跳转 |
|
target |
Geometry | Array.<Geometry> | Collection.<Geometry> | 按范围跳转 |
|
options |
动画参数 |
||
animate |
Boolean | true | 新视图的过渡是否开启动画,默认开启动画 |
duration |
Number | 200 | 动画的持续时间,以毫秒为单位,默认200毫秒 |
视图跳转是否成功
示例
// 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)
穿透检测,图元拾取。目前支持graphic类型拾取结果,支持图层类型GraphicLayer,FeatureLayer。
参数:
名称 | 类型 | 描述 |
---|---|---|
screenPoint |
Object | 屏幕像素坐标点,例如{ x: 900, y: 500 } |
图元检测结果
示例
// 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})
# 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 },且浏览器会下载图片
示例
// 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)
})
# toMap(screenPoint)
参数:
名称 | 类型 | 描述 |
---|---|---|
screenPoint |
Object | 屏幕像素坐标点,传入的 x范围为[0,canvas.width - 1],传入的 x范围为[0,canvas.height - 1],例如{ x: 900, y: 500 } |
地理坐标点
示例
屏幕像素坐标点转地理坐标示例
// 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)
参数:
名称 | 类型 | 描述 |
---|---|---|
point |
Point | 地理坐标点 |
屏幕像素坐标点
示例
地理坐标点转屏幕像素坐标示例
// 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)