描述

本例展示了如何使用查询任务结果用去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. swift语言点评二

    一.数据类型 1.基础类型的封装 Swift provides its own versions of all fundamental C and Objective-C types, includi ...

  2. asp.net core 与EFcore 入门

    什么是EFcore? Entity Framework (EF) Core 是轻量化.可扩展和跨平台版的常用 Entity Framework 数据访问技术,EF Core 可用作对象关系映射程序 ( ...

  3. Vim常用命令及配置方案

    Vim常用命令及配置方案   几句话 很久之前就接触到vim,初学那阵觉得vim很酷炫,但确实对新手不是很友好.我也就简单看了下基本操作就上手了,但又不是长期在vim下工作,这就导致了每一次重新使用v ...

  4. [USACO16DEC]Cities and States省市

    题目:洛谷P3405. 题目大意:给你一些省市的名称(大写)和所在省的名称(两个大写字母),求有多少对城市满足:A城市的名字的前两个字母等于B城市所在省的名称,且A所在省的名称等于B城市的名字的前两个 ...

  5. SVN学习总结（2）——SVN冲突解决

    在我们用VS进行项目合作开发的过程中,SVN的提交控制是至关重要的,大家不可避免的都遇到过SVN冲突的问题,开发的时候,应该认真学习SVN的知识,减少冲突,集中时间放在开发上. 解决冲突有三种方式: ...

  6. MYSQL锁表问题的解决方法

    本文实例讲述了MYSQL锁表问题的解决方法.分享给大家供大家参考,具体如下: 很多时候!一不小心就锁表!这里讲解决锁表终极方法! 案例一 mysql>show processlist; 参看sq ...

  7. Java实现二叉树的创建、递归/非递归遍历

    近期复习数据结构中的二叉树的相关问题,在这里整理一下 这里包含: 1.二叉树的先序创建 2.二叉树的递归先序遍历 3.二叉树的非递归先序遍历 4.二叉树的递归中序遍历 5.二叉树的非递归中序遍历 6. ...

  8. Precision and recall From Wiki

    Precision.全部推断为正样本的数量里面,有多少是真正的正样本.就是精确率 Recall.所有的正样本里面,检測到了多少真正的正样本,又称查全率.即所有正样本查找到了多少的比率.

  9. Android4.2.2下Stagefright下OMX编解码器组件的控制流

    本文均属自己阅读源代码的点滴总结.转账请注明出处谢谢. 欢迎和大家交流. qq:1037701636 email:gzzaigcn2012@gmail.com Android源代码版本号Version ...

  10. 树莓派安装node.js

    因为树莓派是arm架构,node.js上并没有提供arm架构的二进制包下载. 试过使用apt包管理安装和直接node.js源代码编译安装(编译了四五个小时...),都没有成功,报非法指令错误,预计还是 ...