zoukankan      html  css  js  c++  java
  • ArcGIS api for javascript——用缓存区查询地图

    描述

    本例展示了如何在另外一个任务里使用一个任务的结果。单击地图查看被单击的点的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统计人口

      1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
      2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      3 <html>
      4   <head>
      5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      6     <meta http-equiv="X-UA-Compatible" content="IE=7" />
      7     <title>QueryTask with query geometry from another task</title>
      8     <link rel="stylesheet" type="text/css"   
      9     href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
     10     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
     11     <script type="text/javascript">
     12       dojo.require("esri.map");
     13       dojo.require("esri.tasks.query");
     14       dojo.require("esri.tasks.geometry");
     15 
     16       function init() {
     17         var startExtent = new esri.geometry.Extent(-95.271, 38.933, -95.228,38.976, new esri.SpatialReference({wkid:4326}) );
     18         var map = new esri.Map("mapDiv", { extent: startExtent });
     19         //加载地图时添加查询功能
     20         dojo.connect(map, "onLoad", initFunctionality);
     21 
     22         var streetMap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
     23         //var censusMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/");
     24         map.addLayer(streetMap);
     25       }
     26         //初始化功能
     27       function initFunctionality(map) {
     28         var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");
     29 
     30         //确定代理页面使用toJson几何服务并且载荷大于2000
     31         //如果不是可用的缓冲区,则会请求一个http Post代理.
     32         esriConfig.defaults.io.proxyUrl= "/arcgisserver/apis/javascript/proxy/proxy.ashx";
     33         esriConfig.defaults.io.alwaysUseProxy = false;
     34 
     35         //查询
     36         var query = new esri.tasks.Query();
     37         query.returnGeometry = true;
     38         query.outFields = ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"];
     39 
     40         //几何服务端点
     41         var gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");
     42 
     43         // +++++监听地图的onClick事件+++++
     44         dojo.connect(map, "onClick", function(evt) {
     45           map.graphics.clear();
     46           var symbol = new esri.symbol.SimpleMarkerSymbol();
     47           var graphic = new esri.Graphic(evt.mapPoint, symbol);
     48           var params = new esri.tasks.BufferParameters();
     49           params.features = [ graphic ];
     50 
     51           // 缓冲线性单位(米,公里...)
     52           params.distances = [ dojo.byId('bufferDistance').value ];
     53           params.unit = esri.tasks.BufferParameters.UNIT_KILOMETER;
     54           params.bufferSpatialReference = new esri.SpatialReference({wkid: 102113});
     55           gsvc.buffer(params);
     56           dojo.byId('messages').innerHTML = "<b>Creating Buffer Using GeometryService...</b>";
     57         });
     58 
     59         // +++++监听GeometryService类的onBufferComplete方法+++++
     60         dojo.connect(gsvc, "onBufferComplete", function(graphics) {
     61           var symbol = new esri.symbol.SimpleFillSymbol(
     62                   "none",
     63                 new esri.symbol.SimpleLineSymbol(
     64                     "dashdot", 
     65                     new dojo.Color([255,0,0]), 
     66                     2),
     67                 new dojo.Color([255,255,0,0.25]));
     68           var graphic = new esri.Graphic(graphics[0].geometry,symbol);
     69           map.graphics.add(graphic);
     70 
     71           query.geometry = graphic.geometry;
     72           queryTask.execute(query);
     73           dojo.byId('messages').innerHTML = "<b>Executing Query with Result BufferGeometry...</b>";
     74         });
     75 
     76         // +++++监听QueryTask中的executecomplete事件+++++
     77         dojo.connect(queryTask, "onComplete", function(fset) {
     78           //创建所选标记的图形
     79           var symbol = new esri.symbol.SimpleMarkerSymbol();
     80           symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
     81           symbol.setSize(8);
     82           symbol.setColor(new dojo.Color([255,255,0,0.5]));
     83 
     84           var infoTemplate = new esri.InfoTemplate("Block: ${BLOCK}","${'*'}");
     85 
     86           var resultFeatures = fset.features;
     87           for (var i=0, il=resultFeatures.length; i<il; i++) {
     88             var graphic = resultFeatures[i];
     89             graphic.setSymbol(symbol);
     90             graphic.setInfoTemplate(infoTemplate);
     91             map.graphics.add(graphic);
     92           }
     93           var totalPopulation = sumPopulation(fset);
     94           var r = "";
     95           r = "<b>The total Census Block population within the buffer is <i>"
     96                + totalPopulation + "</i>.</b>";
     97           dojo.byId('messages').innerHTML = r;
     98         });
     99       }
    100 
    101       function sumPopulation(fset) {
    102         var features = fset.features;
    103         var popTotal = 0;
    104         for (var x = 0; x < features.length; x++) {
    105           popTotal = popTotal + features[x].attributes['POP2000'];
    106         }
    107         return popTotal;
    108       }
    109 
    110       dojo.addOnLoad(init);
    111     </script>
    112   </head>
    113 
    114   <body class="tundra">
    115     Zoom to area and click on map to select census block points within the buffered circle.<br/>
    116     Buffer distance (in kilometers):&nbsp;<input type="text" id="bufferDistance" value="1" size="5"/>
    117     <div id="mapDiv" style=" 500px; height:500px;"></div>
    118     <span id="messages"></span>
    119   </body>
    120 </html>
  • 相关阅读:
    网页截图软件
    JavaScript的写类方式(3)
    XMLHttpRequest与script对比
    JavaScript的写类方式(5)
    Java方法传值和传引用
    变量的显示/隐式声明
    用递归实现十进制数转换N进制
    Javascript中克隆一个数组
    JavaScript1.6数组新特性和JQuery的几个工具方法
    HTML P不能包含块级元素(包括自身)
  • 原文地址:https://www.cnblogs.com/xiaotian-222/p/6515475.html
Copyright © 2011-2022 走看看