首先来看一个案例:当我们点击地图的时候,会弹出一个提示框,
<!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。