OpenLayers-Map事件

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后，左側顯示屏幕坐標，右側顯示地圖坐標。