ArcGIS.Server.9.3和ArcGIS API for JavaScript实现语句查询QueryTask（八）

目的：
1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现语句查询能，通过QueryTask实现，根据输入的查询语句对指定图层进行查询然后把查询到的地理元素进行高亮显示，并且给查询到的元素添加鼠标移上去显示信息的功能。
准备工作：
1. 在ArcGis Server9.3中发布名为usa的MapServer。
2.在使用在线的http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer地图数据和jsapi。
完成后的效果图：

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

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Default.aspx.cs "  Inherits = " QueryTask1._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.2/js/dojo/dijit/themes/tundra/tundra.css" >
     < script  type ="text/javascript"  src ="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2" ></ script >
     < script  type ="text/javascript"  src ="javascript/wabapp.js" ></ script >
</ head >
< body  class ="tundra" >
     < form  id ="form1"  runat ="server" >
     < table  border ="1px" >
     < tr >
     < td >
         < input  id ="keystr"  type ="text"  value ="POP2000&gt;5000000"   />< input  id ="Button1"  type ="button"  value ="搜 索"  onclick ="search(dojo.byId('keystr').value)"   /></ td >
     </ tr >
     < tr >
     < td >< div  id ="map"  style ="width:600px; height:450px; border:1px solid #000;" ></ div ></ td >
     </ tr >
     </ table >
     </ form >
</ body >
</ html >

3.页面的html代码非常简单了不做解释了，切换到 wabapp.js文件开始编写js代码，本代码包括3部分功能，第一是载入地图进行显示；第二是根据查询语句进行查询；第三是查询到的元素的鼠标移动上去显示信息的功能。具体的说明看代码注释：

dojo.require( " esri.map " );
dojo.require( " esri.tasks.query " );
var  map,queryTask, query,infoTemplate,symbol,highlightSymbol;

function  init()
{
   map  =   new  esri.Map( " map " );
    // 底图Tile图
    var  imageryPrime  =   new  esri.layers.ArcGISTiledMapServiceLayer( " http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer " );
   map.addLayer(imageryPrime);
}

// 搜索方法
function  search(txt)
{
    if (txt != "" )
   {
       // 实例化QueryTask，查询图层2，也就是States图层
      queryTask  =   new  esri.tasks.QueryTask( " http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer/2 " );
       // 查询参数
      query  =   new  esri.tasks.Query();
       // 需要返回Geometry
      query.returnGeometry  =   true ;
       // 需要返回的字段
      query.outFields  =  [ " OBJECTID " , " Shape " , " AREA " , " STATE_NAME " , " SUB_REGION " , " STATE_ABBR " , " POP2000 " , " POP00_SQMI " , " Shape_Length " , " Shape_Area " ];
       // 查询条件
      query.where  =  txt;
       // 信息模板
      infoTemplate  =   new  esri.InfoTemplate();
       // 设置Title
      infoTemplate.setTitle( " ${STATE_NAME} " );
       // 设置Content
      infoTemplate.setContent( " <b>OBJECTID: </b>${OBJECTID}<br/> "
                              +   " <b>AREA: </b>${AREA}<br/> "
                              +   " <b>STATE_NAME: </b>${STATE_NAME}<br/> "
                              +   " <b>POP2000: </b>${POP2000} " );

       // 设置infoWindow的尺寸
      map.infoWindow.resize( 245 , 125 );
       // 进行查询，完成后调用showResults方法
      queryTask.execute(query,showResults);
   }
    else
   {
      alert( " 请输入查询语句 " );
   }
   
}

// 高亮显示查询结果
function  showResults(results)
{
    // 清除上一次的高亮显示
   map.graphics.clear();
    // 高亮样式
   highlightSymbol  =   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([ 125 , 125 , 125 , 0.35 ]));
     // 查询结果样式
   symbol  =   new  esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  new  esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  new  dojo.Color([ 0 , 0 , 255 , 0.35 ]),  1 ), new  dojo.Color([ 125 , 125 , 125 , 0.35 ]));
   
    var  rExtent  =   new  esri.geometry.Extent();
    // 遍历查询结果
    for  ( var  i = 0 ;i < results.features.length; i ++ )
   {
       var  graphic = results.features[i];
       // 设置查询到的graphic的显示样式
      graphic.setSymbol(symbol);
       // 设置graphic的信息模板
      graphic.setInfoTemplate(infoTemplate);
       // 把查询到的结果添加map.graphics中进行显示
      map.graphics.add(graphic);
       // 获取查询到的所有geometry的Extent用来设置查询后的地图显示
       if (i == 0 )
      {
         rExtent = graphic.geometry.getExtent();
      }
       else
      {
         rExtent = rExtent.union(graphic.geometry.getExtent());
      }
      
   }
    // 设置地图视图范围
   map.setExtent(rExtent);
    // 启用map.graphics的鼠标事件
   map.graphics.enableMouseEvents();
    // map.graphics的鼠标移上去事件
   dojo.connect(map.graphics,  " onMouseOver " ,showTip);
    // map.graphics的鼠标移开事件
   dojo.connect(map.graphics,  " onMouseOut " ,hideTip);
}

// 鼠标移上去事件
function  showTip(evt)
{
    // 获取当前graphic的信息内容
    var  hgraphic = evt.graphic;
    var  content  = hgraphic.getContent();
   map.infoWindow.setContent(content);
    var  title  =  evt.graphic.getTitle();
   map.infoWindow.setTitle(title);
   evt.graphic.setSymbol(highlightSymbol);
   map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

}

// 鼠标移开事件
function  hideTip(evt)
{
    // 隐藏infoWindow
   map.infoWindow.hide();
    // 查询结果取消红色高亮显示
   evt.graphic.setSymbol(symbol);
}

dojo.addOnLoad(init);

4.完成进行运行查看效果。