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

很多时候我们需要在某些图层的点添加一些热点,以供在客户端点击之后显示一些信息或者弹出像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"0as 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(nullnull"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;
        }

效果图


 

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