地图事件监听概述

地图能够监听的事件主要包括：

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