描述
本例展示了当一个要素被查询时如何立刻打开一个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>