find查詢與grid
1、 目的：完成查詢，輸出查詢結果並在地圖上高亮顯示符合條件的圖元，單擊輸出信息後定位到該Graphics，單擊可顯示詳細信息。
2、 準備：
數據：本機服務數據http://localhost/ArcGIS/rest/services/China/MapServer
其中“0”層是中國的政區圖
3、 開發步驟：
（1） 設計頁面以及代碼：
頁面中心爲地圖<div>，地圖的上面爲查詢按鈕和條件文本框以及查詢結果顯示層！具體頁面設計代碼爲：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="find_grid.aspx.cs" Inherits="find" %>
<!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">
<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="find.js"></script>
<title>查詢並與ESRI的Grid綁定</title>
<style type="text/css">
#Text1
{
width: 234px;
}
.style1
{
width: 100%;
}
</style>
</head>
<body class="tundra">
<form id="form1" runat="server">
<div id="map" style="border: thick dotted #FF0000; height:570px; width:990px; top: 0px; right: 0px;position:absolute;"></div>
<div style="height:300px; width:222px; top:240px; right: 10px; z-index:200; position:absolute;">
<table class="style1">
<tr>
<td>
<input id="searth_text" type="text" />
<input id="Button1" type="button" value="查詢" onclick="startquery();"/>
</td>
</tr>
<tr>
<td>
<div id="result_query" style="border: thin double #0000FF; height:300px;overflow:auto; visibility: hidden;">
<table id="mygrid" border="1" style="width: 90%"></table>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
（2） Find.js編寫：
程序爲查詢數據中固定字段“PROV”，查詢條件爲PROV的值，即查詢條件爲PROV=“輸入的數值”，因程序中註釋很明確，故再次不再冗術，完整代碼爲：
dojo.require("esri.map");//註冊引用map控件
dojo.require("esri.tasks.find");
var findTask, findParams;
var map,symbol;
var grid, store;
function init()
{
map = new esri.Map("map",{slider:true});//實例化map控件
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/ArcGIS/rest/services/China/MapServer");
map.addLayer(dynamicMapServiceLayer);//加載圖層
//定義查詢
findTask = new esri.tasks.FindTask("http://localhost/ArcGIS/rest/services/China/MapServer");
//定義查詢參數
findParams = new esri.tasks.FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["PROV"];
}
dojo.addOnLoad(init);//加載是調用init初始化地圖
////按鈕單擊開始查詢
function startquery() {
findParams.searchText = document.getElementById("searth_text").value;//獲取查詢條件
findTask.execute(findParams,showResults);
document.getElementById("result_query").style.visibility='visible';//顯示結果層<div>
}
/////早地圖上高亮顯示查詢結果
function showResults(results)
{
map.graphics.clear();
symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,0]), 2), new dojo.Color([0,0,0,0]));
var items = []; //存儲查詢結果屬性值的變量
for (var i=0, il=results.length; i<il; i++) {
items.push(results[i].feature.attributes); //向items中壓入數據
var graphic = results[i].feature;//以下爲高亮顯示查詢結果
graphic.setSymbol(symbol);
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle(graphic.attributes.FID);
graphic.setInfoTemplate(infoTemplate);
map.graphics.add(graphic);
}
var mygrid=document.getElementById("mygrid");
//以下爲給向表格mygrid中添加查詢結果
for(i=0;i<items.length;i++)
{
var myrow=mygrid.insertRow();//添加行
myrow.οnmοuseοver=function(){onRowOverHandler(this);};///動態定義行事件
myrow.οnmοuseοut=function(){onRowOutHandler(this);};
myrow.οnclick=function(){onRowClickHandler(this);};
var mycell=myrow.insertCell();//添加單元格
mycell.innerHTML=items[i].PROV;//寫入值
var mycell=myrow.insertCell();
mycell.innerHTML=items[i].AREA;
var mycell=myrow.insertCell();
mycell.innerHTML=items[i].FID;
}
}
//自定義grid的單擊行的事件（完成定位）
var selectedTaxLot;//要定位的Graphic
function onRowClickHandler(myrow)
{
var myid=myrow.cells[2].lastChild.nodeValue;//獲取表格行的第三列的數據
if(selectedTaxLot!=null)//判斷是否有要定位Graphic
{selectedTaxLot.setSymbol(symbol);}//如果有將其symbol設爲統一風格
for (var i=0, il=map.graphics.graphics.length; i<il; i++) {//獲取定位的Graphic
var currentGraphic = map.graphics.graphics[i];
if ((currentGraphic.attributes) && currentGraphic.attributes.FID == myid){
selectedTaxLot = currentGraphic;
break;
}
}
var 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]), 3), new dojo.Color([125,125,125,0.35]));
selectedTaxLot.setSymbol(highlightSymbol);//設置定位圖元的symbol
var taxLotExtent = selectedTaxLot.geometry.getExtent();
map.setExtent(taxLotExtent);//定位到選定Graphic
}
//自定義grid鼠標移動到行上的事件
function onRowOverHandler(myrow)
{
myrow.style.backgroundColor="#ff0000";
myrow.style.cursor="pointer";
}
function onRowOutHandler(myrow)
{
myrow.style.backgroundColor="#ffffff";
myrow.style.cursor="defoult";
}
4、 總結：
程序完成了查詢的一般方法，並且提供自動定位！
5、 效果圖爲：