ArcGIS.Server.9.2.DotNet自带例子分析（一、五）

说明：原本打算4篇就结束这个例子的分析，结果上面一篇代码贴太多了编辑器死了，只能开个新篇继续写。
目的：
1.MapIdentify功能，自定义Tool以及TaskResults应用。
准备：
1.（一、四）的工程，具体见前篇。
开始：
1.......看前一篇。
2.......看前一篇。
3.......看前一篇。
4.切换到Measure.ascx的html代码视图，给主table添加id为MeasureToolbar，添加style属性为color:Black;background-color:White;border-color:Black; border-width:1px;border-style:Outset;width:275px;visibility:hidden;position: absolute;  left: 285px; top: 298px; z-index:11000; 这样可以是这个用户控件浮在地图之上同时默认为不显示。
5.其他的也做相应的设置，完成后的代码和说明如下：

 1 <% @ Control Language="C#" AutoEventWireup="true" CodeBehind="Measure.ascx.cs" Inherits="MappingApp.Measure"  %>
 2 < script  language ="javascript"  type ="text/javascript"  src ="JavaScript/display_measure.js" ></ script >
 3 < style  type ="text/css" >
 4<!--
 5.STYLE1 {}{
 6    font-size: 12px;
 7    font-weight: bold;
 8}
 9-->
10 </ style >
11
12 < table  width ="400"  border ="1"  cellspacing ="0"  cellpadding ="0"  id ="MeasureToolbar"  style ="color:Black;background-color:White;border-color:Black; border-width:1px;border-style:Outset;width:275px;visibility:hidden;position: absolute;  left: 10px; top: 10px; z-index:11000; " >
13    <!--  给tr加上拖拽的事件  -->
14    < tr  id ="MeasureToolbar_Title"  onmousedown ="dragMeasureToolbarStart(event, 'MeasureToolbar')"  onmouseover ="this.style.cursor='move'"  style ="background-image:url(images/blank.gif); cursor:move; " >
15      < td >< table  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="0" >
16        < tr >
17          < td  width ="92%" >< span  class ="STYLE1" > 距离测量 </ span ></ td >
18          < td  width ="30" >
19          <!--  给给关闭按钮图片加上关闭事件的事件  -->
20          < img  src ="images/dismiss.png"  width ="20"  height ="20"  id ="MeasureToolbar_CloseButton"  onclick ="closeMeasureToolbarTool('MeasureToolbar')"  style ="cursor:pointer;"  alt ="Close"  hspace ="0"  vspace ="0"   /></ td >
21        </ tr >
22        < tr >
23          < td >< table  cellpadding ="0"  cellspacing ="0"   >< tr >
24                          <!--  点功能按钮  -->
25                          < td  id ="MeasureToolbarButton_point"  style ="border: solid White 1px; background-color: White;"  onmouseover ="this.style.cursor='pointer'; this.style.borderColor='Black';"  onmouseout ="checkMeasureToolbarBorder(this, 'point')"  onmousedown ="setMeasureToolbarTool('point')" >< img  id ="ToolbarImage_point"  src ="images/measure-point.png"  align ="middle"  alt ="Point - Coordinates"  title ="Point - Coordinates"  style ="padding: 0px 0px 0px 0px"   /></ td >
26                          <!--  线功能按钮  -->
27                          < td  id ="MeasureToolbarButton_polyline"  style ="border: solid Black 1px; background-color: #EEEEEE;"  onmouseover ="this.style.cursor='pointer';this.style.borderColor='Black';"  onmouseout ="checkMeasureToolbarBorder(this, 'polyline')"  onmousedown ="setMeasureToolbarTool('polyline')" >< img  id ="ToolbarImage_polyline"  src ="images/measure-line.png"  align ="middle"  alt ="Line - Distance"  title ="Line - Distance"  style ="padding: 0px 0px 0px 0px"   /></ td >
28                          <!--  面功能按钮  -->
29                          < td  id ="MeasureToolbarButton_polygon"  style ="border: solid White 1px; background-color: White;"  onmouseover ="this.style.cursor='pointer';this.style.borderColor='Black';"  onmouseout ="checkMeasureToolbarBorder(this, 'polygon')"  onmousedown ="setMeasureToolbarTool('polygon')" >< img  id ="ToolbarImage_polygon"  src ="images/measure-poly.png"  align ="middle"  alt ="Polygon - Area"  title ="Polygon - Area"  style ="padding: 0px 0px 0px 0px"   />      </ td >
30                          </ tr ></ table >
31                          <!--  测试单位隐藏值  -->
32                          < input  id ="MeasureUnits"  type ="hidden"  value ="<%=MeasureUnits %>" />
33                          <!--  面积单位隐藏值  -->
34                          < input  id ="AreaUnits"  type ="hidden"  value ="<%=AreaUnits %>" />
35                          </ td >
36          < td > &nbsp; </ td >
37        </ tr >
38        <!--  显示测量结果的表格行  -->
39        < tr  id ="MeasureToolbar_BodyRow"   >
40         < td   id ="MeasureToolbar_BodyCell"  style ="background-image:url(images/blank.gif);vertical-align:top;padding-left:5px;padding-top:5px;" >
41     
42                  < table  id ="MeasureToolbarTable"  cellspacing ="2"  cellpadding ="1"  style =" width: 100%;font: normal 7pt Verdana; " >
43                      < tr >< td  style ="background-color: #ffffff"  id ="MeasureDisplay"  colspan ="2"   valign ="top" >
44                         在地图上点击画线，双击鼠标结束画线
45                      </ td ></ tr >
46                  </ table >
47
48              </ td >
49              < td  id ="MeasureToolbar_SideResizeCell"   >< img  width ="5px"  height ="100%"  src ="images/blank.gif"  alt =""   /></ td >
50        </ tr >
51      </ table ></ td >
52    </ tr >
53    < tr  id ="MeasureToolbar_ResizeRow" >
54              < td  >< img  height ="5px"  width ="100%"  src ="images/blank.gif"  alt =""   /></ td >
55              < td >< img  width ="5px"  src ="images/blank.gif"  alt =""   /></ td >
56          </ tr >
57 </ table >
58
59 < script  language ="javascript"  type ="text/javascript" >
60        //回调脚本段
61        var measureVectorCallbackFunctionString = "<%=m_callbackInvocation %>";
62        //根据浏览器的不同设置相应的图片显示
63        if (isIE && ieVersion<7)
64        {
65           setIE6MeasureToolbarImages(); 
66        }  
67 </ script >
68

6.在完成上面的代码后，就把这个用户控件拖到Default.aspx页面中，并且设置相应的属性，具体设置好后的代码如下：

1 < uc1:Measure  id ="Measure1"  runat ="server"  AreaUnits ="Sq_Miles"  MapBuddyId ="Map1"  MapUnits ="Resource_Default"  MeasureUnits ="Meters"  NumberDecimals ="3" >
2 </ uc1:Measure >

7 . 在Toolbar1中新增加一个Tool,设置相应的属性，如果设置后代码如下：

1 < esri:Tool  ClientAction ="startMeasure()"  DefaultImage ="~/images/measure.png"  HoverImage ="~/images/measure_HOVER.gif"  JavaScriptFile =""  Name ="Measure"  SelectedImage ="~/images/measure_ON.gif"  Text ="Measure"  ToolTip ="Measure"   />

8 .接下来实现ClientAction的startMeasure()的js方法，在javascript目录中新建display_measure.js文件，同时在Measure.ascx文件中添加对这个js文件的引用。

1 < script  language ="javascript"  type ="text/javascript"  src ="JavaScript/display_measure.js" ></ script >

9.在js文件中编写startMeasure()方法，代码和说明如下：

  1 // 测量控件的内容显示，必须定义为m_measureDisplay，在Esri的display_dotnetadf.js的processCallbackResult的方法中有用到
  2 var  m_measureDisplay  =   " MeasureDisplay " ;
  3 // 测量控件的状态
  4 var  m_currentMeasureToolbarTool  =   " polyline " ;
  5
  6 // 测量类型
  7 var  m_MeasureTypes  =   new  Array();
  8 m_MeasureTypes[ 0 ]  =   " point " ;
  9 m_MeasureTypes[ 1 ]  =   " polyline " ;
 10 m_MeasureTypes[ 2 ]  =   " polygon " ;
 11
 12 //
 13 function  startMeasure()  {
 14    var md;
 15    // 获取测量控件的内容显示
 16    if (m_measureDisplay!=null) {
 17        md = document.getElementById(m_measureDisplay);
 18    }
 19    
 20    if (m_currentMeasureToolbarTool=="point")//点
 21    {
 22        if (md!=null)
 23        {
 24           //设置信息提示
 25           md.innerHTML = "Click on the map to return the coordinate location of the point.<br />";
 26        } 
 27        //点状态初始化方法
 28        MeasurePoint(map.controlName);
 29    } 
 30    else if (m_currentMeasureToolbarTool=="polyline")//线
 31    {
 32        if (md!=null)
 33        {
 34           md.innerHTML = "Click on the map and draw a line. Double-click to end the line.<br />";
 35        }
 36        //线状态初始化方法
 37        MeasurePolyline(map.controlName);
 38    } 
 39    else//面
 40    {
 41        if (md!=null)
 42        {
 43           md.innerHTML = "Click on the map and draw a polygon. Double-click to end the polygon.<br />";
 44        }
 45        //面状态初始化方法
 46        MeasurePolygon(map.controlName);
 47    }
 48}
 49
 50
 51 function  MeasurePoint(divid)  {
 52    map = Maps[divid];
 53    if (map!=null)
 54    {
 55        //显示的容器,Esri的display_map.js中有定义
 56        vectortoolbar = "MeasureToolbar";
 57        //setTool方法Esri的display_map.js中有定义，参数说明（模式，是否显示载入中提示，客户端函数，鼠标指针，vectorMode等于-1时不显示，vectortoolbar是否显示，浏览器状态栏显示内容，是否清除DrawnVectors，客户端回调脚本）
 58        map.setTool("Measure", false, "Point", "pointer", -1, "visible","");
 59        
 60        map.divObject.onmousedown = MapCoordsClick;
 61        map.mode = "MeasurePoint";
 62        var vo = map.vectorObject;
 63        //显示vectorObject
 64        showLayer(vo.divId);
 65        //先清除原来的
 66        vo.clear();
 67        //把点画上去
 68        vo.draw();
 69    }    
 70}
 71
 72 function  MeasurePolyline(divid) 
 73 {
 74    map = Maps[divid];
 75    if (map!=null) 
 76    {
 77        //回调客户端脚本段，WebForm_DoCallback('ctl02',argument,processCallbackResult,context,null,true)
 78        map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
 79        //显示的容器,Esri的display_map.js中有定义
 80        vectortoolbar = "MeasureToolbar";
 81        //setTool方法Esri的display_map.js中有定义，参数说明（模式，是否显示载入中提示，客户端函数，鼠标指针，vectorMode等于-1时不显示线条，vectortoolbar是否显示，浏览器状态栏显示内容，是否清除DrawnVectors，客户端回调脚本）
 82        map.setTool("Measure", false, "ClickShape", "crosshair", 1, "visible", "Measure-Polyline - Click to start line. Click again to add vectors. Double-click to add last vector and complete polyline.", false, measureVectorCallbackFunctionString);
 83    }
 84}
 85
 86 function  MeasurePolygon(divid) 
 87 {
 88    map = Maps[divid];
 89    if (map!=null) 
 90    {
 91        //回调客户端脚本段，WebForm_DoCallback('ctl02',argument,processCallbackResult,context,null,true)
 92        map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
 93        //显示的容器,Esri的display_map.js中有定义
 94        vectortoolbar = "MeasureToolbar";
 95        map.setTool("Measure", false, "ClickShape", "crosshair", 2, "visible", "Measure-Polygon - Click to start line. Click again to add vectors. Double-click to add last vector and complete polygon.", false, measureVectorCallbackFunctionString);
 96    }
 97}
 98
 99 // 点
100 function  MapCoordsClick(e) 
101 {
102    var vo = map.vectorObject;
103    var pix = vo.pixelObject;
104    var xycoord = vo.xyCoord;
105    getXY(e);
106    zleft = mouseX - map.containerLeft;
107    ztop = mouseY - map.containerTop;
108    vo.clear();
109    vo.crosshair(zleft, ztop);
110    vo.draw();
111
112    map.xMin=zleft;
113    map.yMin=ztop;
114    map.getTopLeftTile();
115    coordString = + zleft + ":" + ztop;
116    var argument = "ControlID=" + map.controlName + "&EventArg=Point&ControlType=Map&coords=" + coordString + "&VectorMode=Measure&VectorAction=Coordinates&minx=" + zleft + "&miny=" + ztop;
117    if(checkForFormElement(document, 0, "MeasureUnits"))
118    {
119       argument += "&MeasureUnits=" + document.forms[0].MeasureUnits.value;
120    }
121    if(checkForFormElement(document, 0, "AreaUnits")) 
122    {
123       argument += "&AreaUnits=" + document.forms[0].AreaUnits.value;
124    }
125    if(checkForFormElement(document, 0, "MapUnits")) 
126    {
127       argument += "&MapUnits=" + document.forms[0].MapUnits.options[document.forms[0].MapUnits.selectedIndex].value;
128    }
129    var context = map.controlName + ",Point";
130    map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
131    eval(map.vectorCallbackFunctionString);
132
133}

10.在js文件中添加测量工具的checkMeasureToolbarBorde方法和setMeasureToolbarTool方法，代码和说明如下：

 1 // 测量按钮鼠标移上去的显示效果
 2 function  checkMeasureToolbarBorder(cell, type) 
 3 {
 4    if (type.toLowerCase()==m_currentMeasureToolbarTool)
 5    {
 6       cell.style.borderColor = "Black";
 7    }  
 8    else
 9    {
10       cell.style.borderColor = "White";  
11    }
12        
13}
14
15 // 测量按钮切换
16 function  setMeasureToolbarTool(type) 
17 {
18    m_currentMeasureToolbarTool = type.toLowerCase();
19    var cellObj;
20    var buttonId = "";
21    //显示状态切换
22    for(var i=0; i<m_MeasureTypes.length; i++) 
23    {
24        buttonId = "MeasureToolbarButton_" + m_MeasureTypes[i];
25        cellObj = document.getElementById(buttonId);
26        if (cellObj!=null) 
27        {
28            if (m_MeasureTypes[i]==m_currentMeasureToolbarTool) 
29            {
30                cellObj.style.borderColor = "Black";
31                cellObj.style.backgroundColor = "#EEEEEE";
32                startMeasure();
33            }
34            else 
35            {
36                cellObj.style.borderColor = "White";
37                cellObj.style.backgroundColor = "White";
38            }
39        }
40    }
41}

11.接下来添加测量控件的拖拽事件dragMeasureToolbarStart具体的代码和说明如下：

 1 // 测量控件拖拽开始
 2 function  dragMeasureToolbarStart(e, id) 
 3 {
 4    if (id!=null) m_measureToolbarId = id;
 5    m_measureToolbar = document.getElementById(m_measureToolbarId);
 6    if (m_measureToolbar!=null) 
 7    {
 8        getXY(e);
 9        var box = calcElementPosition(m_measureToolbarId);
10        m_measureXOffset = mouseX - box.left;
11        m_measureYOffset = mouseY - box.top;
12    }
13    m_measureMoveFunction = document.onmousemove; 
14    document.onmousemove = dragMeasureToolbarMove;
15    document.onmouseup = dragMeasureToolbarStop;
16    return false;
17}
18
19 // 测量控件拖拽移动
20 function  dragMeasureToolbarMove(e) 
21 {
22    getXY(e);
23    m_measureToolbar.style.left = (mouseX-m_measureXOffset) + "px";;
24    m_measureToolbar.style.top = (mouseY-m_measureYOffset) + "px";
25    return false;
26}
27
28 // 测量控件拖拽停止
29 function  dragMeasureToolbarStop(e) 
30 {
31    document.onmousemove = m_measureMoveFunction;
32    document.onmouseup = null;
33    return false;
34}

12.到这里这个Common_WebMappingAppCSharp.zip示例大体上分析完成了，剩下的就是一些比较简单的功能这样也不作分析了。