描述

本例展示了如何使用查询任务结果用去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. <Three.js>（第三节）全景漫游

    一.实验内容 通过上次实验,了解了Three.js创建场景的基本步骤.这一节,我们将通过Three.js实现全景漫游功能.如下图: 全景图是获取一个3D场景中的不同角度的图片,然后通过拼接.融合实现3 ...

  2. 脚本_实时显示网卡eth0上的数据流量

    #!bin/bash#功能:使用死循环,实时显示网卡eth0发送的数据包流量#作者:liusingbonwhile : do       echo "本地网卡eth0的数据流量信息如下:&q ...

  3. CentOS-1810系统DHCP服务器ISC DHCP软件配置说明

    DHCP 全称Dynamic Host configuration protocol, 动态主机配置协议.是一个局域网的网络协议,使用UDP协议工作,它可以为客户机自动分配IP地址.子网掩码以及缺省网 ...

  4. Python的那些坑--------括号篇

    在Python中遇见了带不带括号的问题,我目前的是这三种,有问题请指出.如果有其他的,我后续会更新 一  函数带不带括号: def a(x): return x print(a) #不带括号调用的结果 ...

  5. Linux 和 Windows 双系统时间同步问题 修改注册表

    路径:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\TimeZoneInformation 1:新建  >> DWORD(32 b ...

  6. thttpd 在S3C6410的移植-web服务程序的应用

    1.    在VMWare 虚拟机上将arm-linux-gcc 4.3.1配置好:2.    下载thttpd软件包并解压:3.    在thttpd根目录下运行:  ./configure:4.  ...

  7. const int *a与int *const a，const int *const a的区别

    来源:https://blog.csdn.net/zhangheng837964767/article/details/33783511 关键问题点:const 属于修饰符 ,关键是看const 修饰 ...

  8. R语言学习（一）前言

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/49768161 R是一个有着统计分析功能 ...

  9. 不安装Oracle客户端，用plsql连接远程Oracle数据库（绝对解决你的问题）

    1,首先准备下载两个软件,一个是instantclient.zip,另一个是plsql安装包.但是得确定您的电脑是32位还是64位,我这边提供了32位和64位的供您下载: 百度网盘:https://p ...

  10. SCN 时间戳的相互转换

    SQL> select * from v$version where rownum=1; BANNER --------------------------------------------- ...