描述
本例展示了如何使用圖形顯示查詢結果，如何使用draw toolbar在地圖上選擇圖形和如何修改圖形符號為“高亮”。
在地圖上畫一個矩形區域，加亮矩形范圍內的城市。這個應用統計高亮的城市個數並列出城市名稱。能夠畫另外一個矩形來改變高亮的城市集合。
初始的在地圖上見到的城市集和是應用加載時生成的查詢結果。查詢找到ESRI_StatesCitiesRivers_USA地圖服務的Cities layer的Washington州的所有城市。城市被加到地圖的GraphicsLayer。
draw toolbar幫助用戶在地圖上畫矩形。工具欄不是一個用戶界面控件；工具欄僅僅是為了顯示矩形和捕獲范圍保存JavaScript代碼的幫助類。 創建功能欄，激活繪制的類型，提供一個繪制完成時做些事情的事件監聽器。在本例中，所以這些都在initToolbar函數中實現:
function initToolbar(map) {
var tb = new esri.toolbars.Draw(map);
dojo.connect(tb, "onDrawEnd", findPointsInExtent);
tb.activate(esri.toolbars.Draw.EXTENT);
}
當畫矩形結束時回調函數findPointsInExtent被調用。這個函數循環訪問地圖里每個城市 graphic並確定它是否在繪制工具欄返回的范圍內。如果在范圍內，代碼修改城市的圖形為加亮符號並且增加城市信息到結果數組。結果數組被用於創建地圖下面看到的城市名稱列表。
注意InfoTemplate利用html在一個表格行中放置每個結果。 results.join()方法連結結果數組中的所有的元素為一個字符串。這個字符串被放置在<table>標簽里面來創建一個表格。
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>Points in Extent</title> 7 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css"> 8 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script> 9 <script type="text/javascript"> 10 dojo.require("esri.map"); 11 dojo.require("esri.toolbars.draw"); 12 dojo.require("esri.tasks.query"); 13 14 //global variables 15 var map, defaultSymbol, highlightSymbol, resultTemplate; 16 17 function init() { 18 //create map, set initial extent and disable default info window behavior 19 20 //創建地圖，設置初始化邊界 21 map = new esri.Map("map", { 22 extent: new esri.geometry.Extent(-125.9016637859635, 44.600742276385304, -114.6516637859635, 50.225742276385304, new esri.SpatialReference({wkid:4326})), 23 showInfoWindowOnClick:false 24 }); 25 dojo.connect(map, "onLoad", initToolbar); 26 map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer")); 27 28 //initialize symbology 29 defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,0,255])); 30 highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0])); 31 32 //initialize & execute query 33 var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0"); 34 var query = new esri.tasks.Query(); 35 query.where = "STATE_NAME = 'Washington'"; 36 query.returnGeometry = true; 37 query.outFields = ["CITY_NAME"]; 38 queryTask.execute(query, addPointsToMap); 39 40 //info template for points returned 41 resultTemplate = new esri.InfoTemplate("City", "<tr><td>${CITY_NAME}</tr></td>"); 42 } 43 44 //initialize drawing toolbar 45 function initToolbar(map) { 46 var tb = new esri.toolbars.Draw(map); 47 48 //find points in Extent when user completes drawing extent 49 dojo.connect(tb, "onDrawEnd", findPointsInExtent); 50 51 //set drawing mode to extent 52 tb.activate(esri.toolbars.Draw.EXTENT); 53 } 54 55 //add points to map and set their symbology + info template 56 function addPointsToMap(featureSet) { 57 var features = featureSet.features; 58 for (var i=0, il=features.length; i<il; i++) { 59 map.graphics.add(features[i].setSymbol(defaultSymbol).setInfoTemplate(resultTemplate)); 60 } 61 } 62 63 //find all points within argument extent 64 function findPointsInExtent(extent) { 65 var graphics = map.graphics.graphics; 66 var results = []; 67 var graphic; 68 for (var i=0, il=graphics.length; i<il; i++) { 69 graphic = graphics[i]; 70 71 //if point is contained within extent, highlight it and add for display in results list 72 if (extent.contains(graphic.geometry)) { 73 graphic.setSymbol(highlightSymbol); 74 results.push(graphic.getContent()); 75 } 76 //else if point was previously highlighted, reset its symbology 77 else if (graphic.symbol == highlightSymbol) { 78 graphic.setSymbol(defaultSymbol); 79 } 80 } 81 82 //display number of points in extent 83 dojo.byId("inextent").innerHTML = results.length; 84 85 //display list of points in extent 86 dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>"; 87 } 88 89 dojo.addOnLoad(init); 90 </script> 91 92 </head> 93 <body class="tundra"> 94 Draw an Extent on the map to find all points within this extent 95 96 <!-- map div --> 97 <div id="map" style="width:800px; height:400px; border:1px solid #000;"></div> 98 <br /> 99 100 <!-- display number of points in drawn extent --> 101 <b># of points in extent = <span id="inextent">0</span></b> 102 103 <!-- list points in extent --> 104 <div id="results" style="width:400px; height:200px; border:1px solid #000; overflow:auto;"> 105 </div> 106 </body> 107 </html>