首页 > 技术文章 > ArcGIS api for javascript——以地理处理结果为条件查询地图

xiaotian-222 2017-03-07 16:52 原文

这里发生什么任务呢?当第一次单击地图,单击的坐标被发送到一个Geoprocessor任务。该任务访问服务器上的通过ArcGIS Server 地理处理服务提供的可用的GIS模型。本例中模型计算驱动时间,它有2个输入参数"Input_Location"和 "Drive_Times"。输入位置是一个要素,设置从单击点开始驱动,驱动时间被硬编码为2分钟。如果对ArcGIS JavaScript API的地图处理服务不熟悉,地图处理使用和站点中的地理处理示例能帮助你更好的理解这个示例。

地图处理的输出作为 QueryTask的输入几何体被提交。这个任务被配置仅仅在一个图层上操作:ESRI_Census_USA服务的Census Block Points图层。任务对驱车事件多边形内的区点执行一个空间查询。这个重要的代码行指定地理处理服务输出几何体做为查询几何体:

query.geometry = feature.geometry;

地图处理和查询任务的结果几何体都会用FeatureSets里的图形返回。注意在增加返回图形要素集到地图以前,必须为这些图形指定符号。如果想要用户在单击图形时见到信息窗口,还必须格式化一个InfoTemplate

注意本示例通过事件驱动。鼠标单击,地理处理完成和查询任务完成是应用里引发新事情所有事件。见 Working with events学习更多关于如何在应用中使用事件。

本例应用一个代理页面以防止提交到查询任务的驱动时间多边形几何体超过一些Web浏览器的get请求的2000个字符的限制。见 Using the proxy page学习更过代理页面信息。

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

  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 (GP result)</title>
  8     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
  9     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
 10     <script type="text/javascript">
 11       dojo.require("esri.map");
 12       dojo.require("esri.tasks.query");
 13       dojo.require("esri.tasks.gp");
 14 
 15       function init() {
 16         var startExtent = new esri.geometry.Extent(-95.271, 38.933, -95.228, 38.976, new esri.SpatialReference({wkid:4326}) );
 17         var map = new esri.Map("mapDiv", { extent: startExtent });
 18         //加载地图时添加查询功能
 19         dojo.connect(map, "onLoad", initFunctionality);
 20 
 21         var streetMap = new esri.layers.ArcGISTiledMapServiceLayer
 22                         ("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
 29                         ("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");
 30 
 31         //确定代理页面使用toJson几何服务并且载荷大于2000
 32         //如果不是可用的缓冲区,则会请求一个http Post代理.
 33         esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
 34         esriConfig.defaults.io.alwaysUseProxy = false;
 35 
 36         // 查询
 37         var query = new esri.tasks.Query();
 38         query.returnGeometry = true;
 39         query.outFields = ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"];
 40 
 41         //GP服务端点
 42         gp = new esri.tasks.Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons");
 43 
 44         // +++++监听onClick事件+++++
 45         dojo.connect(map, "onClick", function(evt) {
 46           map.graphics.clear();
 47           var symbol = new esri.symbol.SimpleMarkerSymbol();
 48           var graphic = new esri.Graphic(evt.mapPoint, symbol);
 49 
 50           var features= [];
 51           features.push(graphic);
 52           var featureSet = new esri.tasks.FeatureSet();
 53           featureSet.features = features;
 54           var params = { "Input_Location":featureSet, "Drive_Times":2 };
 55           gp.execute(params);
 56           dojo.byId('messages').innerHTML = "<b>Executing GP Task...</b>";
 57         });
 58 
 59         // +++++监听GP中onExecuteComplete事件+++++
 60         dojo.connect(gp, "onExecuteComplete", function(results,messages) {
 61           var feature = results[0].value.features[0];
 62           var symbol = new esri.symbol.SimpleFillSymbol("none",
 63                        new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2),
 64                        new dojo.Color([255,255,0,0.25]));
 65           feature.setSymbol(symbol);
 66           map.graphics.add(feature);
 67 
 68           query.geometry = feature.geometry;
 69           queryTask.execute(query);
 70           dojo.byId('messages').innerHTML = "<b>Executing Query...</b>";
 71         });
 72 
 73         // +++++监听QueryTask中executecomplete事件+++++
 74         dojo.connect(queryTask, "onComplete", function(fset) {
 75           //创建所选标记的图形
 76           var symbol = new esri.symbol.SimpleMarkerSymbol();
 77           symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
 78           symbol.setSize(8);
 79           symbol.setColor(new dojo.Color([255,255,0,0.5]));
 80 
 81           var infoTemplate = new esri.InfoTemplate("Block: ${BLOCK}", "${'*'}");
 82 
 83           var resultFeatures = fset.features;
 84           for (var i=0, il=resultFeatures.length; i<il; i++) {
 85             var graphic = resultFeatures[i];
 86             graphic.setSymbol(symbol);
 87             graphic.setInfoTemplate(infoTemplate);
 88             map.graphics.add(graphic);
 89           }
 90           var totalPopulation = sumPopulation(fset);
 91           var r = "";
 92           r = "<b>The total Census Block population within the drive time polygon is <i>"
 93                + totalPopulation + "</i>.</b>";
 94           dojo.byId('messages').innerHTML = r;
 95         });
 96       }
 97 
 98       function sumPopulation(fset) {
 99         var features = fset.features;
100         var popTotal = 0;
101         for (var x = 0; x < features.length; x++) {
102           popTotal = popTotal + features[x].attributes['POP2000'];
103         }
104         return popTotal;
105       }
106 
107       dojo.addOnLoad(init);
108     </script>
109 
110   </head>
111 
112   <body class="tundra">
113     Click the map to execute a 2 minute drive time and then use that result geometry as
114   input into a query.
115     <div id="mapDiv" style="width: 800px; height:500px;"></div>
116     <span id="messages"></span>
117   </body>
118 </html>

 

推荐阅读