ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）

目的：
1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能，鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性信息。
准备工作：
1. 在ArcGis Server9.3中发布名为usa的MapServer。
2.在使用在线的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer地图数据和jsapi。
完成后的效果图：

开始
1.启动vs新建名为MapIdentify的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了，纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了，毕竟可以调试js脚本了。
2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建wabapp.js的文件，这里用来编写我们自己的js代码了，在Default.aspx页面里添加对这个js文件的引用，同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体，添加完成后的html代码如下：

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Default.aspx.cs "  Inherits = " MapIdentify._Default "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > Untitled Page </ title >
     < link  rel ="stylesheet"  type ="text/css"  href ="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css" >
     < script  type ="text/javascript"  src ="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1" ></ script >
     < script  type ="text/javascript"  src ="javascript/wabapp.js" ></ script >
     < style  type ="text/css" >
<!--
.tab  {
    font-family :  Verdana, Arial, Helvetica, sans-serif ;
    font-size :  12px ;
    font-weight :  bold ;
    color :  #000000 ;
    text-decoration :  none ;
    border :  1px solid #000000 ;
    height :  18px ;
    width :  70px ;
    display :  block ;
    margin-right :  0px ;
    float :  left ;
    text-align :  center ;
    padding-top :  2px ;
    background-color :  #CCCCCC ;
    cursor :  hand ;
}
.a-tab  {
    font-family :  Verdana, Arial, Helvetica, sans-serif ;
    font-size :  12px ;
    font-weight :  bold ;
    color :  #000000 ;
    text-decoration :  none ;
    height :  18px ;
    width :  70px ;
    display :  block ;
    margin-right :  0px ;
    float :  left ;
    text-align :  center ;
    padding-top :  2px ;
    background-color :  #FFFFFF ;
    border-top-width :  1px ;
    border-right-width :  1px ;
    border-bottom-width :  1px ;
    border-left-width :  1px ;
    border-top-style :  solid ;
    border-right-style :  solid ;
    border-bottom-style :  solid ;
    border-left-style :  solid ;
    border-top-color :  #000000 ;
    border-right-color :  #000000 ;
    border-bottom-color :  #FFFFFF ;
    border-left-color :  #000000 ;
    cursor :  hand ;
}
.tr2  {
    border :  1px solid #000000 ;
    background-color :  #FFFFFF ;
    padding :  0px ;
    overflow : scroll ;
    width : 290px ;
    height : 130px ;
    
}
.tr1  {
    height :  21px ;
}
-->
</ style >
</ head >
< body  class ="tundra" >
     < form  id ="form1"  runat ="server" >
     < div  id ="map"  style ="width:500px; height:450px; border:1px solid #000;" ></ div >
     </ form >
</ body >
</ html >

3.上面的html代码非常的简单了，主要可以看一下tab、a-tab、tr2、tr1四个样式的定义了，这几个样式是用来定义 Identify后在infoWindow中内容用的。
4.切换到wabapp.js文件输入如下代码（具体的不做解释了代码注释已经非常详细了）：

dojo.require( " esri.map " );
dojo.require( " esri.tasks.identify " );

var  map, identifyTask, identifyParams, symbol;
function  init()
{
   map  =   new  esri.Map( " map " , { extent:  new  esri.geometry.Extent( - 127.968857954995 , 25.5778580720472 , - 65.0742781827045 , 51.2983251993735 ,  new  esri.SpatialReference({wkid: 4269 })) });
    var  imageryPrime  =   new  esri.layers.ArcGISTiledMapServiceLayer( " http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer " );
   map.addLayer(imageryPrime);
    var  portlandLandBase  =   new  esri.layers.ArcGISDynamicMapServiceLayer( " http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer " );
    // 设置要显示的图层
   portlandLandBase.setVisibleLayers([ 2 , 1 , 0 ]);
    // 设置图层透明度
   portlandLandBase.setOpacity( 0.8 );
   map.addLayer(portlandLandBase);
    // 添加map的onLoad事件监听用来执行initIdentify，初始化Identify
   dojo.connect(map, " onLoad " ,initIdentify);
}

// 初始化Identify
function  initIdentify(map)
{
   dojo.connect(map,  " onClick " , doIdentify);
    // 实例化IdentifyTask
   identifyTask  =   new  esri.tasks.IdentifyTask( " http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer " );
    // IdentifyTask参数设置
   identifyParams  =   new  esri.tasks.IdentifyParameters();
    // 冗余范围
   identifyParams.tolerance  =   3 ;
    // 返回地理元素
   identifyParams.returnGeometry  =   true ;
    // 进行Identify的图层
   identifyParams.layerIds  =  [ 2 , 1 , 0 ];
    // 进行Identify的图层为全部
   identifyParams.layerOption  =  esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
    // 设置infoWindow的大小
   map.infoWindow.resize( 300 ,  200 );
    // 设置infoWindow的标题头
   map.infoWindow.setTitle( " Identify结果 " );
   
    // symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
   symbol  =   new  esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND,  15 ,  new  esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  new  dojo.Color([ 0 , 0 , 0 ]),  1 ),  new  dojo.Color([ 255 , 255 , 0 , 0.5 ]));
}

// 进行Identify
function  doIdentify(evt)
{
    // 清除上一次的高亮显示
   map.graphics.clear();
    // Identify的geometry
   identifyParams.geometry  =  evt.mapPoint;
    // Identify范围
   identifyParams.mapExtent  =  map.extent;
   identifyTask.execute(identifyParams,  function (idResults) { addToMap(idResults, evt); });
}

var  tabledata = new  Array();
// 在infoWindow中显示Identify结果
function  addToMap(idResults, evt)
{
   tabledata = new  Array();
    // 把Identify结果的名称、字段、字段值放入tabledata中
    for ( var  i = 0 ;i < idResults.length;i ++ )
   { 
       var  idResult = idResults[i];
       if (tabledata.length > 0 )
      {
          var  b = false ;
          for ( var  j = 0 ;j < tabledata.length;j ++ )
         {
             if (tabledata[j].displayFieldName == idResult.layerName)
            {
                var  b = true ;
                break ;
            }
            
         }
          if (b)
         {
            tabledata[j].displayField.push(idResult.attributes);
            tabledata[j].feature.push(idResult.feature);
         }
          else
         {
             var  tds = {};
             var  td = new  Array();
             // 图层名称
            tds.displayFieldName = idResult.layerName;
             // 图层字段
             var  oo = idResult.attributes;
            td.push(oo);
            tds.displayField = td;
             var  td2 = new  Array();
            td2.push(idResult.feature);
            tds.feature = td2;
            tabledata.push(tds);
         }
      }
       else
      {
          var  tds = {};
          var  td = new  Array();
         tds.displayFieldName = idResult.layerName;
          var  oo = idResult.attributes;
         td.push(oo);
         tds.displayField = td;
          var  td2 = new  Array();
         td2.push(idResult.feature);
         tds.feature = td2;
         tabledata.push(tds);
      }
   }
    // 设置infoWindow显示内容
   map.infoWindow.setContent(tableHtml(tabledata, 0 ));
    // 设置infoWindow显示
   map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}

// Identify结果的tab切换事件
function  tab(index)
{
   map.infoWindow.setContent(tableHtml(tabledata,index));
}

// infoWindow中内容html
function  tableHtml(rs,index)
{
    var  str = "" ;
    var  str1 = "" ;
    var  str2 = "" ;
    for ( var  i = 0 ;i < rs.length;i ++ )
   {
       if (i == index)
      {
         str1 = str1 + " <span class='a-tab' id=' " + i + " ' οnclick='tab( " + i + " )'> " + rs[i].displayFieldName + " </span> " ;
      }
       else
      {
         str1 = str1 + " <span class='tab' id=' " + i + " ' οnclick='tab( " + i + " )'> " + rs[i].displayFieldName + " </span> " ;
      }
   }
   str2 = trHtml(index);
   str = " <div class='tr1'> " + str1 + " </div><div class='tr2'><table border='1'> " + str2 + " </table></div> " ;
    return  str;
}

function  trHtml(index)
{
    var  str2 = " <tr> " ;
    for  (prop  in  tabledata[index].displayField[ 0 ])
   {
      str2 = str2 + " <td> " + prop + " </td> "
   }
   str2 = str2 + " </tr> " ;
    for ( var  i = 0 ;i < tabledata[index].displayField.length;i ++ )
   {
      str2 = str2 + " <tr style='cursor: hand' οnclick=showFeature(tabledata[ " + index + " ].feature[ " + i + " ])> " ;
       for  (prop  in  tabledata[index].displayField[i])
      {
          if (tabledata[index].displayField[i][prop] == "" )
         {
            str2 = str2 + " <td>&nbsp;</td> "
         }
          else
         {
            str2 = str2 + " <td> " + tabledata[index].displayField[i][prop] + " </td> "
         }
         
      }
      str2 = str2 + " </tr> " ;
      
   }
    return  str2;
}

// 高亮显示选中元素
function  showFeature(feature)
{
   map.graphics.clear();
   feature.setSymbol(symbol);
   map.graphics.add(feature);
}


dojo.addOnLoad(init);

5.上面的代码中主要是IdentifyTask的功能和infoWindow控件的应用了。