描述
本例展示了如何使用图形显示查询结果，如何使用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="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="400px; height:200px; border:1px solid #000; overflow:auto;"> 105 </div> 106 </body> 107 </html>