Openlaye：学习笔记之事件

首先来看一个案例:当我们点击地图的时候,会弹出一个提示框,

<!Doctype html>
<html lang="ch" >
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>OpenLayers 地图示例</title><link href="ol.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="ol.js" charset="utf-8"></script>
</head>
<body >
<div id="map" style="width: 800px;height: 800px"></div>
<script type="text/javascript">var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({center: ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'),zoom: 10})});// 监听singleclick事件map.on('singleclick', function(event){// 通过getEventCoordinate方法获取地理位置，再转换为wgs84坐标，并弹出对话框显示alert(ol.proj.transform(map.getEventCoordinate(event), 'EPSG:3857', 'EPSG:4326'));})
</script>
</body></html>

任意的事件应用，必然会有三个步骤：

找准事件发送者，比如上面这个例子，map就是事件发送者。如何找到它呢？一般都是要交互的对象。
找准事件名称，比如上面例子中的singleclick，切忌不要随便想象，或者按照惯例来写名称，初次使用，请一定参照API文档，不然后果自负。如何参看一个类有什么事件？请参见看懂API。
编写事件响应函数，在OpenLayers中，事件发送者都会有一个名字为on的函数，调用这个函数，就能监听指定的事件，响应函数listener具有一个参数event，这个event类就对应于API文档中事件名称后边括号里的类。

注销事件影响

比如有一个引导用户使用的需求，用户第一次点击地图的时候，需要弹出一个使用说明，之后点击地图就不用再弹出这个使用说明了。

我们可以使用map.un进行注销监听

    var singleclickListener = function (event) {alert("取消监听事件")map.un('singleclick',singleclickListener);};map.on('singleclick',singleclickListener);

使用map.once也可以仅执行一次监听事件

map.once('singleclick',function (event) {alert('单次监听事件');})

常用事件

常用鼠标事件

地图鼠标左键单击事件
对应的类为ol.Map，事件名为singleclick。
地图鼠标左键双击事件
对应的类为ol.Map，事件名为dblclick。
地图鼠标点击事件
对应的类为ol.Map，事件名为click。
地图鼠标移动事件
对应的类为ol.Map，事件名为pointermove。
地图鼠标拖拽事件
对应的类为ol.Map，事件名为pointerdrag。
地图移动事件
对应的类为ol.Map，事件名为moveend。

非直接交互事件

非直接交互事件
地图缩放事件
对应的类为ol.View，事件名为 change:resolution，为什么？因为分辨率改变了，自然层级就变化了。
地图中心改变事件
对应的类是ol.View，事件名为 change:center。

Openlaye：学习笔记之事件相关推荐

JavaScript 学习笔记 - 挂载事件 Demo
JavaScript 学习笔记 - 挂载事件 Demo 例子 addEventListener 监听事件挂载事件的同时带上参数 dispatchEvent 触发事件 removeEventListe ...
Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 IhandleT
Caliburn.Micro学习笔记目录今天说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子看一它的的实现 ...
JavaScript 学习笔记之事件
事件事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目 ...
Silverlight 2 学习笔记之事件的重复绑定问题
事件重复绑定是在Silverlight2应用程序开发过程中,开发者容易忽视,时常会为整个Silverlight2应用程序产生重大问题的原因,如果你发现你的Silverlight2应用程序在随着运行过程 ...
jQuery学习笔记：事件
一.页面载入 1.ready(fn) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对 ...
Mr.J-- jQuery学习笔记(十一)--事件委托
jQuery事件委托事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运 ...
Mr.J-- jQuery学习笔记(九)--事件绑定移除冒泡
目录事件绑定页面渲染 eventName(fn) on(eventName, fn) 事件移除定义和用法语法 $(selector).off(event,selector,function(e ...
WPF 学习笔记路由事件
1. 可传递的消息: WPF的UI是由布局组建和控件构成的树形结构,当这棵树上的某个节点激发出某个事件时,程序员可以选择以传统的直接事件模式让响应者来响应之,也可以让这个事件在UI组件树沿着一定的方向 ...
[vue学习笔记]数组+事件+v-model的使用
1.关于数组的使用以及常见的函数 (1)在队尾操作函数:push():追加,pop():删除 arr.push(9,8,7,6); 这种批量追加的方式也是被允许的 (2)在队首操作的函数:shift( ...
ih5学习笔记_事件对象
事件对象:按住alt键选择复多行圆

Openlaye：学习笔记之事件

注销事件影响

常用事件

常用鼠标事件

非直接交互事件

Openlaye：学习笔记之事件相关推荐

最新文章

热门文章