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代码如下：
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>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部分功能，第一是载入地图进行显示；第二是根据查询语句进行查询；第三是查询到的元素的鼠标移动上去显示信息的功能。具体的说明看代码注释：
<!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>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>
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.完成进行运行查看效果。
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);
