ArcGIS api for javascript——加載查詢結果,單擊顯示信息窗口


描述

本例在開始和地圖交互前執行一個查詢並加載結果。這允許用戶點擊任意郡縣立即看到一個InfoWindow

QueryTask構造函數接受被查詢的圖層,即 ESRI sample serverESRI_Census_USA服務的郡縣圖層(索引號是3)。 注意這和地圖使用的不是一個服務。地圖使用來自 ArcGIS OnlineESRI_StreetMap_World_2D服務。 通過這種方式能夠使用在視覺上匹配的不同服務作為地圖和查詢任務的服務。 注意本例中,街道地圖被顯示在沒有郡縣可見的比例,避免查詢任務返回結果和郡縣要素視覺沖突的可能性。

查詢的where clause限制了結果是在美國南卡羅來納州的郡縣。還要注意 returnGeometry被設置為true以便要素能夠被顯示在地圖上。

 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 geometry, results as an InfoWindow onClick</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" language="Javascript">
12       dojo.require("esri.map");
13       dojo.require("esri.tasks.query");
14 
15       function init() {
16           //開始時地圖范圍:經緯度、地理坐標系
17         var startExtent = new esri.geometry.Extent(-83.41, 31.98, -78.47, 35.28,new esri.SpatialReference({wkid:4326}));
18         //創建地圖
19         var map = new esri.Map("mapDiv",{extent:startExtent});
20         dojo.connect(map, "onLoad", initFunctionality);
21 
22         //創建並添加層
23         var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
24         map.addLayer(layer);
25       }
26 
27       function initFunctionality(map) {
28         //創建查詢任務
29         var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
30 
31         //創建查詢過濾器   
32         var query = new esri.tasks.Query();
33         query.returnGeometry = true;
34         query.outFields = ["NAME", "POP2000",
35         "POP2007", "POP00_SQMI", "POP07_SQMI"];
36         query.where = "STATE_NAME = 'South Carolina'";
37 
38         var infoTemplate = new esri.InfoTemplate();
39         infoTemplate.setTitle("${NAME}");
40         infoTemplate.setContent( "<b>2000 Population: </b>${POP2000}<br/>"
41                              + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>"
42                              + "<b>2007 Population: </b>${POP2007}<br/>"
43                              + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI}");
44 
45         map.infoWindow.resize(245,105);
46 
47         //監聽onComplete事件的處理結果,使用queryTask.execute方法回調
48         dojo.connect(queryTask, "onComplete", function(featureSet) {
49               map.graphics.clear();
50               var symbol = new esri.symbol.SimpleFillSymbol(
51                   esri.symbol.SimpleFillSymbol.STYLE_SOLID,
52                 new esri.symbol.SimpleLineSymbol(
53                     esri.symbol.SimpleLineSymbol.STYLE_SOLID,
54                         new dojo.Color([255,255,255,0.35]), 
55                         1),
56                    new dojo.Color([125,125,125,0.35])
57                    );
58           //QueryTask返回featureSet類型.通過featureSet的循環把他們添加到信息窗口
59           for (var i=0, il=featureSet.features.length; i<il; i++) {
60             //從featureSet中得到當前實例.
61             //從當前實例賦值給graphic
62             var graphic = featureSet.features[i];
63             graphic.setSymbol(symbol);
64             graphic.setInfoTemplate(infoTemplate);
65 
66             //添加當前這個圖形到地圖圖層中
67             map.graphics.add(graphic);
68           }
69         });
70 
71         queryTask.execute(query);
72       }
73 
74       dojo.addOnLoad(init);
75     </script>
76   </head>
77   <body class="tundra">
78     Single click a county in South Carolina to get more information.
79     <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
80   </body>
81 </html>

 


免責聲明!

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



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