08-03.md

常用事件

几乎OpenLayers主要的类都会派发相关的事件，虽然事件很多，但日常使用的事件大致分为下面几类。

常用鼠标事件

地图鼠标左键单击事件

对应的类为ol.Map，事件名为singleclick。

地图鼠标左键双击事件

对应的类为ol.Map，事件名为dblclick。

地图鼠标点击事件

对应的类为ol.Map，事件名为click。

地图鼠标移动事件

对应的类为ol.Map，事件名为pointermove 。

地图鼠标拖拽事件

对应的类为ol.Map，事件名为pointerdrag 。

地图移动事件

对应的类为ol.Map，事件名为moveend。

可以通过下面这个地图来尝试一下鼠标事件：

<script type="text/javascript" src="../src/ol3.13.1/ol.js" charset="utf-8"></script>

触发事件提示信息

<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 }) });

map.on('singleclick', function(event){
	document.getElementById('info').innerHTML = '触发了ol.Map的单击事件：singleclick';
});

map.on('dblclick', function(event){
	document.getElementById('info').innerHTML = '触发了ol.Map的双击事件：dblclick';
});

map.on('click', function(event){
	document.getElementById('info').innerHTML = '触发了ol.Map的点击事件：click';
});

// map.on('pointermove', function(event){
// 	document.getElementById('info').innerHTML = '触发了ol.Map的鼠标移动事件：pointermove';
// });

map.on('pointerdrag', function(event){
	document.getElementById('info').innerHTML = '触发了ol.Map的拖拽事件：pointerdrag';
});

map.on('moveend', function(event){
	document.getElementById('info').innerHTML = '触发了ol.Map的地图移动事件：moveend';
});

</script>

注意在singleclick和dblclick响应之前，都会触发click事件，在选择事件时，需要谨慎考虑。 同时发现moveend事件在地图缩放的时候，也会触发。 代码如下：

<div id="info" style="background-color: #999;">触发事件提示信息</div>
<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(
		      [104, 30], 'EPSG:4326', 'EPSG:3857'),
		  zoom: 10
		})
	});

	// 响应单击事件
	map.on('singleclick', function(event){
		document.getElementById('info').innerHTML = '触发了ol.Map的单击事件：singleclick';
	});

	// 响应双击事件
	map.on('dblclick', function(event){
		document.getElementById('info').innerHTML = '触发了ol.Map的双击事件：dblclick';
	});

	// 响应点击事件
	map.on('click', function(event){
		document.getElementById('info').innerHTML = '触发了ol.Map的点击事件：click';
	});

	// 响应鼠标移动事件，事件太频繁，故注释掉了，可自行验证该事件
	// map.on('pointermove', function(event){
	// 	document.getElementById('info').innerHTML = '触发了ol.Map的鼠标移动事件：pointermove';
	// });

	// 响应拖拽事件
	map.on('pointerdrag', function(event){
		document.getElementById('info').innerHTML = '触发了ol.Map的拖拽事件：pointerdrag';
	});

	// 地图移动事件
	map.on('moveend', function(event){
		document.getElementById('info').innerHTML = '触发了ol.Map的地图移动事件：moveend';
	});

</script>

非直接交互事件

地图缩放事件

对应的类为ol.View，事件名为 change:resolution，为什么？ 因为分辨率改变了，自然层级就变化了。

地图中心改变事件

对应的类是ol.View，事件名为 change:center。

下面这个地图，可以让你感受一下这两个事件：

事件提示信息

<script type="text/javascript"> var map2 = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map2', view: new ol.View({ center: ol.proj.transform( [104, 30], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) });

var view = map2.getView();
view.on('change:resolution', function(event){
	document.getElementById('info2').innerHTML = '触发了ol.View的缩放事件：change:resolution，当前层级为： ' + this.getZoom();
});

view.on('change:center', function(event){
	document.getElementById('info2').innerHTML = '触发了ol.View的地图中心改变事件：change:center，当前中心点为： ' + ol.proj.transform(
	      this.getCenter(), 'EPSG:3857', 'EPSG:4326');
});

</script>

改变事件

OpenLayers 3的大多数类都拥有一些改变事件，这些事件常用于模块之间联动使用，在二次开发的业务需求中，也会经常需要，所以希望能引起重视，具体的事件可以参照API官网文档的说明。 比如上面的例子其实就是应用的这类事件。