zoukankan      html  css  js  c++  java
  • 【原创】随鼠标移动显示地图经纬度

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


     

  • 相关阅读:
    C# 解决组合优化问题
    <@spring.message "index.title"/>
    服务容错处理库Polly使用
    Pycharm使用入门
    JS知识点
    design pattern
    java的NIO
    Promise
    Docker Compose + Spring Boot + Nginx + Mysql
    苹果开发者账号如何多人协作进行开发和真机调试XCode
  • 原文地址:https://www.cnblogs.com/danni5678/p/1190900.html
Copyright © 2011-2022 走看看