外观
事件机制
819字约3分钟
2023-09-08
无论是前端系统,还是二维/三维GIS应用系统,都离不开各种事件的应用,尤其是鼠标的单击、双击事件。 Mars3D 内所有类均支持事件的绑定、解绑、触发等统一的事件机制,事件类型全部定义在mars3d.EventType。
1. 事件的相关类
事件相关的更多方法可以参阅 BaseClass类的API文档。
事件方法中使用到所有支持的事件类型,都统一定义在mars3d.EventType枚举中。在每个对应类的API中都会说明当前类所支持的事件类型,具体参阅各类的API文档。
1.1 事件订阅
通过obj.on(types, fn, context) 方法订阅事件, 参数如下:
/**
* 绑定指定类型事件监听器,
* 支持在监听中调用 event.stopPropagation(); 阻止事件冒泡
*
* @param {EventType|string|EventType[]|string[]|object} types 事件类型
* @param {Function} fn 绑定的监听器回调方法
* @param {object} [context] 侦听器的上下文(this关键字将指向的对象)。
* @return {BaseClass} 当前对象本身,可以链式调用
*
*/
on(types, fn, context)
1.2 事件取消订阅
通过obj.on(types, fn, context) 方法订阅事件, 参数如下:
/**
* 解除绑定指定类型事件监听器
*
* @param {EventType|string|EventType[]} [types] 事件类型,未传值时解绑所有事件
* @param {Function} [fn] 绑定的监听器回调方法,未传值时解绑所有指定类型对应事件,特殊说明:map.on监听的Cesium相关原生事件时必须传入该参数
* @param {object} [context] 侦听器的上下文(this关键字将指向的对象)。
* @return {BaseClass} 当前对象本身,可以链式调用
*
*/
off(types, fn, context)
1.3 使用示例
下面,我们以 map对象为例,绑定一个事件做示例:
function map_cameraChangedHandler(event){
console.log('相机位置完成', event)
}
// on绑定事件
map.on(mars3d.EventType.cameraChanged, map_cameraChangedHandler, this)
// off移除事件
map.off(mars3d.EventType.cameraChanged, map_cameraChangedHandler, this)
2. 主要类的常用事件
2.1 Map类的事件
目前最重要的Map类支持3类事件类型可以绑定:
- Map内部图层变化时的事件,如
addLayer、removeLayer
等 - 相机、时钟、场景等变化触发的事件,如
cameraMoveStart、preUpdate、clockTick
等 - 鼠标键盘操作触发的事件,如
click、mouseMove、mouseOver、keydown
等
详细事件列表,请参阅:Map支持的事件类型
2.2 图层类的事件
图层类型可以绑定多种事件,我们以最常用的GraphicLayer图层为例:
- 图层内部变化时的事件,如
add、show、addGraphic
等 - 鼠标操作触发的事件,如
click、rightClick、mouseOver、mouseOut
等 - 标绘和编辑触发的事件,如
drawStart、drawCreated、editStart、editStop
等
详细事件列表,请参阅:GraphicLayer支持的事件类型
2.3 矢量数据类的事件
矢量数据类型可以绑定多种事件,我们以最常用的Entity矢量数据为例:
- 数据内部变化时的事件,如
add、remove、show
等 - 鼠标操作触发的事件,如
click、rightClick、mouseOver、mouseOut
等 - 标绘和编辑触发的事件,如
drawStart、drawCreated、editStart、editStop
等
详细事件列表,请参阅:Graphic支持的事件类型