类名 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分辨率对应的层级合并为一级。

继承关系

成员变量

成员变量概述

名称 类型 描述
_spatialReference SpatialReference

视图空间参考系

allLayerViews Collection

所有图层视图

basemapLayerViews Collection

图层视图

center Array

视图中心点

cursor String

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

layerViews Collection

图层视图

map Map

地图管理容器对象

maxScale Number

最大缩放比例尺

maxZoom Number

最大缩放级数

mergeLevelRatio Number

相邻级别分辨率的比值。默认为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分辨率对应的层级合并为一级。

minScale Number

最小缩放比例尺

minZoom Number

最小缩放级数

popup Object

弹窗设置

rotation Number

视图旋转角度

scale Number

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

stationary Boolean

视图是否静止

zoom Number

初始化级数

成员变量详情

SpatialReference

# readonly _spatialReference

视图空间参考系

Overrides:
Collection

# readonly allLayerViews

所有图层视图

Inherited From:
Collection

# readonly basemapLayerViews

图层视图

Inherited From:
Array

# center

视图中心点

Inherited From:
String

# cursor

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

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:
Boolean

# readonly stationary

视图是否静止

Inherited From:
Number

# zoom

初始化级数

Inherited From:

方法

方法概述

名称 返回值类型 描述
fromJSON MapView

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

getInnerLayer Object | null

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

getInnerView Object

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

getLayer Layer

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

setMap

添加图层管理容器

toJSON Object

转换为json对象

方法详情

# 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://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

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)
})