openlayers地图事件笔记

地图点击事件

singleclick:地图单击事件。 

dblclick:地图双击事件。 

click:地图点击事件。

测试

map.on('singleclick',function(e){ console.log('单击！'); });

map.on('dblclick',function(e){ console.log('双击！'); }); 

map.on('click',function(e){ console.log('点击'); });

鼠标事件

pointerdrag：鼠标拖拽事件。 

pointermove：鼠标移动事件。

测试

map.on('pointerdrag',function(e){ console.log('鼠标拖拽了！'); });

map.on('pointermove',function(e){ console.log('鼠标移动了！'); });

地图渲染事件

postcompose：地图渲染中。 

precompose:准备渲染，未渲染。 

postrender:渲染全部结束。

//进行渲染

map.on('postcompose',function(e){ console.log('postcompose！'); }); 

//渲染全部完成 

map.on('postrender',function(e){ console.log('postrender！'); });

//准备渲染，未开始渲染

map.on('precompose',function(e){ console.log('precompose！'); });

地图初始化，整个地图渲染流程是 precompose>postcompose>postrender。 

分别对应渲染前，渲染中，渲染结束事件。

地图移动事件

moveend:地图移动结束发生，没什么好说的。

复杂的change事件

change:layerGroup :地图图层增删时触发。 

change:size :地图窗口发生变化就会触发，与我们常用的窗口resize接近。 

change:target :地图绑定的div发生更改时触发，如map.setTartget方法就会触发该事件。 

change:view :地图view对象发生变化触发。 

propertychange: Map对象中任意的property值改变时触发。 

map.on('change:size',function(e){ console.log('size改变！'); });

map.on('change:view',function(e){ console.log('view改变！'); }); 

map.on('change:target',function(e){ console.log('target改变！'); }); 

map.on('propertychange',function(e){ console.log('property改变！'); });