描述
本例展示了如何在另外一个任务里使用一个任务的结果。单击地图查看被单击的点的1公里范围内的缓存(如果需要可以修改这个默认的缓存距离)。也可以看缓存区的这些点的人口普查街区信息。单击一个点查看更多的人口普查街区的信息。
通过GeometryService, QueryTask和一些事件监听器实现了所有的功能:
- ·GeometryService对象提供访问到ArcGIS Server的几何服务,该服务可以缓冲,投影和简化几何体。
- ·QueryTask能根据地理或属性条件从地图图层检索要素。在本例中,查询基于地理(在缓存中的区域)。有趣地是,地图图层(人口普查街区组点)不是初始显示在地图上的。对很多这样的查询任务,可以仅仅显示需要的结果元素。
- ·事件监听器帮助脚本知道事件什么时候发生。监听器说,“当A发生,做B”。监听器可以将几个操作连在一起,象查询后缓存。每当见到dojo.connect()方法,脚本正在监听一个事件。这有一个监听器的例子:
· dojo.connect(map, "onClick", function(evt) {
· ...
}
这三个参数表示对象的事件将在哪发生(the map),本身是什么事件(a mouse click)和当事件发生时运行什么函数。
下面是本例中事情发生的顺序:
1.某人单击地图,触发地图的"onClick"事件
2.几何服务缓存点,触发几何服务的"onBufferComplete"事件
3.缓存的虚线符号被增加到地图上并且查询任务执行,触发查询任务的"onComplete"事件
4.人口普查区被增加到地图上,使用函数sumPopulation统计人口
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 7 <title>QueryTask with query geometry from another task</title> 8 <link rel="stylesheet" type="text/css" 9 href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css"> 10 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> 11 <script type="text/javascript"> 12 dojo.require("esri.map"); 13 dojo.require("esri.tasks.query"); 14 dojo.require("esri.tasks.geometry"); 15 16 function init() { 17 var startExtent = new esri.geometry.Extent(-95.271, 38.933, -95.228,38.976, new esri.SpatialReference({wkid:4326}) ); 18 var map = new esri.Map("mapDiv", { extent: startExtent }); 19 //加载地图时添加查询功能 20 dojo.connect(map, "onLoad", initFunctionality); 21 22 var streetMap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"); 23 //var censusMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/"); 24 map.addLayer(streetMap); 25 } 26 //初始化功能 27 function initFunctionality(map) { 28 var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0"); 29 30 //确定代理页面使用toJson几何服务并且载荷大于2000 31 //如果不是可用的缓冲区,则会请求一个http Post代理. 32 esriConfig.defaults.io.proxyUrl= "/arcgisserver/apis/javascript/proxy/proxy.ashx"; 33 esriConfig.defaults.io.alwaysUseProxy = false; 34 35 //查询 36 var query = new esri.tasks.Query(); 37 query.returnGeometry = true; 38 query.outFields = ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"]; 39 40 //几何服务端点 41 var gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer"); 42 43 // +++++监听地图的onClick事件+++++ 44 dojo.connect(map, "onClick", function(evt) { 45 map.graphics.clear(); 46 var symbol = new esri.symbol.SimpleMarkerSymbol(); 47 var graphic = new esri.Graphic(evt.mapPoint, symbol); 48 var params = new esri.tasks.BufferParameters(); 49 params.features = [ graphic ]; 50 51 // 缓冲线性单位(米,公里...) 52 params.distances = [ dojo.byId('bufferDistance').value ]; 53 params.unit = esri.tasks.BufferParameters.UNIT_KILOMETER; 54 params.bufferSpatialReference = new esri.SpatialReference({wkid: 102113}); 55 gsvc.buffer(params); 56 dojo.byId('messages').innerHTML = "<b>Creating Buffer Using GeometryService...</b>"; 57 }); 58 59 // +++++监听GeometryService类的onBufferComplete方法+++++ 60 dojo.connect(gsvc, "onBufferComplete", function(graphics) { 61 var symbol = new esri.symbol.SimpleFillSymbol( 62 "none", 63 new esri.symbol.SimpleLineSymbol( 64 "dashdot", 65 new dojo.Color([255,0,0]), 66 2), 67 new dojo.Color([255,255,0,0.25])); 68 var graphic = new esri.Graphic(graphics[0].geometry,symbol); 69 map.graphics.add(graphic); 70 71 query.geometry = graphic.geometry; 72 queryTask.execute(query); 73 dojo.byId('messages').innerHTML = "<b>Executing Query with Result BufferGeometry...</b>"; 74 }); 75 76 // +++++监听QueryTask中的executecomplete事件+++++ 77 dojo.connect(queryTask, "onComplete", function(fset) { 78 //创建所选标记的图形 79 var symbol = new esri.symbol.SimpleMarkerSymbol(); 80 symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE; 81 symbol.setSize(8); 82 symbol.setColor(new dojo.Color([255,255,0,0.5])); 83 84 var infoTemplate = new esri.InfoTemplate("Block: ${BLOCK}","${'*'}"); 85 86 var resultFeatures = fset.features; 87 for (var i=0, il=resultFeatures.length; i<il; i++) { 88 var graphic = resultFeatures[i]; 89 graphic.setSymbol(symbol); 90 graphic.setInfoTemplate(infoTemplate); 91 map.graphics.add(graphic); 92 } 93 var totalPopulation = sumPopulation(fset); 94 var r = ""; 95 r = "<b>The total Census Block population within the buffer is <i>" 96 + totalPopulation + "</i>.</b>"; 97 dojo.byId('messages').innerHTML = r; 98 }); 99 } 100 101 function sumPopulation(fset) { 102 var features = fset.features; 103 var popTotal = 0; 104 for (var x = 0; x < features.length; x++) { 105 popTotal = popTotal + features[x].attributes['POP2000']; 106 } 107 return popTotal; 108 } 109 110 dojo.addOnLoad(init); 111 </script> 112 </head> 113 114 <body class="tundra"> 115 Zoom to area and click on map to select census block points within the buffered circle.<br/> 116 Buffer distance (in kilometers): <input type="text" id="bufferDistance" value="1" size="5"/> 117 <div id="mapDiv" style="width: 500px; height:500px;"></div> 118 <span id="messages"></span> 119 </body> 120 </html>