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-->
</style>

<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; ">
  <!-- 给tr加上拖拽的事件 -->
  <tr id="MeasureToolbar_Title" onmousedown="dragMeasureToolbarStart(event, 'MeasureToolbar')" onmouseover="this.style.cursor='move'" style="background-image:url(images/blank.gif); cursor:move; ">
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="92%"><span class="STYLE1">距离测量</span></td>
        <td width="30">
        <!-- 给给关闭按钮图片加上关闭事件的事件 -->
        <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>
      </tr>
      <tr>
        <td><table cellpadding="0" cellspacing="0" ><tr>
                        <!-- 点功能按钮 -->
                        <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>
                        <!-- 线功能按钮 -->
                        <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>
                        <!-- 面功能按钮 -->
                        <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>
                        </tr></table>
                        <!-- 测试单位隐藏值 -->
                        <input id="MeasureUnits" type="hidden" value="<%=MeasureUnits %>"/>
                        <!-- 面积单位隐藏值 -->
                        <input id="AreaUnits" type="hidden" value="<%=AreaUnits %>"/>
                        </td>
        <td>&nbsp;</td>
      </tr>
      <!-- 显示测量结果的表格行 -->
      <tr id="MeasureToolbar_BodyRow" >
       <td  id="MeasureToolbar_BodyCell" style="background-image:url(images/blank.gif);vertical-align:top;padding-left:5px;padding-top:5px;">
    
                <table id="MeasureToolbarTable" cellspacing="2" cellpadding="1" style=" width: 100%;font: normal 7pt Verdana; ">
                    <tr><td style="background-color: #ffffff" id="MeasureDisplay" colspan="2"  valign="top">
                        在地图上点击画线，双击鼠标结束画线
                    </td></tr>
                </table>

            </td>
            <td id="MeasureToolbar_SideResizeCell" ><img width="5px" height="100%" src="images/blank.gif" alt="" /></td>
      </tr>
    </table></td>
  </tr>
  <tr id="MeasureToolbar_ResizeRow">
            <td ><img height="5px" width="100%" src="images/blank.gif" alt="" /></td>
            <td><img width="5px" src="images/blank.gif" alt="" /></td>
        </tr>
</table>

<script language="javascript" type="text/javascript">
        //回调脚本段
        var measureVectorCallbackFunctionString = "<%=m_callbackInvocation %>";
        //根据浏览器的不同设置相应的图片显示
        if (isIE && ieVersion<7)
        {
           setIE6MeasureToolbarImages(); 
        }  
</script>

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

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

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

<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文件的引用。

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

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

  1//测量控件的内容显示，必须定义为m_measureDisplay，在Esri的display_dotnetadf.js的processCallbackResult的方法中有用到
  2var m_measureDisplay = "MeasureDisplay";
  3//测量控件的状态
  4var m_currentMeasureToolbarTool = "polyline";
  5
  6//测量类型
  7var m_MeasureTypes = new Array();
  8m_MeasureTypes[0] = "point";
  9m_MeasureTypes[1] = "polyline";
 10m_MeasureTypes[2] = "polygon";
 11
 12//
 13function 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
 51function 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
 72function 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
 86function 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//点
function MapCoordsClick(e) 
{
    var vo = map.vectorObject;
    var pix = vo.pixelObject;
    var xycoord = vo.xyCoord;
    getXY(e);
    zleft = mouseX - map.containerLeft;
    ztop = mouseY - map.containerTop;
    vo.clear();
    vo.crosshair(zleft, ztop);
    vo.draw();

    map.xMin=zleft;
    map.yMin=ztop;
    map.getTopLeftTile();
    coordString = + zleft + ":" + ztop;
    var argument = "ControlID=" + map.controlName + "&EventArg=Point&ControlType=Map&coords=" + coordString + "&VectorMode=Measure&VectorAction=Coordinates&minx=" + zleft + "&miny=" + ztop;
    if(checkForFormElement(document, 0, "MeasureUnits"))
    {
       argument += "&MeasureUnits=" + document.forms[0].MeasureUnits.value;
    }
    if(checkForFormElement(document, 0, "AreaUnits")) 
    {
       argument += "&AreaUnits=" + document.forms[0].AreaUnits.value;
    }
    if(checkForFormElement(document, 0, "MapUnits")) 
    {
       argument += "&MapUnits=" + document.forms[0].MapUnits.options[document.forms[0].MapUnits.selectedIndex].value;
    }
    var context = map.controlName + ",Point";
    map.vectorCallbackFunctionString = measureVectorCallbackFunctionString;
    eval(map.vectorCallbackFunctionString);

}

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

 1//测量按钮鼠标移上去的显示效果
 2function checkMeasureToolbarBorder(cell, type) 
 3{
 4    if (type.toLowerCase()==m_currentMeasureToolbarTool)
 5    {
 6       cell.style.borderColor = "Black";
 7    }  
 8    else
 9    {
       cell.style.borderColor = "White";  
    }
        
}

//测量按钮切换
function setMeasureToolbarTool(type) 
{
    m_currentMeasureToolbarTool = type.toLowerCase();
    var cellObj;
    var buttonId = "";
    //显示状态切换
    for(var i=0; i<m_MeasureTypes.length; i++) 
    {
        buttonId = "MeasureToolbarButton_" + m_MeasureTypes[i];
        cellObj = document.getElementById(buttonId);
        if (cellObj!=null) 
        {
            if (m_MeasureTypes[i]==m_currentMeasureToolbarTool) 
            {
                cellObj.style.borderColor = "Black";
                cellObj.style.backgroundColor = "#EEEEEE";
                startMeasure();
            }
            else 
            {
                cellObj.style.borderColor = "White";
                cellObj.style.backgroundColor = "White";
            }
        }
    }
}

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

 1//测量控件拖拽开始
 2function 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);
        m_measureXOffset = mouseX - box.left;
        m_measureYOffset = mouseY - box.top;
    }
    m_measureMoveFunction = document.onmousemove; 
    document.onmousemove = dragMeasureToolbarMove;
    document.onmouseup = dragMeasureToolbarStop;
    return false;
}

//测量控件拖拽移动
function dragMeasureToolbarMove(e) 
{
    getXY(e);
    m_measureToolbar.style.left = (mouseX-m_measureXOffset) + "px";;
    m_measureToolbar.style.top = (mouseY-m_measureYOffset) + "px";
    return false;
}

//测量控件拖拽停止
function dragMeasureToolbarStop(e) 
{
    document.onmousemove = m_measureMoveFunction;
    document.onmouseup = null;
    return false;
}

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