OpenLayers笔记3：地图事件监听概述及部分简单应用

地图事件监听概述

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

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