【原创】随鼠标移动显示地图经纬度
思路是在地图的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(null, null, "javascript", script);
Map1.CallbackResults.Add(s);
}
{
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(null, null, "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;
}
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;
}