描述

本例展示了如何使用查询任务结果用去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并发送请求。这个函数也用红色的虚线轮廓象征查询的要素并在图表被创建后显示信息窗口。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <meta http-equiv="X-UA-Compatible" content="IE=7" />

     <title>Demographic Charts</title>

     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">

     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>

     <script type="text/javascript">

       dojo.require("esri.map");

       dojo.require("esri.tasks.query");

       var map, queryTask, query, click;

       var wd = 240;

       var ht = 110;

       var chartParams = { cht:"p3", chl:"White|Black|Hispanic|Asian|Other" };

       function init() {

         map = new esri.Map("map", { extent:new esri.geometry.Extent({ "xmin": -125.947265625, "ymin": 31.17919921875, "xmax": -103.974609375, "ymax": 42.16552734375  }) });

         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

         map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", { opacity:0.4 }));

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

         queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

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

         dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});

         query = new esri.tasks.Query();

         query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;

         query.outFields = ["NAME", "WHITE", "BLACK", "ASIAN", "HISPANIC", "OTHER"];

         query.returnGeometry = true;

         map.infoWindow.resize(275,150);

       }

       function doQuery(evt) {

         click = query.geometry = evt.mapPoint;

         queryTask.execute(query);

       }

       function getChart(featureSet) {

         map.graphics.clear();

         var features = featureSet.features;

         var feature, attributes, white, black, asian, hispanic, other, total, graphic;

         for (var i=0; i<features.length; i++) {

           feature = features[i];

           attributes = feature.attributes;

           white = parseInt(attributes.WHITE);

           black = parseInt(attributes.BLACK);

           asian = parseInt(attributes.ASIAN);

           hispanic = parseInt(attributes.HISPANIC);

           other = parseInt(attributes.OTHER);

           total = white + black + asian + hispanic + other;

           white = (white / total) * 100;

           black = (black / total) * 100;

           asian = (asian / total) * 100;

           hispanic = (hispanic / total) * 100;

           other = (other / total) * 100;

           var params = dojo.mixin({

               chf:"bg,s,FFFFFF50",

               chs:wd + "x" + ht,

               chd: "t:" + white + "," + black + "," + hispanic + "," + asian + "," + other

             }, chartParams);

           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]));

           feature.setSymbol(mySymbol);

           map.infoWindow.setTitle(attributes["NAME"]);

           map.infoWindow.setContent("<img src=\"" + "http://chart.apis.google.com/chart?"

                                      + decodeURIComponent(dojo.objectToQuery(params)) + "\" />");

           map.graphics.add(feature);

           map.infoWindow.show(map.toScreen(click),map.getInfoWindowAnchor(map.toScreen(click)));

         }

       }

       dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

     <span style="font-size:200%; font-weight:bold;">USA County Demographics</span>

     <div id="map" style="width:1000px; height:500px; border:1px solid #000;"></div>

   </body>

 </html>

ArcGIS api for javascript——用图表显示查询结果的更多相关文章

  1. ArcGIS api for JavaScript 3.27 FindTask查询功能

    在ArcGIS API中查询功能是经常使用的,常用的三个查询分别是FindTask,QueryTask,IdentifyTask.它们各自都有自己的特点. 查询功能分为属性查询和空间查询 FindTa ...

  2. ArcGIS api for javascript——用缓存区查询地图

    描述 本例展示了如何在另外一个任务里使用一个任务的结果.单击地图查看被单击的点的1公里范围内的缓存(如果需要可以修改这个默认的缓存距离).也可以看缓存区的这些点的人口普查街区信息.单击一个点查看更多的 ...

  3. ArcGIS api for javascript——加载查询结果，悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  4. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  5. ArcGIS API for Javascript 使用缓冲区结果做query查询出现“esri.config.defaults.io.proxyUrl 尚未进行设置”错误

    1.前言 在研究ArcGIS API for JavaScript时会遇到这样的问题,比如我们在做缓冲区分析时,用分析的范围作为空间查询query的参数,在执行结果中总是会看到“esri.config ...

  6. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  7. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  8. ArcGIS API for JavaScript开发初探——基础知识

    1.前言 在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...

  9. 使用Arcgis Api for Javascript 调用 本地Portal发布的WebMap

    1.环境搭建 安装Arcgis Portal 10.4,Server 10.4,DataStore ,WebAdaptor for IIS,搭建arcgis api for javascript 4. ...

随机推荐

  1. LeetCode（10）Regular Expression Matching

    题目如下: Python代码: # -*- coding:utf-8 -*- def ismatch(s,p): #先将dp[s+1][p+1]二维数组全置为False dp = [[False] * ...

  2. 手把手教你如何新建scrapy爬虫框架的第一个项目（下）

    前几天小编带大家学会了如何在Scrapy框架下创建属于自己的第一个爬虫项目(上),今天我们进一步深入的了解Scrapy爬虫项目创建,这里以伯乐在线网站的所有文章页为例进行说明. 在我们创建好Scrap ...

  3. [AHOI2013]差异 后缀自动机_Parent树

    题中要求: $\sum_{1\leqslant i < j \leq n } Len(T_{i}) +Len(T_{j})-2LCP(T_{i},T_{j})$ 公式左边的部分很好求,是一个常量 ...

  4. eclipse历史版本下载地址

    http://wiki.eclipse.org/Older_Versions_Of_Eclipse

  5. red hat linux之Samba、DHCP、DNS、FTP、Web的安装与配置

    本教程是在red hat linux 6.0环境下简单测试!教程没有图片演示,需要具有一定Linux基础知识,很多地方的配置需要根据自己的情况修改,照打不一定可以配置成功.(其他不足后续修改添加) y ...

  6. 紫书 习题8-4 UVa 11491 （贪心）

    题意:给你一个数, 要求删去一些数字, 使得剩下的数字最大. 这道题用贪心解决. 大家想一想, 两个数比较大小, 肯定先比较第一位的数,然后依次比较第二位,以此类推. 既然我们要保证最后的数字最大, ...

  7. HNU 13101 The Triangle Division of the Convex Polygon 组合数的因式分解求法

    题意: 求第n-2个Catalan数 模上 m. 思路: Catalan数公式: Catalan[n] = C(n, 2n)/(n+1) = (2n)!/[(n+1)!n!] 因为m是在输入中给的,所 ...

  8. LaTeX 设置字体颜色

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50240179 需要包含宏包: \use ...

  9. 【转】C#添加修改删除文件文件夹大全

    [转]C#添加修改删除文件文件夹大全 C#添加修改删除文件文件夹大全 StreamWriter sw = File.AppendText(Server.MapPath(".")+& ...

  10. Java中四种复制数组的方法

    JAVA语言的下面几种数组复制方法中,哪个效率最高? B.效率:System.arraycopy > clone > Arrays.copyOf > for循环 1.System.a ...