随鼠标移动在状态栏实时显示地图坐标(转载)

标签：

任务描述
    鼠标在地图上移动时，会产生一系列mousemove（鼠标移动）事件，我们可以在客户端通过javascript脚本捕捉到鼠标事件的坐标，这个坐标是基于浏览器窗口的屏幕坐标。如果要显示鼠标点所在的地图坐标，有两种方法：第一，不停地向服务器发送AJAX请求，在服务器端将屏幕坐标转换成地图坐标，然后返回客户端，显示在状态栏。这样的话会有一个问题，就是鼠标拖动的时候会一直不停地发送请求，极大地增加了服务器的负担。当然，我们可以通过设置时间间隔，比如半秒钟更新一次坐标，达到视觉效果与服务器负担之间的均衡。第二种方法就是在每次地图状态更新时，发送一个AJAX请求，获取当前地图的X，Y最大、最小值，保存在客户端，当产生mousemove事件时，根据鼠标的屏幕坐标和地图的四角（左上、左下、右上、右下）坐标，实时地计算鼠标点的地图坐标。
    显而易见，第二种方法效率更高。
实现步骤
    第一步，定义两个全局变量，用来保存地图的左上角和右下角坐标：

var left_top;
var right_bottom;

第二步，给页面的body添加一个onload事件，处理函数如下：

function initShowMapXY(){
    left_top = new EsriPoint();
    right_bottom = new EsriPoint();
    var map = EsriControls.maps["Map0"];
    //给地图添加一个update监听器
    map.addUpdateListener("showMapXYListener",showMapXYRequest);
    showMapXYRequest(map);
}

在这个函数中，先对全局变量进行了初始化；接着，给地图添加了一个update监听器，这样，每次地图状态更新的时候都会调用这个监听器。第7行代码调用了监听器函数，目的就是在页面初次显示的时候去获取当前的地图坐标，否则，页面初次显示的时候坐标显示异常。
    第三步，实现监听器。

function showMapXYRequest(map) {
     //获取服务器URL
     var url = EsriUtils.getServerUrl(map.formId);
     //设置请求参数
     var params = "showMapXY=showMapXY&formId="+ map.formId + "&mapId=" + map.id + "&"
+ EsriUtils.buildRequestParams(map.formId);

     //发送AJAX请求并设置响应处理函数
     var xmlHttp = EsriUtils.sendAjaxRequest(url, params, true, function() { updateShowMapXYResponse(xmlHttp);});
}

function updateShowMapXYResponse(xmlHttp){ 
     if (xmlHttp!== null && xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        //获取XML响应
        var xml = xmlHttp.responseXML;
        left_top.x = xml.getElementsByTagName("minx").item(0).firstChild.nodeValue;
        left_top.y = xml.getElementsByTagName("miny").item(0).firstChild.nodeValue;
        right_bottom.x = xml.getElementsByTagName("maxx").item(0).firstChild.nodeValue;
        right_bottom.y = xml.getElementsByTagName("maxy").item(0).firstChild.nodeValue;
    }
}

 监听器处理函数中想服务器发送了一个AJAX请求，服务器端的请求处理函数就不在这里详细阐述了，处理结果是xml格式的响应，包含四个数据：<minx>,<miny>,<maxx>以及<maxy>，根据这四个数据更新左上角和右下角的坐标。
最后，实现mousemove的处理函数。

function showMapXYonStatus(event){
    var mapcell = document.getElementById("EsriMapCell_Map0");
    var bounds = EsriUtils.getElementPageBounds(mapcell);
    var mousePoint = EsriUtils.getXY(event).offset(-bounds.left, -bounds.top);

    var mapx = mousePoint.x;
    var mapy = mousePoint.y;   

    if(mapx > 0 && mapx < mapcell.offsetWidth && mapy > 0 && mapy < mapcell.offsetHeight){
          window.status = calculateX(mapx,mapcell.offsetWidth) + " , " + calculateY(mapy,mapcell.offsetHeight);
    }
}

 在这个函数中，先要对鼠标点的屏幕坐标进行校正，将坐标原点移到地图的左上角（原来鼠标点坐标的原点是浏览器窗口的左上角）。接下来判断鼠标位置，如果鼠标是在地图范围内移动，就将坐标显示在状态栏，其中calculateX就是根据鼠标点的屏幕坐标（注意：此时原点已经是地图左上角）、地图的宽度以及地图的左上角和右下角坐标来实时地计算鼠标点的地图坐标。calculateY也是一样。

function calculateX(screenX,screenWidth){
    var mapwidth = right_bottom.x - left_top.x;
    return parseFloat((screenX*mapwidth)/screenWidth) + parseFloat(left_top.x); 
}

随鼠标移动在状态栏实时显示地图坐标(转载)

标签：

原文地址：http://www.cnblogs.com/fuchen/p/4273452.html