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

简介:

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

 

ContractedBlock.gif ExpandedBlockStart.gif Code
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行代码调用了监听器函数,目的就是在页面初次显示的时候去获取当前的地图坐标,否则,页面初次显示的时候坐标显示异常。
    第三步,实现监听器。

 

ContractedBlock.gif ExpandedBlockStart.gif Code
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, paramstrue, 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的处理函数。

 

ContractedBlock.gif ExpandedBlockStart.gif Code
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也是一样。

 

ContractedBlock.gif ExpandedBlockStart.gif Code
function calculateX(screenX,screenWidth){
    var mapwidth 
= right_bottom.x - left_top.x;
    
return parseFloat((screenX*mapwidth)/screenWidth) + parseFloat(left_top.x); 
}
原帖地址: http://bbs.esrichina-bj.cn/ESRI/thread-23832-1-1.html
版权说明

  如果标题未标有<转载、转>等字则属于作者原创,欢迎转载,其版权归作者和博客园共有。
  作      者:温景良
  文章出处:http://wenjl520.cnblogs.com/  或  http://www.cnblogs.com/

posted @ 2009-02-05 23:29 温景良(Jason) Views( 4974) Comments( 0) Edit 收藏
 

公告

 
本文转自 我的程序人生博客园博客,原文链接: http://www.cnblogs.com/wenjl520/archive/2009/02/05/1384957.html,如需转载请自行联系原作者
 
相关文章
|
20天前
SVProgressHUD弹出框总是显示在屏幕左上角问题
SVProgressHUD弹出框总是显示在屏幕左上角问题
21 0
|
20天前
滑动工具条
滑动工具条
18 0
|
29天前
LabVIEW当鼠标悬停在图形曲线上时显示坐标
LabVIEW当鼠标悬停在图形曲线上时显示坐标
16 1
|
29天前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
|
7月前
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
|
JavaScript 前端开发
菜单栏底部线条切换效果(标题滚动居中显示)
菜单栏底部线条切换效果(标题滚动居中显示)
115 0
菜单栏底部线条切换效果(标题滚动居中显示)
C#创建无边框可拖动窗口
C#创建无边框可拖动窗口
173 0
|
定位技术
百度地图开发-绘制点线提示框 07
百度地图开发-绘制点线提示框 07
182 0
百度地图开发-绘制点线提示框 07
QT软件开发: 点击鼠标在窗口里绘制矩形(窗口透明背景)
QT软件开发: 点击鼠标在窗口里绘制矩形(窗口透明背景)
476 0
QT软件开发: 点击鼠标在窗口里绘制矩形(窗口透明背景)

热门文章

最新文章