ArcGIS api for javascript——用图表显示查询结果

描述

本例展示了如何使用查询任务结果用去Google Chart API构建一个图表。当运行本例，点击一个郡县去看出现在一个无焦点的InfoWindow中的人口统计的数据的图表。

函数init创建了一个Map，一个 QueryTask和一个Query。注意QueryTask的构造函数需要地图服务里一个图层的URL (http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3)。 URL末尾的数字3是地图目录里郡县图层的索引号。要找到你自己的地图服务的URL及它们的图层索引，使用Services Directory

Query对象包含查询的条件，例如查询什么几何体，是否返回几何体以便它能够显示在地图上，以及哪些字段被查询。

当某人单击地图时，下面的时间监听器会察觉：

dojo.connect(map, "onClick", doQuery);

上面监听器中的doQuery函数捕获地图单击的位置并将单击位置设置为query.Geometry。这个点相交的郡县将被查询。下列代码行运行查询任务：

queryTask.execute(query);

当查询任务完成，另一个事件激发，调用getChart函数:

dojo.connect(queryTask, "onComplete", getChart);

getChart读取最初以 FeatureSet返回的查询结果。函数解析人口统计总数，为每个人口统计组计算百分比，构建Google Chart API的URL并发送请求。这个函数也用红色的虚线轮廓象征查询的要素并在图表被创建后显示信息窗口。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 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>Demographic Charts</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.tasks.query");
12 
13       var map, queryTask, query, click;
14       var wd = 240;
15       var ht = 110;
16       var chartParams = { cht:"p3", chl:"White|Black|Hispanic|Asian|Other" };
17 
18       function init() {
19         map = new esri.Map("map", { extent:new esri.geometry.Extent({ "xmin": -125.947265625, "ymin": 31.17919921875, "xmax": -103.974609375, "ymax": 42.16552734375  }) });
20         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
21         map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", { opacity:0.4 }));
22         dojo.connect(map, "onClick", doQuery);
23 
24         queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
25         dojo.connect(queryTask, "onComplete", getChart);
26 
27         dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});
28         query = new esri.tasks.Query();
29         query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
30         query.outFields = ["NAME", "WHITE", "BLACK", "ASIAN", "HISPANIC", "OTHER"];
31         query.returnGeometry = true;
32 
33         map.infoWindow.resize(275,150);
34       }
35 
36       function doQuery(evt) {
37         click = query.geometry = evt.mapPoint;
38         queryTask.execute(query);
39       }
40 
41       function getChart(featureSet) {
42         map.graphics.clear();
43 
44         var features = featureSet.features;
45         var feature, attributes, white, black, asian, hispanic, other, total, graphic;
46         for (var i=0; i<features.length; i++) {
47           feature = features[i];
48           attributes = feature.attributes;
49 
50           white = parseInt(attributes.WHITE);
51           black = parseInt(attributes.BLACK);
52           asian = parseInt(attributes.ASIAN);
53           hispanic = parseInt(attributes.HISPANIC);
54           other = parseInt(attributes.OTHER);
55 
56           total = white + black + asian + hispanic + other;
57 
58           white = (white / total) * 100;
59           black = (black / total) * 100;
60           asian = (asian / total) * 100;
61           hispanic = (hispanic / total) * 100;
62           other = (other / total) * 100;
63 
64           var params = dojo.mixin({
65               chf:"bg,s,FFFFFF50",
66               chs:wd + "x" + ht,
67               chd: "t:" + white + "," + black + "," + hispanic + "," + asian + "," + other
68             }, chartParams);
69 
70           var mySymbol = new esri.symbol.SimpleFillSymbol("none", new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2.5), new dojo.Color([255,255,0,0.25]));
71 
72           feature.setSymbol(mySymbol);
73 
74           map.infoWindow.setTitle(attributes["NAME"]);
75           map.infoWindow.setContent("<img src="" + "http://chart.apis.google.com/chart?"
76                                      + decodeURIComponent(dojo.objectToQuery(params)) + "" />");
77 
78           map.graphics.add(feature);
79           map.infoWindow.show(map.toScreen(click),map.getInfoWindowAnchor(map.toScreen(click)));
80         }
81       }
82 
83       dojo.addOnLoad(init);
84     </script>
85   </head>
86   <body class="tundra">
87     <span style="font-size:200%; font-weight:bold;">USA County Demographics</span>
88     <div id="map" style="1000px; height:500px; border:1px solid #000;"></div>
89   </body>
90 </html>
91