描述
本例展示了如何使用查找任務搜索數據。本例在地圖上用圖表顯示結果並用 DojoX的grid格式化結果為表格樣式。
FindTask構造函數需要一個ArcGIS Server地圖服務的URL。本例使用ESRI sample server上的ESRI_StatesCitiesRivers_USA服務。
findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
FindParameters指出哪些圖層和字段將被搜索。如果多個圖層包含相同的字段名稱（例如"NAME"）兩個字段都要被搜索。注意 returnGeometry被設置為true以便結果能被顯示在地圖上。
findParams = new esri.tasks.FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0,1,2];
findParams.searchFields = ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"];
FindParameters的searchText參數是任務將要搜索什么。這個文本來自輸入框並且當單擊Find按鈕時被發送到execute函數。這行代碼執行任務:
findTask.execute(findParams,showResults);
當任務執行結束，showResults函數循環訪問FindResult里的graphics數組並增加每個圖形到地圖。函數也增加每個結果的屬性到表格。
注意: ArcGIS JavaScript API的版本1.2使用Dojo 1.2，這有一個改良的表格DataGrid。如果移植應用到ArcGIS JavaScript API 1.2並且想要在本例中繼續使用舊版的表格，在代碼中查找這行:
dojo.require("dojox.grid._data.model");
修改為:
dojo.require("dojox.grid.compat._data.model");
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 6 <title>Find Task</title> 7 <style type="text/css"> 8 @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css"; 9 @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dojox/grid/compat/_grid/Grid.css"; 10 @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dojox/grid/compat/_grid/tundraGrid.css"; 11 body { font-size: 0.9em; 12 font-family: Geneva, Arial, Helvetica, sans-serif; 13 } 14 .heading { font-weight: bold; 15 padding-bottom: 0.25em; 16 } 17 #grid { border: 1px solid #333; 18 width: 33em; 19 height: 30em; 20 } 21 </style> 22 <script type="text/javascript">djConfig={parseOnLoad:true}</script> 23 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script> 24 <script type="text/javascript" language="Javascript"> 25 dojo.require("dojox.grid.Grid"); 26 dojo.require("dojox.grid.compat._data.model"); //Because of changes in the Dojo data grid and model you must load the comapt_data.model if using version 1.3. 27 dojo.require("esri.map"); 28 dojo.require("esri.tasks.find"); 29 30 var findTask, findParams, map; 31 32 function init() { 33 map = new esri.Map("map"); 34 var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {id:"usa"}); 35 map.addLayer(censusMapLayer); 36 37 //實例化FindTask 38 findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer"); 39 //FindTask的參數 40 findParams = new esri.tasks.FindParameters(); 41 //返回Geometry 42 findParams.returnGeometry = true; 43 //查詢的圖層id 44 findParams.layerIds = [0,1,2]; 45 //查詢字段 46 findParams.searchFields = ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"]; 47 48 } 49 50 //根據輸入的關鍵字進行findTask操縱 51 function execute(searchText) { 52 //set the search text to find parameters 53 findParams.searchText = searchText; 54 findTask.execute(findParams,showResults); 55 } 56 //顯示findTask的結果 57 function showResults(results) { 58 59 //清除上一次的高亮顯示 60 map.graphics.clear(); 61 var dataForGrid = []; 62 63 for (var i=0, j=results.length; i<j; i++) { 64 var curFeature = results[i]; 65 var graphic = curFeature.feature; 66 67 //把查詢到的字段信息等插入到dataForGrid 68 var layerName = curFeature.layerName; 69 var layerId = curFeature.layerId; 70 var foundFieldName = curFeature.foundFieldName; 71 var foundFieldValue = graphic.attributes[foundFieldName]; 72 73 var attValues = [layerName,layerId,foundFieldName,foundFieldValue]; 74 dataForGrid.push(attValues); 75 //根據類型設置顯示樣式 76 switch (graphic.geometry.type) { 77 case "point": 78 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])); 79 break; 80 case "polyline": 81 var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1); 82 break; 83 case "polygon": 84 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])); 85 break; 86 } 87 //設置顯示樣式 88 graphic.setSymbol(symbol); 89 //添加到graphics進行高亮顯示 90 map.graphics.add(graphic); 91 } 92 93 var model = new dojox.grid.data.Table(null, dataForGrid); 94 95 var view1 = { 96 cells: [ 97 [{name: 'Layer Name'},{name: 'Layer ID'},{name: 'Found Field Name'},{name: 'Found Field Value'}] 98 ] 99 }; 100 101 var layout = [ view1 ]; 102 gridWidget.setModel(model); 103 gridWidget.setStructure(layout); 104 105 } 106 107 dojo.addOnLoad(init); 108 </script> 109 </head> 110 <body class="tundra"> 111 <div class="heading">Find State/City/River: <input type="text" id="searchText" value="KS" /> 112 <input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);" /></div> 113 <div id="map" style="width:400px; height:300px; border:1px solid #000;"></div> 114 <div id="grid" dojoType="dojox.Grid" jsId="gridWidget" structure="layout"></div> 115 </body> 116 </html>