描述

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

通过GeometryService, QueryTask和一些事件监听器实现了所有的功能:

  • ·GeometryService对象提供访问到ArcGIS Server的几何服务，该服务可以缓冲，投影和简化几何体。
  • ·QueryTask能根据地理或属性条件从地图图层检索要素。在本例中，查询基于地理（在缓存中的区域）。有趣地是，地图图层(人口普查街区组点)不是初始显示在地图上的。对很多这样的查询任务，可以仅仅显示需要的结果元素。
  • ·事件监听器帮助脚本知道事件什么时候发生。监听器说，“当A发生，做B”。监听器可以将几个操作连在一起，象查询后缓存。每当见到dojo.connect()方法，脚本正在监听一个事件。这有一个监听器的例子：
· dojo.connect(map, "onClick", function(evt) {
·            ...
        }

这三个参数表示对象的事件将在哪发生(the map)，本身是什么事件(a mouse click)和当事件发生时运行什么函数。

下面是本例中事情发生的顺序:

1.某人单击地图，触发地图的"onClick"事件

2.几何服务缓存点，触发几何服务的"onBufferComplete"事件

3.缓存的虚线符号被增加到地图上并且查询任务执行，触发查询任务的"onComplete"事件

4.人口普查区被增加到地图上，使用函数sumPopulation统计人口

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>

   <head>

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

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

     <title>QueryTask with query geometry from another task</title>

     <link rel="stylesheet" type="text/css"

     href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">

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

     <script type="text/javascript">

       dojo.require("esri.map");

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

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

       function init() {

         var startExtent = new esri.geometry.Extent(-95.271, 38.933, -95.228,38.976, new esri.SpatialReference({wkid:4326}) );

         var map = new esri.Map("mapDiv", { extent: startExtent });

         //加载地图时添加查询功能

         dojo.connect(map, "onLoad", initFunctionality);

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

         //var censusMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/");

         map.addLayer(streetMap);

       }

         //初始化功能

       function initFunctionality(map) {

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

         //确定代理页面使用toJson几何服务并且载荷大于2000

         //如果不是可用的缓冲区，则会请求一个http Post代理.

         esriConfig.defaults.io.proxyUrl= "/arcgisserver/apis/javascript/proxy/proxy.ashx";

         esriConfig.defaults.io.alwaysUseProxy = false;

         //查询

         var query = new esri.tasks.Query();

         query.returnGeometry = true;

         query.outFields = ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"];

         //几何服务端点

         var gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");

         // +++++监听地图的onClick事件+++++

         dojo.connect(map, "onClick", function(evt) {

           map.graphics.clear();

           var symbol = new esri.symbol.SimpleMarkerSymbol();

           var graphic = new esri.Graphic(evt.mapPoint, symbol);

           var params = new esri.tasks.BufferParameters();

           params.features = [ graphic ];

           // 缓冲线性单位（米，公里...）

           params.distances = [ dojo.byId('bufferDistance').value ];

           params.unit = esri.tasks.BufferParameters.UNIT_KILOMETER;

           params.bufferSpatialReference = new esri.SpatialReference({wkid: 102113});

           gsvc.buffer(params);

           dojo.byId('messages').innerHTML = "<b>Creating Buffer Using GeometryService...</b>";

         });

         // +++++监听GeometryService类的onBufferComplete方法+++++

         dojo.connect(gsvc, "onBufferComplete", function(graphics) {

           var symbol = new esri.symbol.SimpleFillSymbol(

                   "none",

                 new esri.symbol.SimpleLineSymbol(

                     "dashdot",

                     new dojo.Color([255,0,0]),

                     2),

                 new dojo.Color([255,255,0,0.25]));

           var graphic = new esri.Graphic(graphics[0].geometry,symbol);

           map.graphics.add(graphic);

           query.geometry = graphic.geometry;

           queryTask.execute(query);

           dojo.byId('messages').innerHTML = "<b>Executing Query with Result BufferGeometry...</b>";

         });

         // +++++监听QueryTask中的executecomplete事件+++++

         dojo.connect(queryTask, "onComplete", function(fset) {

           //创建所选标记的图形

           var symbol = new esri.symbol.SimpleMarkerSymbol();

           symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;

           symbol.setSize(8);

           symbol.setColor(new dojo.Color([255,255,0,0.5]));

           var infoTemplate = new esri.InfoTemplate("Block: ${BLOCK}","${'*'}");

           var resultFeatures = fset.features;

           for (var i=0, il=resultFeatures.length; i<il; i++) {

             var graphic = resultFeatures[i];

             graphic.setSymbol(symbol);

             graphic.setInfoTemplate(infoTemplate);

             map.graphics.add(graphic);

           }

           var totalPopulation = sumPopulation(fset);

           var r = "";

           r = "<b>The total Census Block population within the buffer is <i>"

                + totalPopulation + "</i>.</b>";

           dojo.byId('messages').innerHTML = r;

         });

       }

       function sumPopulation(fset) {

         var features = fset.features;

         var popTotal = 0;

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

           popTotal = popTotal + features[x].attributes['POP2000'];

         }

         return popTotal;

       }

       dojo.addOnLoad(init);

     </script>

   </head>

   <body class="tundra">

     Zoom to area and click on map to select census block points within the buffered circle.<br/>

     Buffer distance (in kilometers):&nbsp;<input type="text" id="bufferDistance" value="1" size="5"/>

     <div id="mapDiv" style="width: 500px; height:500px;"></div>

     <span id="messages"></span>

   </body>

 </html>

ArcGIS api for javascript——用缓存区查询地图的更多相关文章

  1. ArcGIS API for JavaScript根据两个点坐标在地图上画线

    ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...

  2. arcgis api for javascript本地部署加载地图

    最近开始学习arcgis api for javascript,发现一头雾水,决定记录下自己的学习过程. 一.下载arcgis api for js 4.2的library和jdk,具体安装包可以去官 ...

  3. arcgis api for javascript 学习（六） 地图打印

    1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...

  4. arcgis api for javascript 学习（四） 地图的基本操作

    1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...

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

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

  6. ArcGIS api for javascript——用图表显示查询结果

    描述 本例展示了如何使用查询任务结果用去Google Chart API构建一个图表.当运行本例,点击一个郡县去看出现在一个无焦点的InfoWindow中的人口统计的数据的图表. 函数init创建了一 ...

  7. ArcGIS api for javascript——显示多个查询结果

    描述 本例展示了在重叠的多边形处理查询的一种方式.单击一个石油和天然气的字段来查看地图上的高亮显示.如果仅仅点击一个要素,能够在单击一次来查看包含一些属性的InfoWindow.如果偶然单击到重叠的要 ...

  8. ArcGIS api for javascript——图形-增加图形到地图

    描述 本例展示了如何使用Draw工具栏在地图上描绘许多种类的几何体.ArcGIS JavaScript API包含工具栏. 工具栏不是一个在页面上自动地可见的用户界面组件.相反,工具栏是一个助手类,可 ...

  9. ArcGIS api for javascript——使用图层定义显示地图

    描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...

随机推荐

  1. 使用IDEA在Maven中创建MyBatis逆向工程以及需要注意的问题(入门)

    逆向工程简介: mybatis官方提供逆向工程,可以针对单表自动生成mybatis执行所需要的代码(mapper.java.mapper.xml.pojo…),可以让程序员将更多的精力放在繁杂的业务逻 ...

  2. 路飞学城Python-Day4

    29.二进制转换计算机使用的语言就是二进制古时候,人们使用信鸽.书信.千里马等方式.但是这样的方式是不可靠的,时间也长.古时候的军方,通过烽火狼烟进行简单的信息交流 30.二进制的转换(II)8 4 ...

  3. php对excel导入导出的支持

    闲话不多说了,大家直接进入主题 php对excel的导入:  1.为程序添加一个form表单,为form标签添加“enctype="multipart/form-data"”属性 ...

  4. codevs 1288 埃及分数 (迭代加深搜索)

    题目大意:给你一个分数$a/b$,把它拆解成$\sum_{i=1}^{n}1/ai$的形式,必须保证$ai$互不相同的情况下,尽量保证n最小,其次保证分母最大的分数的分母最小 什么鬼玄学题!!! 因为 ...

  5. 【jQuery02】点击标题面板显示内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. centos部署nginx服务

    1.准备安装程序 pcrl-8.43.tar.gz  zlib-1.2.11.tar.gz  openssl-1.0.1j.tar.gznginx-1.9.9.tar.gz 2.将下载的包拷贝到/us ...

  7. thymeleaf 拼接 超链接

    <dd><a th:href="@{/get/{id}(id=${user.id})}">基本资料</a></dd>

  8. 在jqueryEasyUI界面将时间以日期加时分秒的格式显示

    问题描写叙述: oracle 10G中用户表有一个字段是日期型.数据格式为yyyy-MM-dd HH:mm:ss,前端显示时仅仅能显示成yyyy-MM-dd 后面的 HH:mm:ss不显示. 经过一番 ...

  9. Fragment使用的正确姿势

     网上关于Fragment的使用建议和分析非常多,可是依旧会有非常多人在使用Fragment的时候出现各种奇葩错误 这篇文章我分享一下各种项目中解决Fragment的各种注意事项(不做原理分析), ...

  10. less11 属性合并

    less //+ 合并以后,以逗号分割属性值 .mixin() { box-shadow+: inset 0 0 10px #555 ; } .myclass { .mixin(); box-shad ...