ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能和FindTask功能应用（七）

目的：
1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现查询定位中心的功能，主要是通过FindTask功能实现的，输入关键字后对指定的图层以及字段进行关键字查询并且把查询到的结果显示在右边的Grid中，点击Grid中的某一行时进行定位中心进行显示。
准备工作：
1. 在ArcGis Server9.3中发布名为usa的MapServer。
2.在使用在线的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer地图数据和jsapi。
完成后的效果图：

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

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Default.aspx.cs "  Inherits = " FindTask._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 >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />
     < link  rel ="stylesheet"  type ="text/css"  href ="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css"   />
     < link  rel ="stylesheet"  type ="text/css"  href ="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dojox/grid/resources/Grid.css" />
     < link  rel ="stylesheet"  type ="text/css"  href ="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dojox/grid/resources/tundraGrid.css" />

     < style  type ="text/css" >
        .style1
         {
            width :  301px ;
         }

     </ style >
     < script  type ="text/javascript" > djConfig = {parseOnLoad: true } </ script >
     < script  type ="text/javascript"  src ="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2" ></ script >  
     < script  type ="text/javascript"  src ="javascript/mapapp.js" ></ script >
</ head >
< body  class ="tundra" >
     < form  id ="form1"  runat ="server" >
    进行查询 < input  id ="searchText"  value ="KS"  type ="text"   />< input  id ="Button1"  type ="button"  
            value ="查 找"  onclick ="execute(dojo.byId('searchText').value);"   />
     < table  border ="1px" >
     < tr >< td >< div  id ="map"  style ="width:400px; height:300px; border:1px solid #000;" ></ div >
     </ td >
     < td  valign ="top"  class ="style1" >
     < table  dojoType ="dojox.grid.DataGrid"  jsid ="gridWidget"  id ="gridWidget"  rowsPerPage ="5"  rowSelector ="20px"   >
       < thead >
         < tr >
           < th  field ="AREANAME"   > AREANAME </ th >
           < th  field ="CAPITAL"   > CAPITAL </ th >
           < th  field ="ST"   > ST </ th >
         </ tr >
       </ thead >
     </ table >

     </ td >
     </ tr >
     </ table >
</ form >
</ body >
</ html >

3.上面的html中添加了Grid.css和tundraGrid.css两个样式文件的引用，因为在本例子中用dojox.grid.DataGrid作为数据表格显示控件，所以需要添加这2个样式，同时在页面代码的开头处添加了<script type="text/javascript">djConfig={parseOnLoad:true}</script>这个行js代码。
4. 上面的html中用到了 dojox.grid.DataGrid控件可以按照上面的地方进行设置，其它更多的请参考dojo的帮助文档。
5.完成页面的html后切换到 mapapp.js的文件开始编写js功能，js代码包括3块功能，第一是地图的载入显示代码；第二是关键字查询的FindTask的功能；第三是 DataGrid的行点击后进行定位中心显示的功能。具体的说明和代码如下：

dojo.require( " esri.map " );
dojo.require( " esri.tasks.find " );
dojo.require( " dojox.grid.DataGrid " );
dojo.require( " dojo.data.ItemFileReadStore " );

var  findTask, findParams, map;
function  init()
{
   startExtent  =   new  esri.geometry.Extent( - 127.968857954995 , 25.5778580720472 , - 65.0742781827045 , 51.2983251993735 ,  new  esri.SpatialReference({wkid: 4269 }));
   map  =   new  esri.Map( " map " );
    // 底图Tile图
    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.setExtent(startExtent);
    // 给DataGrid添加行点击事件
   dojo.connect(gridWidget,  " onRowClick " , onRowClickHandler);

    // 实例化FindTask
   findTask  =   new  esri.tasks.FindTask( " http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer " );
    // FindTask的参数
   findParams  =   new  esri.tasks.FindParameters();
    // 返回Geometry
   findParams.returnGeometry  =   true ;
    // 查询的图层id
   findParams.layerIds  =  [ 0 , 1 , 2 ];
    // 查询字段
   findParams.searchFields  =  [ " BJECTID " , " AREANAME " , " CAPITAL " , " ST " , " AREA " ];
}

// 给DataGrid行点击事件
function  onRowClickHandler(evt)
{
    // 获取点击行
    var  row  =  gridWidget.getItem(evt.rowIndex);
    // 获取点击行的OBJECTID
    var  id = row.OBJECTID;
    var  sGrapphic;
    // 遍历地图的graphics查找OBJECTID和点击行的OBJECTID相同的Grapphic
    for ( var  i = 0 ;i < map.graphics.graphics.length;i ++ )
   {
       var  cGrapphic = map.graphics.graphics[i];
       if ((cGrapphic.attributes)  &&  cGrapphic.attributes.OBJECTID == id)
      {
         sGrapphic = cGrapphic;
          break ;
      }
   }
   
    var  sGeometry = sGrapphic.geometry;
    // 当点击的行对应的Geometry为点类型时进行地图中心定位显示
    if (sGeometry.type == " point " )
   {
       // var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25]));
       // sGrapphic.setSymbol(hsymbol);
       var  cPoint = new  esri.geometry.Point();
      cPoint.x = sGeometry.x;
      cPoint.y = sGeometry.y;
      map.centerAt(cPoint);
   }
    // 当点击的行对应的Geometry为线或面类型时获取Geometry的Extent进行中心定位显示
    else
   {
       var  sExtent = sGeometry.getExtent();
      map.setExtent(sExtent);
   }
}

// 根据输入的关键字进行findTask操作
function  execute(searchText)
{
   findParams.searchText  =  searchText;
   findTask.execute(findParams,showResults);
}

// 显示findTask的结果
function  showResults(results)
{
   // 清楚上一次的高亮显示
   map.graphics.clear();
    var  dataForGrid  =  [];
    for ( var  i = 0 ;i < results.length;i ++ )
   {
       var  curFeature = results[i];
       var  graphic  =  curFeature.feature;
       // 把查询到的对象的字段信息等插入到dataForGrid中
      dataForGrid.push(graphic.attributes);
       // 根据类型设置显示样式
       switch  (graphic.geometry.type)
      {
          case   " point " :
               var  symbol  =   new  esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,  10 ,  new  esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  new  dojo.Color([ 255 , 0 , 0 ]),  1 ),  new  dojo.Color([ 0 , 255 , 0 , 0.25 ]));
               break ;
          case   " polyline " :
               var  symbol  =   new  esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,  new  dojo.Color([ 255 , 0 , 0 ]),  1 );
               break ;
          case   " polygon " :
               var  symbol  =   new  esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE,  new  esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,  new  dojo.Color([ 255 , 0 , 0 ]),  2 ),  new  dojo.Color([ 255 , 255 , 0 , 0.25 ]));
               break ;
       }
        // 设置显示样式
       graphic.setSymbol(symbol);
        // 添加到graphics进行高亮显示
       map.graphics.add(graphic);
   }
   
    // dojox.grid.DataGrid显示的一些设置，具体参考dojo的DataGrid
    var  data  =  {identifier:  " OBJECTID " ,label:  " OBJECTID " , items: dataForGrid};
    var  store  =   new  dojo.data.ItemFileReadStore({ data:data });
    // gridWidget为dojox.grid.DataGrid
   gridWidget.setStore(store);
    // 过滤条件
   gridWidget.setQuery({OBJECTID:  ' * '  });

}

dojo.addOnLoad(init);

6.完成运行查看效果。