【原创】随鼠标移动显示地图经纬度

思路是在地图的Extent的改变的时候,将Extent的XMin,YMin,Width,Height的值传到客户端,客户端调再根据这几个值经过换算得到当前点的经纬度。这样只有在Extent改变是才与服务器交互,经纬度的获取都是在客户端计算所得。

1.为Map控件添加鼠标滑动的客户端事件

Map1.Attributes.Add("onmousemove""GetPosition(event)");

2.在Map的ExtentChanged事件中将相应的值传到客户端

protected void Map1_ExtentChanged(object sender, ESRI.ArcGIS.ADF.Web.UI.WebControls.ExtentEventArgs args)
{
String script;
script 
= "lat=" + args.NewExtent.YMin.ToString() + ";lon=" + args.NewExtent.XMin.ToString() + ";latWidth="+args.NewExtent.Width.ToString()+";lonHeight="+args.NewExtent.Height.ToString()+";";

ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult s 
= new ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult(nullnull"javascript", script);
Map1.CallbackResults.Add(s);
}

3.添加客户端处理事件

var lon='0.00';//经度
var lat='0.00';//纬度
var lonHeight='0.00'//高度
var latWidth='0.00'//宽度
//------------------------------------
function GetPosition(evt)
{
evt
=(evt)?evt:window.event;
var map
=document.getElementById('Map1');
var mapx
=getLeft(map);
var mapy
=getTop(map);


var maph
=map.clientHeight;
var mapw
=map.clientWidth;
var mapleftbottom
=maph+mapy;

var posi
=document.getElementById('position');
var evtx
=(evt.x)?evt.x:evt.pageX;
var evty
=(evt.y)?evt.y:evt.pageY;

var y
=parseFloat(lat); //纬度
var x=parseFloat(lon); //经度
var height=parseFloat(lonHeight);
var width
=parseFloat(latWidth);

var ratex
=(evtx-mapx)/mapw;
var ratey
=(mapleftbottom-evty)/maph;

var templon
=Math.round((width*ratex+x)*100)/100;
var templat
=Math.round((height*ratey+y)*100)/100;
posi.innerHTML
='经度:'+templon+' '+'纬度:'+templat;
}

//获取元素的纵坐标
        function getTop(e)
        
{
            var offset
=e.offsetTop;
            
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
            
return offset;
        }

        
//-----------------------------
        
//获取元素的横坐标
        function getLeft(e)
        
{
            var offset
=e.offsetLeft;
            
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
            
return offset;
        }


 

posted @ 2008-05-10 09:24  所言非虚  阅读(2622)  评论(4编辑  收藏  举报