描述
本例在開始和地圖交互前執行一個查詢任務並加在查詢結果。這允許用戶鼠標懸停在任意郡縣時立即見到InfoWindow。本例改變了信息窗口的默認行為，僅在鼠標單擊時顯示信息窗口。
QueryTask構造函數接受被查詢的圖層，即 ESRI sample server上ESRI_Census_USA服務的郡縣圖層（索引號是3）。 注意這和地圖使用的不是一個服務。地圖使用來自 ArcGIS Online的ESRI_StreetMap_World_2D服務。 通過這種方式能夠使用在視覺上匹配的不同服務作為地圖和查詢任務的服務。 注意本例中，街道地圖被顯示在沒有郡縣可見的比例，避免查詢任務返回結果和郡縣要素視覺沖突的可能性。
查詢的where clause限制了結果是在美國南卡羅來納州的郡縣。還要注意 returnGeometry被設置為true以便要素能夠被顯示在地圖上。
//build query filter
var query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];
query.where = "STATE_NAME = 'South Carolina'";
InfoTemplate定義了在信息窗口中屬性信息如何被格式化。注意在信息模板內容中能使用HTML。同樣，能使用語法${fieldName} 來顯示給出記錄的字段的值。例如: ${POP2000}.
查詢任務返回一個FeatureSet，要素集合是一個包含每個郡縣圖形的數組。下面的循環給每個圖形分配一個 Symbol和信息模板，然后把圖形增加到地圖上:
for (var i=0, il=featureSet.features.length; i<il; i++) {
var graphic = featureSet.features[i];
graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
map.graphics.add(graphic);
}
當鼠標懸停在圖形上時，下面的事件監聽器顯示信息窗口並且修改符號:
dojo.connect(map.graphics, "onMouseOver", function(evt) {
...
evt.graphic.setSymbol(highlightSymbol);
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});
最后，當鼠標移出圖形時，這個監聽器是需要刪除圖形:
dojo.connect(map.graphics, "onMouseOut", function(evt) {
map.infoWindow.hide();
evt.graphic.setSymbol(symbol);
});
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, results as an InfoWindow onHover</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" language="Javascript"> 12 dojo.require("esri.map"); 13 dojo.require("esri.tasks.query"); 14 15 function init() { 16 var startExtent = new esri.geometry.Extent(-83.41, 31.98, -78.47, 35.28, 17 new esri.SpatialReference({wkid:4326})); 18 //創建地圖 19 var map = new esri.Map("mapDiv",{extent:startExtent}); 20 //加載地圖添加查詢功能 21 dojo.connect(map, "onLoad", initFunctionality); 22 23 //創建並添加層 24 var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"); 25 map.addLayer(layer); 26 } 27 28 function initFunctionality(map) { 29 //建立查詢任務 30 var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3"); 31 32 //創建查詢過濾器 33 var query = new esri.tasks.Query(); 34 query.returnGeometry = true; 35 query.outFields = ["NAME", "POP2000", 36 "POP2007", "POP00_SQMI", "POP07_SQMI"]; 37 query.where = "STATE_NAME = 'South Carolina'"; 38 39 var infoTemplate = new esri.InfoTemplate(); 40 infoTemplate.setTitle("${NAME}"); 41 infoTemplate.setContent("<b>2000 Population: </b>${POP2000}<br/>" 42 + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>" 43 + "<b>2007 Population: </b>${POP2007}<br/>" 44 + "<b>2007 Population per Sq. Mi.:</b>${POP07_SQMI}"); 45 46 map.infoWindow.resize(245,125); 47 48 //監聽onComplete事件的處理結果，使用queryTask.execute方法回調 49 dojo.connect(queryTask, "onComplete", function(featureSet) { 50 map.graphics.clear(); 51 var highlightSymbol = new esri.symbol.SimpleFillSymbol( 52 esri.symbol.SimpleFillSymbol.STYLE_SOLID, 53 new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 54 new dojo.Color([255,0,0]), 3), 55 new dojo.Color([125,125,125,0.35]) 56 ); 57 //var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3); 58 var symbol = new esri.symbol.SimpleFillSymbol( 59 esri.symbol.SimpleFillSymbol.STYLE_SOLID, 60 new esri.symbol.SimpleLineSymbol( 61 esri.symbol.SimpleLineSymbol.STYLE_SOLID, 62 new dojo.Color([255,255,255,0.35]), 63 1), 64 new dojo.Color([125,125,125,0.35]) 65 ); 66 67 var countiesGraphicsLayer = new esri.layers.GraphicsLayer(); 68 //QueryTask返回featureSet類型.通過featureSet的循環把他們添加到信息窗口 69 for (var i=0, il=featureSet.features.length; i<il; i++) { 70 //從featureSet中得到當前實例. 71 //從當前實例賦值給graphic 72 var graphic = featureSet.features[i]; 73 graphic.setSymbol(symbol); 74 graphic.setInfoTemplate(infoTemplate); 75 76 //添加當前這個圖形到地圖圖層中. 77 countiesGraphicsLayer.add(graphic); 78 } 79 map.addLayer(countiesGraphicsLayer); 80 map.graphics.enableMouseEvents(); 81 //監聽onMouseOver事件執行countiesGraphicsLayer 82 //監聽onMouseOver事件並創建一個新的幾何圖形event.graphic到地圖圖形層 83 dojo.connect(countiesGraphicsLayer, "onMouseOver", function(evt) { 84 map.graphics.clear(); //使用地圖圖形層 85 var content = evt.graphic.getContent(); 86 map.infoWindow.setContent(content); 87 var title = evt.graphic.getTitle(); 88 map.infoWindow.setTitle(title); 89 var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol); 90 map.graphics.add(highlightGraphic); 91 map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); 92 }); 93 94 //監聽map.graphics onMouseOut事件時，清除顯示的圖形 95 //隱藏信息窗口 96 dojo.connect(map.graphics, "onMouseOut", function(evt) { 97 map.graphics.clear(); 98 map.infoWindow.hide(); 99 }); 100 }); 101 102 queryTask.execute(query); 103 } 104 dojo.addOnLoad(init); 105 </script> 106 </head> 107 <body class="tundra"> 108 Hover over a county in South Carolina to get more information. 109 <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div> 110 </body> 111 </html>