ArcGIS api for javascript——用緩存區查詢地圖


描述

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM