OpenLayers-Map事件

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

复制代码
 1 BROWSER_EVENTS: [
 2     "mouseover",        //鼠标位于对象或区域上
 3 "mouseout", //鼠标移出  4 "mousedown", //鼠标按下  5 "mouseup", //鼠标抬起  6 "mousemove", //鼠标移动  7 "click", //鼠标单击  8 "dblclick", //鼠标双击  9 "rightclick", //鼠标右击 10 "dblrightclick", //鼠标右键双击 11 "resize", //调整大小 12 "focus", //获得焦点 13 "blur" // 14 ],
复制代码

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

1. 定义Event响应函数

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

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

1 
2 <div id="screen_xy">div>

 

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

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

 

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

OpenLayers-Map事件_第1张图片

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

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

复制代码
1 function onMapClick(e){
2     // 显示地图屏幕坐标 3 var str = "[Screen]:" + e.xy.x + "," + e.xy.y; 4 document.getElementById("screen_xy").innerHTML = str; 5 // 屏幕坐标向地图坐标的转换 6 var lonlat = map.getLonLatFromViewPortPx(e.xy); 7 str = "[Map]:" + lonlat.lat + "," + lonlat.lon; 8 document.getElementById("map_xy").innerHTML = str; 9 }
复制代码

 

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

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

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

OpenLayers-Map事件_第2张图片

 

转载于:https://www.cnblogs.com/hanhuibing/articles/4175574.html

你可能感兴趣的:(OpenLayers-Map事件)