ArcGIS api for javascript——图形-选择一个范围内的点

描述

本例展示了如何使用图形显示查询结果，如何使用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>