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


    思路是在地图的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;
            }


     

  • 相关阅读:
    Flask初识之安装及HelloWord程序
    Python 四大主流 Web 编程框架
    Mysql之锁、事务绝版详解---干货!
    Django基础九之中间件
    Django基础八之cookie和session
    Django基础七之Ajax
    Django基础六之ORM中的锁和事务
    Linux下使用tail查找日志文件关键词有颜色、高亮显示
    主流云测平台汇总
    RPC框架总述
  • 原文地址:https://www.cnblogs.com/danni5678/p/1190900.html
Copyright © 2020-2023  润新知