ArcGIS api for javascript——查找任务-在地图上查找要素
描述
本例展示了如何使用查找任务搜索数据。本例在地图上用图表显示结果并用 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>
