Class: MapView

// ES5 引入方式
const { MapView } = zondy

// ES6 引入方式
import { MapView } from '@mapgis/webclient-common'

// 通过继承扩展二维视图能力（示意）
class CustomMapView extends MapView {}

Extends

• BaseView

Members

allLayerViewsCollection

所有图层视图

basemapLayerViewsCollection

图层视图

centerArray

视图中心点

cursorString

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

extendPropsObject

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

Default Value:

{}

Events

inherited click

view/BaseView.js, line 84

鼠标点击事件。

当用户在视图上完成一次鼠标点击（按下并抬起）时触发。 适用于实现地图要素拾取、单击高亮、弹窗打开等交互逻辑。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'click' 可选 事件类型 mapPoint Point 可选 鼠标在地图上的坐标位置，使用视图的空间参考系 x Number 可选 鼠标在视图容器中的 X 像素坐标，单位 px y Number 可选 鼠标在视图容器中的 Y 像素坐标，单位 px button Number 可选 触发事件的鼠标按键编号 buttons Number 可选 当前按下的鼠标按键组合标识 stopPropagation function 可选 阻止事件继续向下捕获或冒泡 timeStamp Number 可选 事件触发时间戳，单位 ms native Event 可选 底层 DOM 或引擎事件对象 sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象

Example

鼠标点击事件

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

inherited double-click

view/BaseView.js, line 134

鼠标双击事件。

当用户在视图上快速连续点击两次时触发，常用于缩放到指定位置或打开详细信息面板等场景。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'double-click' 可选 事件类型 mapPoint Point 可选 鼠标在地图上的坐标位置，使用视图的空间参考系 longitude Number 可选 鼠标的经度坐标，单位度 latitude Number 可选 鼠标的纬度坐标，单位度 x Number 可选 鼠标在视图容器中的 X 像素坐标，单位 px y Number 可选 鼠标在视图容器中的 Y 像素坐标，单位 px timeStamp Number 可选 事件触发时间戳，单位 ms sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象 event Event 可选 底层鼠标事件对象

Example

鼠标双击事件

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

inherited drag

view/BaseView.js, line 227

鼠标拖拽事件。

当用户在视图上按下鼠标并拖动时触发。常用于实现平移、框选、绘制等交互逻辑。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'drag' 可选 事件类型 x Number 可选 鼠标在视图容器中的 X 像素坐标，单位 px y Number 可选 鼠标在视图容器中的 Y 像素坐标，单位 px button Number 可选 触发事件的鼠标按键编号 buttons Number 可选 当前按下的鼠标按键组合标识 cancelable Boolean 可选 是否可取消 origin Object 可选 拖拽起点信息（由底层引擎提供） action String 可选 拖拽状态（由底层引擎提供） stopPropagation function 可选 阻止事件继续向下捕获或冒泡 timeStamp Number 可选 事件触发时间戳，单位 ms native Event 可选 底层 DOM 或引擎事件对象

Example

鼠标拖拽事件

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

inherited immediate-click

view/BaseView.js, line 109

鼠标立即点击事件。

与普通 click 不同，本事件在底层引擎第一时间识别到点击行为时立即抛出， 适用于对响应时延敏感的场景，例如快速拾取、工具条交互等。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'immediate-click' 可选 事件类型 mapPoint Point 可选 鼠标在地图上的坐标位置，使用视图的空间参考系 x Number 可选 鼠标在视图容器中的 X 像素坐标，单位 px y Number 可选 鼠标在视图容器中的 Y 像素坐标，单位 px button Number 可选 触发事件的鼠标按键编号 buttons Number 可选 当前按下的鼠标按键组合标识 stopPropagation function 可选 阻止事件继续向下捕获或冒泡 timeStamp Number 可选 事件触发时间戳，单位 ms native Event 可选 底层 DOM 或引擎事件对象 sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象

Example

鼠标立即点击事件

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

inherited innerView-created

view/BaseView.js, line 310

引擎视图创建完毕事件。

当底层引擎视图对象（例如 Leaflet 的 L.Map 或 Cesium 的 Cesium.Viewer）创建完成后触发。 适用于在内部视图可用后，调用引擎专有能力进行二次开发扩展。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'innerView-created' 可选 事件类型 innerView Object 可选 引擎内部视图对象 sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象 event Event 可选 底层事件对象

Example

引擎视图创建完毕事件

view.on('innerView-created', (event) => {
  console.log('引擎视图创建完毕:', event.innerView)
})

inherited key-down

view/BaseView.js, line 272

键盘按下事件。

当视图容器获得焦点时，按下键盘按键会触发该事件。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'key-down' 可选 事件类型 key String 可选 按下的键值，等同于原生事件的 key 字段 timeStamp Number 可选 事件触发时间戳，单位 ms sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象 event Event 可选 底层键盘事件对象

Example

键盘按下事件

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

inherited key-up

view/BaseView.js, line 291

键盘抬起事件。

当视图容器获得焦点时，抬起键盘按键会触发该事件。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'key-up' 可选 事件类型 key String 可选 抬起的键值，等同于原生事件的 key 字段 timeStamp Number 可选 事件触发时间戳，单位 ms sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象 event Event 可选 底层键盘事件对象

Example

键盘抬起事件

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

inherited layerview-created

view/BaseView.js, line 348

图层视图创建事件。

当某个图层在当前视图中成功创建并加入对应的 LayerView 后触发。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'layerview-created' 可选 事件类型 layer Layer 可选 对应的图层对象 layerView LayerView 可选 对应的图层视图对象 view BaseView 可选 所属视图对象

Example

图层视图创建事件

view.on('layerview-created', (event) => {
  console.log('图层视图创建:', event.layer, event.layerView)
})

inherited layerview-created-error

view/BaseView.js, line 382

图层视图创建错误事件。

当某个图层在当前视图中创建 LayerView 失败时触发。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'layerview-created-error' 可选 事件类型 layer Layer 可选 对应的图层对象 view BaseView 可选 所属视图对象 error String | Error 可选 错误消息或错误对象

Example

图层视图创建错误事件

view.on('layerview-created-error', (event) => {
  console.log('图层视图创建失败:', event.layer, event.error)
})

inherited layerview-remove

view/BaseView.js, line 365

图层视图移除事件。

当某个图层在当前视图中的 LayerView 被移除（例如图层从地图中删除）后触发。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'layerview-remove' 可选 事件类型 layer Layer 可选 对应的图层对象 layerView LayerView 可选 对应的图层视图对象 view BaseView 可选 所属视图对象

Example

图层视图移除事件

view.on('layerview-remove', (event) => {
  console.log('图层视图移除:', event.layer)
})

inherited layerview-scale-visible

view/BaseView.js, line 399

图层视图比例尺显示状态更新后触发。

当前仅支持非组图层以及场景子图层。当视图缩放导致图层从“可显示”切换为“不可显示”， 或从“不可显示”切换为“可显示”时，会向图层对象和视图对象同时派发该事件。

Properties:

Name	Type	Description
event	LayerViewScaleVisibleEvent	事件对象 Properties Name Type Default Description type String 'layerview-scale-visible' 可选 事件类型 layer Layer | Object 可选 触发状态变更的图层或场景子图层对象 layerView LayerView 可选 对应的图层视图对象 view BaseView 可选 所属视图对象 beforeScaleVisible Boolean 可选 变化前的比例尺可见状态 currentScaleVisible Boolean 可选 变化后的比例尺可见状态

Example

监听图层比例尺显示状态变化

view.on('layerview-scale-visible', (event) => {
  console.log('图层比例尺显示隐藏状态更新事件:', event)
})

inherited loaded

view/BaseView.js, line 68

视图加载完毕事件。

当内部引擎视图对象创建完成并完成首轮图层加载、可以进行交互操作时触发。 适用于在视图就绪后执行首次定位、控件初始化等逻辑。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'loaded' 可选 事件类型 target BaseView 可选 事件接收对象，对应当前视图实例

Example

视图加载完毕事件

view.on('loaded', (event) => {
  console.log('视图加载完毕:', event)
})

inherited pointer-down

view/BaseView.js, line 157

鼠标按下事件。

当用户在视图上按下鼠标按键时触发，通常与 pointer-up、drag 事件配合使用， 用于实现框选、拖拽、测量等交互行为的起始逻辑。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'pointer-down' 可选 事件类型 mapPoint Point 可选 鼠标在地图上的坐标位置，使用视图的空间参考系 longitude Number 可选 鼠标的经度坐标，单位度 latitude Number 可选 鼠标的纬度坐标，单位度 x Number 可选 鼠标在视图容器中的 X 像素坐标，单位 px y Number 可选 鼠标在视图容器中的 Y 像素坐标，单位 px timeStamp Number 可选 事件触发时间戳，单位 ms sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象 event Event 可选 底层鼠标事件对象

Example

鼠标按下事件

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

inherited pointer-move

view/BaseView.js, line 204

鼠标移动事件。

当鼠标在视图容器中移动时持续触发，适合用于实时显示坐标、绘制橡皮筋线等场景。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'pointer-move' 可选 事件类型 mapPoint Point 可选 鼠标在地图上的坐标位置，使用视图的空间参考系 longitude Number 可选 鼠标的经度坐标，单位度 latitude Number 可选 鼠标的纬度坐标，单位度 x Number 可选 鼠标在视图容器中的 X 像素坐标，单位 px y Number 可选 鼠标在视图容器中的 Y 像素坐标，单位 px timeStamp Number 可选 事件触发时间戳，单位 ms sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象 event Event 可选 底层鼠标事件对象

Example

鼠标移动事件

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

inherited pointer-up

view/BaseView.js, line 181

鼠标抬起事件。

当用户在视图上释放鼠标按键时触发，通常作为一次点击、拖拽或框选操作的结束标志。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'pointer-up' 可选 事件类型 mapPoint Point 可选 鼠标在地图上的坐标位置，使用视图的空间参考系 longitude Number 可选 鼠标的经度坐标，单位度 latitude Number 可选 鼠标的纬度坐标，单位度 x Number 可选 鼠标在视图容器中的 X 像素坐标，单位 px y Number 可选 鼠标在视图容器中的 Y 像素坐标，单位 px timeStamp Number 可选 事件触发时间戳，单位 ms sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象 event Event 可选 底层鼠标事件对象

Example

鼠标抬起事件

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

inherited resize

view/BaseView.js, line 251

视图大小变化事件。

当视图容器大小发生变化（例如浏览器窗口 resize、容器 DOM 尺寸改变）后触发。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'resize' 可选 事件类型 oldWidth Number 可选 变化前的视图宽度，单位 px oldHeight Number 可选 变化前的视图高度，单位 px width Number 可选 变化后的视图宽度，单位 px height Number 可选 变化后的视图高度，单位 px sourceTarget BaseView 可选 事件发起对象 target Map 可选 事件接收对象 event Event 可选 底层 resize 事件对象

Example

视图大小变化事件

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

inherited view-change

view/BaseView.js, line 329

视图视野改变事件。

当视图中心点、比例尺或缩放层级发生变化时触发。可用于同步比例尺控件、鹰眼图、当前中心坐标展示等。

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type String 'view-change' 可选 事件类型 target BaseView 可选 事件接收对象 mapView BaseView 可选 当前视图对象（兼容字段） scale Number 可选 当前地图比例尺 zoom Number 可选 当前地图缩放层级 center Point 可选 当前视图中心点

Example

视图视野改变事件

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

Methods

inherited _processSpatialReferenceChange(event){*}

view/BaseView.js, line 1088

空间参考系改变

Name	Type	Description
event	LayerEvent

Returns:

Type	Description
*

inherited destroy(){Promise.<*>}

view/BaseView.js, line 690

销毁当前视图并移除所有图层视图。

调用后会断开地图和图层事件监听、清理内部缓存， 并按顺序执行所有图层视图的移除逻辑。销毁后的视图实例不应继续复用。

Returns:

Type	Description
Promise.<*>	图层视图移除完成后的 Promise。

inherited fire(type, data, propagate){Object}

base/Evented.js, line 523

激发指定类型的事件

Name	Type	Description
type	string	可选 事件类型
data	Object	可选 待传递的数据
propagate	Boolean	可选 是否传播到父级

Returns:

Type	Description
Object	当前实例

inherited getInnerLayer(layerDef, sublayerDef){Object|null}

view/BaseView.js, line 620

获取图层或场景子图层对应的引擎内部对象。

适用于在图层视图已经创建后，获取底层引擎中的真实图层实例， 以便执行引擎专有能力扩展。当前子图层查询仅支持场景子图层。

Name	Type	Default	Description
layerDef	Object | String		图层对象或图层 ID。
sublayerDef	Object | String | null	null	可选 子图层对象或子图层 ID。传入后会在指定图层内继续查询子图层的内部对象。

Returns:

Type	Description
Object | null	引擎内部图层对象；未找到时返回 null。

Example

根据基础图层对象或者图层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)
})

inherited getInnerView(){Object|null}

view/BaseView.js, line 607

获取当前视图对应的引擎内部视图对象。

在不同引擎实现下，返回值类型不同：例如在 Leaflet 视图中通常返回 L.Map， 在 Cesium 视图中通常返回 Cesium.Viewer。适合在需要直接调用底层引擎能力时使用。

Returns:

Type	Description
Object | null	引擎内部视图对象；若视图尚未完成创建则返回 null。

inherited getLayer(layerId){Layer|undefined}

view/BaseView.js, line 675

根据图层 ID 获取当前视图中关联的基础图层对象。

该方法会先从图层视图集合中查找对应 LayerView，再返回其关联的 layer 实例。 适用于已知图层 ID、但需要获取原始图层对象继续读取配置或监听事件的场景。

Name	Type	Description
layerId	String	基础图层 ID。

Returns:

Type	Description
Layer | undefined	找到时返回基础图层对象，否则返回 undefined。

inherited off(types, fn, context){Object}

base/Evented.js, line 337

移除事件
示例如下:
[1、移除一个事件的指定回调函数]
[2、移除一个事件的所有回调函数]
[3、移除多个事件的同一个指定的回调函数]
[4、移除多个指定事件的回调函数]
[5、删除时指定上下文 - types类型为字符串]
[6、删除时指定上下文 - types类型为对象]

Name	Type	Description
types	string	可选 移除指定事件类型上绑定的回调函数 当类型为字符串时，可以移除单个或多个事件类型绑定的回调函数，单个事件："click"，多个事件：以空格分割:"click double-click"； 当types为对象时，使用如下方式移除事件：{'click': onClickFun, 'mouse-move': onMouseMoveFun}
fn	function	可选 事件回调函数，当types为字符串，且不指定要删除的回调函数时，删除该事件上的所有回调函数
context	Object	可选 事件回调函数的this关键字将指向的对象

Returns:

Type	Description
Object	当前实例

Examples

移除一个事件的指定回调函数

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction)

移除一个事件的所有回调函数

// 一个事件的回调函数1
const clickFunction1 = function (event) {
  console.log("点击事件1:", event)
}

// 一个事件的回调函数2
const clickFunction2 = function (event) {
  console.log("点击事件2:", event)
}

// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
// 不指定回调函数，则移除该事件上的所有绑定的回调函数
view.off('click')

移除多个事件的同一个指定的回调函数

// 多个事件的同一个回调函数
const eventFunction = function (event) {
  console.log("事件:", event)
}
// 调用MapView或SceneView的off方法移除多个事件的同一个指定的回调函数
view.off('click double-click', eventFunction)

移除多个指定事件的回调函数

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
   // 移除click事件上一个指定的函数
  "click": clickFunction,
  // 移除double-click上所有指定的函数
  "double-click": undefined
})

删除时指定上下文 - types类型为字符串

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction, view)
// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
view.off('click', undefined, view)

删除时指定上下文 - types类型为对象

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
   // 移除click事件上一个指定的函数
  "click": clickFunction,
  // 移除double-click上所有指定的函数
  "double-click": undefined
}, view)

inherited on(types, fn, context){Object}

base/Evented.js, line 240

注册一个新的监听事件;
示例如下：
[1、注册一个事件]
[2、一次注册多个事件 - 同一个回调函数]
[3、一次注册多个事件 - 分别指回调应函数]
[4、当types为字符串时 - 指定上下文]
[5、当types为对象时 - 指定上下文]

Name	Type	Default	Description
types	String | Object	null	可选 事件类型 当types为字符串时，可以定义单个或多个事件，单个事件："click"，多个事件：以空格分割:"click double-click"； 当types为对象时，使用如下方式指定事件：{'click': onClickFun, 'mouse-move': onMouseMoveFun}
fn	function	null	可选 事件回调函数
context	Object	null	可选 事件回调函数的this关键字将指向的对象

Returns:

Type	Description
Object	当前实例

Examples

注册一个事件

// 初始化一个点击事件回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
}
// 调用MapView或SceneView的on方法注册一个点击事件
view.on('click', clickFunction)

一次注册多个事件 - 同一个回调函数

// 初始化一个事件回调函数
const eventFunction = function (event) {
  console.log("事件:", event)
}

// 调用MapView或SceneView的on方法注册多个事件
// 多个事件类型使用同一个回调函数
view.on('click right-click-down', eventFunction)

一次注册多个事件 - 分别指回调应函数

// 初始化一个左键点击事件回调函数
const clickFunction = function (event) {
  console.log("click事件:", event)
}

// 初始化一个右键按下事件回调函数
const rightClickFunction = function (event) {
  console.log("right-click-down事件:", event)
}

// 调用MapView或SceneView的on方法注册多个事件
// 每一个事件类型，使用单独的回调函数
// 注意使用此种方式，一种类型的事件仅能指定一个回调函数
view.on({
  "click": clickFunction,
  "right-click-down": rightClickFunction
})

指定上下文 - types类型为字符串

// 初始化一个点击事件回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
  console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on('click', clickFunction, view)

指定上下文 - types类型为对象

// 初始化一个点击事件回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
  console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on({
  "click": clickFunction,
  "right-click-down": clickFunction
}, view)

inherited once(types, fn, context){Object}

base/Evented.js, line 592

事件监听，仅触发一次

Name	Type	Description
types	string	可选 将侦听器函数（fn）添加到对象的特定事件类型中。您还可以传递几个空格分隔的类型（例如“click dblclick”），也可以传入例如 {click: onClick, mousemove: onMouseMove}。
fn	function	可选 侦听器函数
context	Object	可选 指定侦听器的上下文（this关键字将指向的对象）

Returns:

Type	Description
Object	当前实例

inherited setMap(map){void}

view/BaseView.js, line 569

绑定地图管理容器并初始化视图级图层组织关系。

该方法会建立 Map -> View 的事件转发关系、触发图层加载， 并同步创建业务图层、覆盖物图层和底图对应的组图层视图容器。

Name	Type	Description
map	Map | Object	地图管理容器或可转换为 Map 的 JSON 配置对象。

Returns:

Type	Description
void

toJSON(){Object}

view/MapView.js, line 426

转换为json对象

Returns:

Type	Description
Object	json对象

MapView.fromJSON(json){MapView}

view/MapView.js, line 488

通过 JSON 配置创建一个二维地图视图实例。

适用于从持久化配置恢复 MapView，通常与实例方法 toJSON 配套使用。

Name	Type	Default	Description
json	Object	{}	可选 二维地图视图配置对象。

Returns:

Type	Description
MapView	新的二维地图视图实例。