openlayers中map事件基础认识与实践详解

1.点击事件

click:地图点击事件

基本的地图点击事件，地图双击时也会触发2次，地图拖拽时不会触发。

singleclick:地图单击事件

真正的单击事件，会延迟250毫秒以确保不是双击（所以双击时不会触发单击事件）。

dblclick:双击地图事件。

双击地图事件，同时会触发两次地图单击事件click。

map.on('click',(event)=>{
  console.log('地图点击事件')
})
map.on('singleclick',(event)=>{
  console.log('地图单击事件')
})
map.on('dblclick',(event)=>{
  console.log('地图双击事件')
})

2.鼠标事件

pointermove:鼠标在地图上移动时触发

鼠标在地图上移动活动时触发该事件。

pointerdrag:鼠标在地图上拖拽时触发

鼠标在地图上拖拽时触发。

map.on('pointermove',(event)=>{
  console.log('鼠标在地图上移动时触发')
})
map.on('pointerdrag',(event)=>{
  console.log('鼠标在地图上拖拽时触发')
})

3.地图移动事件

movestart：地图开始移动时触发

地图开始移动时触发，包括通过鼠标拖拽、键盘导航或动画引起的移动。

moveend：地图结束移动时触发

地图移动结束时触发，包括通过鼠标拖拽、键盘导航或动画引起的移动。

 map.on('pointerdrag',(event)=>{
   console.log('地图移动结束时触发')
 })

4.地图渲染事件

地图渲染事件详见本篇文章链接: 地图渲染事件

5.change事件

change:view

地图视图对象（如中心点、缩放级别等）发生变化时触发。

change:layerGroup：

地图图层组发生变化时触发，如添加、删除或重新排序图层。

change:size：

地图窗口大小发生变化时触发。

change:target：

地图绑定的DOM元素发生变化时触发。

map.on('change:view',(event)=>{
  console.log('地图视图对象（如中心点、缩放级别等）发生变化时触发')
})
map.on('change:layerGroup',(event)=>{
  console.log('地图图层组发生变化时触发，如添加、删除或重新排序图层。')
})
map.on('change:size',(event)=>{
  console.log('地图窗口大小发生变化时触发')
})
map.on('change:target',(event)=>{
  console.log('地图绑定的DOM元素发生变化时触发')
})

6.其他事件

propertychange：

Map对象中任意的地图属性property值改变时触发。

error

地图运行发生错误时触发事件；

map.on('propertychange',(event)=>{
  console.log('Map对象中任意的property值改变时触发')
})
map.on('error',(event)=>{
  console.log('地图出现错误时触发')
})