ArcGIS api for javascript——查询，立刻打开信息窗口

描述

本例展示了当一个要素被查询时如何立刻打开一个InfoWindow。信息窗口能被用来将要素的属性格式化成用户易读的格式。

本例中，地图和查询任务都使用ESRI sample server上的服务KGS_OilGasFields_Kansas。地图也使用了来自ArcGIS Online的ESRI_Imagery_World_2D图层。注意地图和查询任务不是必须要使用相同的服务。例如，仅仅想保持来自ArcGIS Online的背景影像并在地图单击后显示要素。

单击地图后，下面的事件监听器调用函数executeQueryTask:

dojo.connect(map, "onClick", executeQueryTask);

查询任务根据用户单击的对象（不是多边形，唯一多边形或多个重叠的多边形）提供不同地运行:

queryTask.execute(query, function(fset) {

          if (fset.features.length === 1) {

            showFeature(fset.features[0],evt);

          } else if (fset.features.length !== 0) {

            showFeatureSet(fset,evt);

});

如果仅仅一个要素被单击，函数showFeature被调用。该函数格式化信息窗口，使用map.graphics.add显示要素的图形，并使用map.infoWindow.show方法立刻显示信息窗口。这覆盖了图形第二次单击显示信息窗口的默认行为。

如果多个要素被单击，函数showFeatureSet被调用。该函数循环访问每个要素并将要素名称和超链接加到信息窗口中。用户能够使用这个要素超链接的列表选择要素。如果用户单击一个高亮的要素，图形的默认行为是显示一个信息窗口。

注意查询任务的结果始终是一个FeatureSet。在本例中，结果集中唯一一个项目被传递给showFeature函数，而全部的结果集被传递给showFeatureSet函数。

  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 geometry, queries with multiple results at the same location are displayed in an InfoWindow</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" language="Javascript">
 11       dojo.require("esri.map");
 12       dojo.require("esri.tasks.query");
 13 
 14       var map, queryTask, query,featureSet;
 15       //初始化函数
 16       function init() {
 17         //开始范围：地理坐标系wiid:4326
 18         var startExtent = new esri.geometry.Extent(-100.7, 36.8, -95.8, 40.2, new esri.SpatialReference({wkid:4326}));
 19 
 20         //创建地图
 21         map = new esri.Map("mapDiv", {extent:startExtent});
 22         //切片层并加载到地图中
 23         var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
 24         map.addLayer(tiledLayer);
 25 
 26         //创建并增加一个动态层
 27         var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer");
 28         map.addLayer(dynamicLayer);
 29 
 30         //注册一个监听click事件，当用户点击地图时执行executeQueryTask方法
 31         dojo.connect(map, "onClick", executeQueryTask);
 32 
 33         //注册一个监听信息窗口的onHide事件
 34         dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});
 35 
 36 
 37         //建立查询任务
 38         queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0");
 39 
 40         //监听onComplete事件的处理结果，使用queryTask.execute方法回调
 41         //dojo.connect(queryTask, "onComplete", showResults);
 42 
 43         //建立查询过滤器
 44         query = new esri.tasks.Query();
 45         query.returnGeometry = true;
 46         query.outFields = ["FIELD_NAME",
 47         "FIELD_KID", "PROD_GAS", "PROD_OIL", "STATUS"];
 48       }
 49 
 50       function executeQueryTask(evt) {
 51         map.infoWindow.hide();
 52         map.graphics.clear();
 53         featureSet = null;
 54 
 55         //用户点击onClick事件返回地图上EVT点.
 56         //包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素点).
 57         //设置查询几何等于evt.mapPoint
 58         //执行任务和完成showResults
 59         queryTask.execute(query, function(fset) {
 60           if (fset.features.length === 1) {
 61             showFeature(fset.features[0],evt);
 62           } else if (fset.features.length !== 0) {
 63             showFeatureSet(fset,evt);
 64           }
 65         });
 66       }
 67 
 68       function showFeature(feature,evt) {
 69         map.graphics.clear();
 70 
 71         //设置标记点
 72         var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.
 73         SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol
 74         (esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2),
 75         new dojo.Color([255,255,0,0.5]));
 76         feature.setSymbol(symbol);
 77 
 78         //构建信息窗口的标题和内容
 79         var attr = feature.attributes;
 80         var title = attr.FIELD_NAME;
 81         var content = "Field ID : " + attr.FIELD_KID
 82                     + "<br />Produces Gas : " + attr.PROD_GAS
 83                     + "<br />Produces Oil : " + attr.PROD_OIL
 84                     + "<br />Status : " + attr.STATUS;
 85         map.graphics.add(feature);
 86 
 87         map.infoWindow.setTitle(title);
 88         map.infoWindow.setContent(content);
 89         (evt) ? map.infoWindow.show(evt.screenPoint,
 90         map.getInfoWindowAnchor(evt.screenPoint)) : null;
 91       }
 92 
 93       function showFeatureSet(fset,evt) {
 94         //删除地图上所有的图形层
 95         map.graphics.clear();
 96         var screenPoint = evt.screenPoint;
 97 
 98         featureSet = fset;
 99 
100         var numFeatures = featureSet.features.length;
101 
102         //QueryTask返回featureSet类型.通过featureSet的循环把他们添加到信息窗口
103         var title = "You have selected " + numFeatures + " fields.";
104         var content = "Please select desired field from the list below.<br />";
105 
106         for (var i=0; i<numFeatures; i++) {
107           var graphic = featureSet.features[i];
108           content = content + graphic.attributes.FIELD_NAME + " Field (<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";
109         }
110         map.infoWindow.setTitle(title);
111         map.infoWindow.setContent(content);
112         map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
113       }
114 
115       dojo.addOnLoad(init);
116     </script>
117   </head>
118   <body class="tundra">
119     Click on a petrolueum field to get more info.<br>
120     If mulitple fields are selected then you can select the field to display.
121     <div id="mapDiv" style="800px; height:600px; border:1px solid #000;"></div>
122   </body>
123 </html>