描述

本例展示了如何使用查询任务结果用去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. POJ 2367 Genealogical tree【拓扑排序】

    题意:大概意思是--有一个家族聚集在一起,现在由家族里面的人讲话,辈分高的人先讲话.现在给出n,然后再给出n行数 第i行输入的数表示的意思是第i行的子孙是哪些数,然后这些数排在i的后面. 比如样例 5 ...

  2. 前端学习之路——scss篇

    一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 Sass依赖于ruby环境,所以装sass之前先 ...

  3. li自定义图标

    /*自定义list的图标*/ li{ list-style-image: url(../img/21.JPG); }

  4. 向ueditor中插入内容

    html在ueditor中插入内容不能直接插入,必须判断编辑器是否创建成功,jsp可以用java代码嵌套的方式. html页面中:<textarea id="zym" nam ...

  5. 箭头函数的this

    定义时所处的对象就是它的this 看外层是否有函数 如果有,外层函数的this就是内部箭头函数的this 如果没有,this就是window let obj = { name : '箭头函数', ge ...

  6. xampp、phpstudy安装phalcon

    1.下载扩展 https://github.com/phalcon/cphalcon/releases/tag/v3.4.1选择PHP对应版本的phalcon扩展 2.PHP.ini 配置phalco ...

  7. LightOJ-1074 Extended Traffic 最短路问题 注意连通性

    题目链接:https://cn.vjudge.net/problem/LightOJ-1074 题意 给一图 求最短路 若最短路<3或没有最短路,则输出'?' 思路 首先注意到可能存在负环,所以 ...

  8. Android源代码解析之（十三）--&gt;apk安装流程

    转载请标明出处:一片枫叶的专栏 上一篇文章中给大家分析了一下android系统启动之后调用PackageManagerService服务并解析系统特定文件夹.解析apk文件并安装的过程,这个安装过程实 ...

  9. [React] Use React Fragments to make your DOM tree cleaner

    In this lesson, we will look at Fragments and how they are useful in achieving a cleaner DOM structu ...

  10. [android]DES/3DES/AES加密方式

    DES 支持8位加密解密,3Des支持24位,Aes支持32位.3Des是Des算法做三次.位数的单位是字节byte.不是bits. 3Des是把24位分成3组.第一组八位用来加密,第二组8位用于解密 ...