类名 MapView

# new MapView(options)

二维视图基类

参数:

名称 类型 默认值 描述
options Object

构造参数

mergeLevelRatio Number 1.05

相邻级别分辨率的比值。默认为1.05。小于此值则会将两个级别合并为一个级别显示。以1.414和1.2分辨率举例,1.414/1.2=1.17833, 1.17833大于1.05保留1.2分辨率对应的层级。1.414/1.4=1.01, 1.01小于1.05, 会将1.414和1.4分辨率对应的层级合并为一级。

继承关系

成员变量

Collection

# readonly allLayerViews

所有图层视图

Inherited From:
Collection

# readonly basemapLayerViews

图层视图

Inherited From:
Array

# center

视图中心点

Inherited From:
String

# cursor

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

Inherited From:
Object

# extendProps

当前图层对象上不支持的属性,二次开发用户希望挂在图层对像上的属性可以存储到该属性中

Inherited From:
Default Value:
  • {}
Object

# extensionOptions

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

Inherited From:
Collection

# readonly layerViews

图层视图

Inherited From:
Map

# map

地图管理容器对象

Inherited From:
Number

# maxScale

最大缩放比例尺

Inherited From:
Number

# maxZoom

最大缩放级数

Inherited From:
Number

# readonly mergeLevelRatio

相邻级别分辨率的比值。默认为1.05。小于此值则会将两个级别合并为一个级别显示。以1.414和1.2分辨率举例,1.414/1.2=1.17833, 1.17833大于1.05保留1.2分辨率对应的层级。1.414/1.4=1.01, 1.01小于1.05, 会将1.414和1.4分辨率对应的层级合并为一级。

Number

# minScale

最小缩放比例尺

Inherited From:
Number

# minZoom

最小缩放级数

Inherited From:
Object

弹窗设置

Inherited From:
Number

# rotation

视图旋转角度

Inherited From:
Number

# scale

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

Inherited From:
SpatialReference

# readonly spatialReference

视图空间参考系

Inherited From:
Boolean

# readonly stationary

视图是否静止

Inherited From:
Number

# zoom

初始化级数

Inherited From:

方法

# static fromJSON(json)

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

参数:

名称 类型 描述
json Object

场景视图配置

MapView

# getInnerLayer(layer)

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

参数:

名称 类型 描述
layer Object | String

基础图层对象或者图层id

Inherited From:

实际图层对象

Object | null
示例

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

// ES5引入方式
const { IGSSceneLayer } = zondy.layer
// ES6引入方式
import { IGSSceneLayer } from "@mapgis/webclient-cesium-plugin"
// 添加一个场景图层
const igsSceneLayer = new IGSSceneLayer({
  url: 'http://192.168.82.89: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

Inherited From:
Object

# getLayer(layerId)

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

参数:

名称 类型 描述
layerId String

基础图层ID

Inherited From:

基础图层对象

Layer

# setMap(map)

添加图层管理容器

参数:

名称 类型 描述
map Map

图层管理容器

Inherited From:

# toJSON()

转换为json对象

Overrides:

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>

事件对象

Inherited From:
示例

地图大小变化事件

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

# 地图视图加载完毕事件

属性:
Name Type Description
event Object

事件对象

Inherited From:
示例

地图视图加载完毕事件

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>

事件地图视图中心

Inherited From:
示例

地图视野改变事件

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>

事件地图视图对象

Inherited From:
示例

视图图层创建事件

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>

错误消息

Inherited From:
示例

视图图层创建错误事件

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>

事件地图视图对象

Inherited From:
示例

视图图层移除事件

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>

事件对象

Inherited From:
示例

键盘抬起事件

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>

事件对象

Inherited From:
示例

键盘按下事件

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>

事件对象

Inherited From:
示例

鼠标双击事件

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>

事件对象

Inherited From:
示例

鼠标抬起事件

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>

事件类型

Inherited From:
示例

鼠标拖拽事件

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>

事件对象

Inherited From:
示例

鼠标按下事件

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>

事件接收对象

Inherited From:
示例

鼠标点击事件

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>

事件接收对象

Inherited From:
示例

鼠标立即点击事件

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>

事件对象

Inherited From:
示例

鼠标移动事件

view.on('pointer-move', (event) => {
  console.log("鼠标移动事件:", event)
})
构造函数
成员变量
方法
事件