描述

本例展示了如何使用查询任务结果用去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. Linux重新命名文件夹

    linux 重命名文件和文件夹   linux下重命名文件或文件夹的命令mv既可以重命名,又可以移动文件或文件夹. 例子:将目录A重命名为B mv A B 例子:将/a目录移动到/b下,并重命名为c ...

  2. POJ 3134 Power Calculus (迭代剪枝搜索)

    题目大意:略 题目里所有的运算都是幂运算,所以转化成指数的加减 由于搜索层数不会超过$2*log$层,所以用一个栈存储哪些数已经被组合出来了,不必暴力枚举哪些数已经被搜出来了 然后跑$iddfs$就行 ...

  3. UNIX系统高级编程——第五章-标准I/O库-总结

    基础: 标准I/O库在ANSI C中定义,可移植在不同的系统 文件指针(FILE):标准I/O库操作的不是文件描述符,而是流.FILE文件指针包含的是维护流所需的信息 通过函数fileno获取流的文件 ...

  4. Visual Studio 2013 无法创建MVC项目,系统找不到指定的文件.(Exception from HRESULT:08x0070002)

    在Visual Studio 2013中创建新MVC项目,(PS:现在创建个MVC项目,差点都找不到在哪,汗!-) 确定后提示,系统找不到指定的文件.(Exception from HRESULT:0 ...

  5. C++容器（四）：map类型

    map 类型 map是键-值对的集合.map类型通常可以理解为关联数组:可以使用键作为下标来获取一个值,正如内置数组类型一样.而关联的本质在于元素的值与某个特定的键相关联,而非通过元素在数组内的位置来 ...

  6. javascript位操作符右移>>>的妙用

    var len=arr.length>>>0; 在arr.length为null或undefined的时间,强制转换为0;

  7. 洛谷 P2027 bf

    P2027 bf 题目描述 bf是一种编程语言,全称为BrainFuck,因为题目名称不能太露骨,所以就简写成bf了. 这种语言的运行机制十分简单,只有一个大小为30000的有符号8位整数(范围[-1 ...

  8. 13款用于拍摄全景照片的iOS应用

    全景图是一种大画幅.用来展示尽量多的周围环境的照片,甚至能够展示一个球状的完整空间,让观赏者直接“站在”摄影师的位置,在照片里将该环境一览无余.全景照片能够以最直观的方式向人们展示和记录一个美丽风景的 ...

  9. Android体验高扩展艺术般的适配器

    前言 本篇文章带大家体验一下一种具有扩展性的适配器写法. 这个适配器主要用于Item有多种的情况下.当然仅仅有一种类型也是适用的 实现 毫无疑问我们要继承BaseAdapter,重写getCount, ...

  10. ASMlib操作系统包安装与配置asm disk磁盘

    1.加入6块硬盘,每块100g.不管是热加还是冷加.不管是加硬盘,用san存储划lun,或者再加上多路径,都是能够这么做的. 在操作系统层,能识别这种lun.以下的sdb就是一个刚划分的300g的lu ...