【原创】客户端添加兴趣点，并随地图变化而变化

很多时候我们需要在某些图层的点添加一些热点，以供在客户端点击之后显示一些信息或者弹出像Google那样的气泡。
这个热点（兴趣点）在客户端可以用div或者img表示，而且还可以解决在Map控件上显示gif和flash动画的问题。

1 首先在客户端定义好一个div，并将其设置为不可见，位置类型设为绝对。

< div id = " Typhoon_GIF "  style = " position:absolute; visibility:hidden; " >
         < img src = " images/taif.gif "   />
</ div >

2.取得图层中的点的位置，并将其转换为屏幕位置

// 取得ArcGIS Server ArcObjects 点
public  ESRI.ArcGIS.Geometry.IPoint GetTyphoonPoint(ESRI.ArcGIS.ADF.Web.UI.WebControls.MapResourceManager MapResourceManager1)
         {

            ESRI.ArcGIS.Server.IServerContext mapContext = GetServerContext(MapResourceManager1);  //取得ServerContext

            ESRI.ArcGIS.Geodatabase.IWorkspaceFactory wsf = mapContext.CreateObject("esriDataSourcesFile.ShapefileWorkspaceFactory") as ESRI.ArcGIS.Geodatabase.IWorkspaceFactory;

            ESRI.ArcGIS.Geodatabase.IFeatureWorkspace fws = wsf.OpenFromFile("C:\\xiamen\\Typhoon", 0) as ESRI.ArcGIS.Geodatabase.IFeatureWorkspace ;  //TryCast是不引发异常的类型转换操作
            ESRI.ArcGIS.Geodatabase.IFeatureClass pFC  = fws.OpenFeatureClass("Typhoon");

            ESRI.ArcGIS.Geometry.IPolyline line = pFC.GetFeature(0).Shape as ESRI.ArcGIS.Geometry.IPolyline ;

            ESRI.ArcGIS.Geometry.IPoint point = line.ToPoint;
            //mapContext.ReleaseContext()

            return point;
        }
// 将AO点转换为Screen点，Screen点的坐标值是以Map控件的左上角为坐标原点计算的。
public  System.Double[] GetTyphoonScreenPoint(ESRI.ArcGIS.ADF.Web.Geometry.Envelope env, ESRI.ArcGIS.ADF.Web.UI.WebControls.MapResourceManager MapResourceManager1,ESRI.ArcGIS.ADF.Web.UI.WebControls.Map Map1)
         {
            //获取图层中的点
            ESRI.ArcGIS.Geometry.IPoint point = GetTyphoonPoint(MapResourceManager1);
            //转换为ADF的点
            ESRI.ArcGIS.ADF.Web.Geometry.Point  adf_point = ESRI.ArcGIS.ADF.Web.DataSources.ArcGISServer.Converter.FromIPoint(point);

            
            //转换为屏幕坐标，它是相对与Map的左上角的坐标值
            System.Drawing.Point screen_point = adf_point.ToScreenPoint(env, System.Convert.ToInt32(Map1.Width.Value), System.Convert.ToInt32(Map1.Height.Value));
            Double[] rate = { screen_point.X, screen_point.Y };
            return rate;
        }

3.添加Map控件的ExtentChanged事件代码

// -------------------------------------------------------
     protected   void  Map1_ExtentChanged( object  sender, ESRI.ArcGIS.ADF.Web.UI.WebControls.ExtentEventArgs args)
     {
        String script;

        Double[] rate = util.GetTyphoonScreenPoint(args.NewExtent, MapResourceManager1, Map1);
        if (rate[0] <= 0 || rate[1] <= 0)
        {
            script += "document.getElementById('Typhoon_GIF').style.visibility='hidden';";
        }
        else 
        {
            script += "document.getElementById('Typhoon_GIF').style.visibility='visible';showTyphoon(" + rate[0].ToString() + "," + rate[1].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);
    }

4.添加客户端处理代码

function showTyphoon(x,y)
         {
            //将坐标值转化为数值型
            var ratex=parseFloat(x);
            var ratey=parseFloat(y);
            
            var map=document.getElementById("Map1");
            
            //Map的位置
            var mapx=getLeft(map);
            var mapy=getTop(map);
            
            var img=document.getElementById("Typhoon_GIF");
            
            imgw=img.clientWidth;
            imgh=img.clientHeight;
            
            img.style.top=ratey+mapy-Math.round(imgh/2)+"px";
            img.style.left=ratex+mapx-Math.round(imgw/2)+"px";
        }
// 获取元素的纵坐标
        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;
        }

效果图


 

转载于:https://www.cnblogs.com/danni5678/archive/2008/05/10/1190893.html