OpenLayersMap事件

OpenLayer的Map Event在Event.js文件的OpenLayers.Events中定义。

BROWSER_EVENTS: [
    "mouseover",        //鼠标位于对象或区域上
    "mouseout",         //鼠标移出
    "mousedown",        //鼠标按下
    "mouseup",          //鼠标抬起
    "mousemove",        //鼠标移动
    "click",            //鼠标单击    
    "dblclick",         //鼠标双击
    "rightclick",       //鼠标右击
    "dblrightclick",    //鼠标右键双击
    "resize",           //调整大小
    "focus",            //获得焦点
    "blur"              //
],

本文通过定义一个鼠标click事件，来说明Map Event的用法。

1. 定义Event响应函数

function onMapClick(e){
    // 显示地图屏幕坐标
    var str = "[Screen]:" + e.xy.x + "," + e.xy.y;
    document.getElementById("screen_xy").innerHTML = str;
}

"screen_xy" 是用于显示鼠标点击时的坐标数据的div标签，其定义为：

<!--显示地图屏幕坐标Div-->
<div id="screen_xy"></div>

2. 在map上注册click事件及其响应函数

map.events.register("click", map, onMapClick);

此时，在地图上单击鼠标时，onMapClick就会响应click事件，并在预定义的div控件上显示坐标。

3.获取click事件的地图座标

  前面获取到只是click事件的屏幕坐标，如要获取地图坐标，需要进行转换。这里扩充onMapClick函数，实现转换。

function onMapClick(e){
    // 显示地图屏幕坐标
    var str = "[Screen]:" + e.xy.x + "," + e.xy.y;
    document.getElementById("screen_xy").innerHTML = str;
    // 屏幕坐标向地图坐标的转换
    var lonlat = map.getLonLatFromViewPortPx(e.xy);
    str = "[Map]:" + lonlat.lat + "," + lonlat.lon;
    document.getElementById("map_xy").innerHTML = str;
}

map对象的getLonLatFromViewPortPx函数，可以实现将屏幕坐标转换为地图坐标。

// 添加显示地图坐标的Div
<div id=“map_xy"></div>

效果如下图所示。click后，左侧显示屏幕坐标，右侧显示地图坐标。