类名 BaseView

# new BaseView(options)

视图类

参数

名称 类型 默认值 描述
options Object

构造参数

map Map ''

图层管理器

viewId String ''

图层容器ID

继承关系

成员变量

成员变量概述

名称 类型 描述
_spatialReference SpatialReference

视图空间参考系

allLayerViews Collection

所有图层视图

basemapLayerViews Collection

图层视图

center Array

视图中心点

cursor String

鼠标样式,参考css的cursor样式

layerViews Collection

图层视图

map Map

地图管理容器对象

maxScale Number

最大缩放比例尺

maxZoom Number

最大缩放级数

minScale Number

最小缩放比例尺

minZoom Number

最小缩放级数

popup Object

弹窗设置

rotation Number

视图旋转角度

scale Number

地图视图的比例尺,改变该值后会立刻改变视图范围

stationary Boolean

视图是否静止

zoom Number

初始化级数

成员变量详情

SpatialReference

# readonly _spatialReference

视图空间参考系

Collection

# readonly allLayerViews

所有图层视图

Collection

# readonly basemapLayerViews

图层视图

Array

# center

视图中心点

String

# cursor

鼠标样式,参考css的cursor样式

Collection

# readonly layerViews

图层视图

Map

# map

地图管理容器对象

Number

# maxScale

最大缩放比例尺

Number

# maxZoom

最大缩放级数

Number

# minScale

最小缩放比例尺

Number

# minZoom

最小缩放级数

Object

弹窗设置

Number

# rotation

视图旋转角度

Number

# scale

地图视图的比例尺,改变该值后会立刻改变视图范围

Boolean

# readonly stationary

视图是否静止

Number

# zoom

初始化级数

方法

方法概述

名称 返回值类型 描述
getInnerLayer Object | null

根据基础图层对象或者图层id查询并返回实际图层,如果是场景图层,则会返回一个数组对象

getInnerView Object

获取引擎视图对象,在leaflet引擎上返回leafelt map,在cesium引擎上返回cesium viewer

getLayer Layer

根据基础图层id查询并返回基础图层对象

setMap

添加图层管理容器

toJSON Object

转换为json对象

方法详情

# getInnerLayer(layer)

根据基础图层对象或者图层id查询并返回实际图层,如果是场景图层,则会返回一个数组对象

参数

名称 类型 描述
layer Object | String

基础图层对象或者图层id

实际图层对象

Object | null
示例

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

// ES5引入方式
const { IGSSceneLayer } = Zondy.Layer
// ES6引入方式
import { IGSSceneLayer } from "@mapgis/webclient-cesium-plugin"
// 添加一个场景图层
const igsSceneLayer = new IGSSceneLayer({
  url: 'http://webclient.smaryun.com:8089/igs/rest/g3d/Scene:DaYanTa-M3D'
});
map.add(igsSceneLayer);
// 添加完毕后,过去实际图层对象
igsSceneLayer.on("layerview-created", function (result) {
  console.log("加载完毕:", result.layer)
  const innerLayer = view.getInnerLayer(igsSceneLayer)
  console.log("innerLayer:", innerLayer)
})

# getInnerView()

获取引擎视图对象,在leaflet引擎上返回leafelt map,在cesium引擎上返回cesium viewer

Object

# getLayer(layerId)

根据基础图层id查询并返回基础图层对象

参数

名称 类型 描述
layerId String

基础图层ID

基础图层对象

Layer

# setMap(map)

添加图层管理容器

参数

名称 类型 描述
map Map

图层管理容器

# toJSON()

转换为json对象

json对象

Object

事件

事件概述

名称 描述
地图大小变化事件 地图大小变化事件
地图视图加载完毕事件 地图视图加载完毕事件
地图视图改变事件 地图视图改变事件
视图图层创建事件 视图图层创建事件
视图图层创建错误事件 视图图层创建错误事件
视图图层移除事件 视图图层移除事件
键盘抬起事件 键盘抬起事件
键盘按下事件 键盘按下事件
鼠标双击事件 鼠标双击事件
鼠标抬起事件 鼠标抬起事件
鼠标拖拽事件 鼠标拖拽事件
鼠标按下事件 鼠标按下事件
鼠标点击事件 鼠标点击事件
鼠标点击立即响应事件 鼠标点击立即响应事件
鼠标移动事件 鼠标移动事件

事件详情

# 地图大小变化事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'resize'

事件类型

oldWidth Number <optional>

变化前的视图宽度,单位px

oldHeight Number <optional>

变化前的视图高度,单位px

width Number <optional>

变化后的视图高度,单位px

height Number <optional>

变化后的视图高度,单位px

sourceTarget BaseView <optional>

事件发起对象

target Map <optional>

事件接收对象

event Object <optional>

事件对象

示例

地图大小变化事件

view.on('resize', (event) => {
  console.log("地图大小变化事件:", event)
})

# 地图视图加载完毕事件

属性:
Name Type Description
event Object

事件对象

示例

地图视图加载完毕事件

view.on('loaded', (event) => {
  console.log("点击事件:", event)
})

# 地图视图改变事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'view-change'

事件类型

target BaseView <optional>

事件接收对象

mapView BaseView <optional>

事件地图视图对象

scale Number <optional>

事件地图比例尺

zoom Number <optional>

事件地图层级

center Point <optional>

事件地图视图中心

示例

地图视野改变事件

view.on('view-change', (event) => {
  console.log("地图视图改变事件:", event)
})

# 视图图层创建事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'layerview-created'

事件类型

layer Layer <optional>

事件接收对象

layerView LayerView <optional>

事件地图视图中心

view BaseView <optional>

事件地图视图对象

示例

视图图层创建事件

view.on('layerview-created', (event) => {
  console.log("添加地图图层事件:", event)
})

# 视图图层创建错误事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'layerview-created-error'

事件类型

layer Layer <optional>

事件接收对象

view BaseView <optional>

事件地图视图对象

error String <optional>

错误消息

示例

视图图层创建错误事件

view.on('layerview-created-error', (event) => {
  console.log("添加地图图层事件:", event)
})

# 视图图层移除事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'layerview-remove'

事件类型

layer Layer <optional>

事件接收对象

layerView LayerView <optional>

事件地图视图中心

view BaseView <optional>

事件地图视图对象

示例

视图图层移除事件

view.on('layerview-remove', (event) => {
  console.log("销毁地图图层事件:", event)
})

# 键盘抬起事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'key-up'

事件类型

key String <optional>

变化后的视图高度,单位px

timeStamp Number <optional>

时间戳,单位ms

sourceTarget BaseView <optional>

事件发起对象

target Map <optional>

事件接收对象

event Object <optional>

事件对象

示例

键盘抬起事件

view.on('key-up', (event) => {
  console.log("键盘抬起事件:", event)
})

# 键盘按下事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'key-down'

事件类型

key String <optional>

变化后的视图高度,单位px

timeStamp Number <optional>

时间戳,单位ms

sourceTarget BaseView <optional>

事件发起对象

target Map <optional>

事件接收对象

event Object <optional>

事件对象

示例

键盘按下事件

view.on('key-down', (event) => {
  console.log("键盘按下事件:", event)
})

# 鼠标双击事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'double-click'

事件类型

mapPoint Object <optional>

鼠标在地图上的经纬度位置

longitude Object <optional>

鼠标的经度坐标,单位度

latitude Object <optional>

鼠标的纬度坐标,单位度

x Object <optional>

鼠标的像素x坐标,单位px

y Object <optional>

鼠标的像素y坐标,单位px

timeStamp Object <optional>

时间戳,单位ms

sourceTarget BaseView <optional>

事件发起对象

target Map <optional>

事件接收对象

event Object <optional>

事件对象

示例

鼠标双击事件

view.on('double-click', (event) => {
  console.log("双击事件:", event)
})

# 鼠标抬起事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'pointer-up'

事件类型

mapPoint Object <optional>

鼠标在地图上的经纬度位置

longitude Object <optional>

鼠标的经度坐标,单位度

latitude Object <optional>

鼠标的纬度坐标,单位度

x Object <optional>

鼠标的像素x坐标,单位px

y Object <optional>

鼠标的像素y坐标,单位px

timeStamp Object <optional>

时间戳,单位ms

sourceTarget BaseView <optional>

事件发起对象

target Map <optional>

事件接收对象

event Object <optional>

事件对象

示例

鼠标抬起事件

view.on('pointer-up', (event) => {
  console.log("鼠标抬起事件:", event)
})

# 鼠标拖拽事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'drag'

事件类型

x Object <optional>

鼠标的像素x坐标,单位px

y Object <optional>

鼠标的像素y坐标,单位px

button Number <optional>
buttons Number <optional>
cancelable Boolean <optional>
origin Object <optional>

拖拽起点

stopPropagation function <optional>

阻止事件捕获或冒泡

timeStamp Object <optional>

时间戳,单位ms

native Object <optional>

事件对象

action String <optional>

拖拽状态

type String <optional>

事件类型

示例

鼠标拖拽事件

view.on('drag', (event) => {
  console.log("鼠标拖拽事件:", event)
})

# 鼠标按下事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'pointer-down'

事件类型

mapPoint Object <optional>

鼠标在地图上的经纬度位置

longitude Object <optional>

鼠标的经度坐标,单位度

latitude Object <optional>

鼠标的纬度坐标,单位度

x Object <optional>

鼠标的像素x坐标,单位px

y Object <optional>

鼠标的像素y坐标,单位px

timeStamp Object <optional>

时间戳,单位ms

sourceTarget BaseView <optional>

事件发起对象

target Map <optional>

事件接收对象

event Object <optional>

事件对象

示例

鼠标按下事件

view.on('pointer-down', (event) => {
  console.log("鼠标按下事件:", event)
})

# 鼠标点击事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'click'

事件类型

mapPoint Object <optional>

鼠标在地图上的经纬度位置

x Object <optional>

鼠标的像素x坐标,单位px

y Object <optional>

鼠标的像素y坐标,单位px

button Number <optional>
buttons Number <optional>
stopPropagation function <optional>

阻止事件捕获或冒泡

timeStamp Object <optional>

时间戳,单位ms

native Object <optional>

事件对象

sourceTarget BaseView <optional>

事件发起对象

target Map <optional>

事件接收对象

示例

鼠标点击事件

view.on('click', (event) => {
  console.log("点击事件:", event)
})

# 鼠标点击立即响应事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'immediate-click'

事件类型

mapPoint Object <optional>

鼠标在地图上的经纬度位置

x Object <optional>

鼠标的像素x坐标,单位px

y Object <optional>

鼠标的像素y坐标,单位px

button Number <optional>
buttons Number <optional>
stopPropagation function <optional>

阻止事件捕获或冒泡

timeStamp Object <optional>

时间戳,单位ms

native Object <optional>

事件对象

sourceTarget BaseView <optional>

事件发起对象

target Map <optional>

事件接收对象

示例

鼠标立即点击事件

view.on('immediate-click', (event) => {
  console.log("点击事件:", event)
})

# 鼠标移动事件

属性:
Name Type Attributes Default Description
event Object

事件对象

type LayerEventType <optional>
'pointer-move'

事件类型

mapPoint Object <optional>

鼠标在地图上的经纬度位置

longitude Object <optional>

鼠标的经度坐标,单位度

latitude Object <optional>

鼠标的纬度坐标,单位度

x Object <optional>

鼠标的像素x坐标,单位px

y Object <optional>

鼠标的像素y坐标,单位px

timeStamp Object <optional>

时间戳,单位ms

sourceTarget BaseView <optional>

事件发起对象

target Map <optional>

事件接收对象

event Object <optional>

事件对象

示例

鼠标移动事件

view.on('pointer-move', (event) => {
  console.log("鼠标移动事件:", event)
})