目录
地图事件监听概述
地图能够监听的事件主要包括:
1.鼠标触发事件
click:鼠标单击地图触发的事件(鼠标单击多少次地图,该事件就触发多少次);
singleclick:鼠标单击地图触发的事件(鼠标若在250ms内连续单击地图,则不会触发该事件);
dbclick:鼠标双击地图触发的事件(鼠标在250ms内单击两次地图);
pointermove:鼠标指针在地图上移动触发的事件;
pointerdrag:鼠标按下拖动地图触发的事件;
2.地图移动事件
movestart:地图开始移动时触发的事件(包括平移和缩放);
moveend:地图结束移动时触发的事件(包括平移和缩放);
3.图层渲染事件
precompose:一个图层渲染前触发的事件;
postcompose:一个图层渲染时触发的事件;
postrender:一个图层渲染完成后触发的事件;
(上述三个渲染事件的解释是我测试后得出的,与官方API的解释有所出入,如若有误还望指正。)
rendercomplete:所有的渲染都完成后触发的事件(所有的图层、瓦片都完成了在当前视图的加载);
4.change事件
change:地图出现改变时触发的事件(改变可以是任何地图事件);
change:layerGroup:地图的图层发生改变时触发的事件(例如图层的增加、删除);
change:size:可供地图显示的窗口大小发生改变时触发的事件(例如将浏览器窗口缩小化);
change:target:地图所在div块发生改变时触发的事件(例如切换地图的显示位置);
change:view:地图视图发生改变时触发的事件(例如视图中心的变化);
5.其它事件
propertychange:地图属性更改时触发的事件;
error:地图运行发生错误时触发事件;
地图事件监听的部分简单应用
监听鼠标触发获取地图坐标
map.on('click', function (evt) {
var pixel = map.getEventPixel(evt.originalEvent);//获取点击的像素点
var coordinate = map.getCoordinateFromPixel(pixel);//获取像素点的坐标
alert(coordinate);
});
监听指针移动获取指针位置矢量要素的属性值
map.on('pointermove', function (evt) {
var pixel = map.getEventPixel(evt.originalEvent);//获取指针所在的像素点
var feature;
if (map.hasFeatureAtPixel(pixel))//判断像素点的位置是否有矢量要素
{
//获取位于像素点位置的矢量要素
feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
return feature;
});
console.log(feature.get("name"));//获取矢量要素的某个属性值并打印
}
});
监听地图移动实现图层的动态显隐
map.on("moveend",function(evt){
var zoom = map.getView().getZoom();//获取地图视图的缩放级别
if (zoom >= 12) {
layer1.setVisible(false);//设置图层可见性
layer2.setVisible(true);
} else {
layer1.setVisible(true);
layer2.setVisible(false);
}
});