事件让很多业务的东西串联在一起,在前端中起着非常重要的作用,比如鼠标点击,移动事件。但其应用远不仅如此,现实生活中就存在很多大大小小的事件。 在OpenLayers 3中,同样存在非常多的事件,比如鼠标左键单击,双击等等。 同时还有一些用于各个模块之间进行协作使用的事件,比如ol.Map
的postrender
和propertychange
事件。 通过这些事件,OpenLayers 3的功能模块协作一致,同样地,也可以让我们自己二次开发的功能模块运作起来。 同时,根据需要,我们还可以在系统中新增自定义事件,使得我们的开发使用方式同OpenLayers 3更加的一致。在本章节将详细介绍OpenLayers 3中的各种事件,及相关应用。
首先我们先来一个简单的demo:
1、用鼠标点击下面这个地图,将弹出一个对话框,显示点击位置的经纬度:
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<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>点击显示经纬度</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></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(
[116.403598,39.917553], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// 监听singleclick事件
map.on('singleclick', function(e){
// 通过getEventCoordinate方法获取地理位置,再转换为wgs84坐标,并弹出对话框显示
alert(ol.proj.transform(map.getEventCoordinate(e.originalEvent), 'EPSG:3857', 'EPSG:4326'));
})
</script>
</body>
</html>
运行一下看一下效果:
我们在点击地图的时候会弹出我们当前点击位置的经纬度!代码很简单,但需要注意的是,任意的事件应用,必然会有三个步骤:
- 找准事件发送者,比如上面这个例子,
map
就是事件发送者。 如何找到它呢? 一般都是要交互的对象。 - 找准事件名称,比如上面例子中的
singleclick
,切忌不要随便想象,或者按照惯例来写名称,初次使用,请一定参照API文档,不然后果自负。 - 编写事件响应函数,在OpenLayers中,事件发送者都会有一个名字为
on
的函数,调用这个函数,就能监听指定的事件,响应函数listener
具有一个参数event
,这个event
类就对应于API文档中事件名称后边括号里的类。
这三个步骤缺一不可&#x