描述
本例展示了如何在另外一個任務里使用一個任務的結果。單擊地圖查看被單擊的點的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>