描述
本例展示如何配置查詢任務為示例的工作流程:
1.用戶單擊一個要素來加亮顯示。
2.用戶再一次單擊要素來查看屬性信息的 InfoWindow。
本例查詢USA州，因此ESRI_StateCityHighway_USA的州圖層被傳給QueryTask構造函數。
第一次鼠標單擊通過下面的事件監聽器捕獲:
dojo.connect(map, "onClick", executeQueryTask);
發生單擊時，executeQueryTask函數被調用去執行查詢，然后showResults函數增加圖形。
當用戶單擊高亮的圖形時，第二次鼠標單擊默認被捕獲。為了格式化信息窗口，應用使用showResults函數調用 graphic.setInfoTemplate應用的 InfoTemplate。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>QueryTask with geometry, results as an InfoWindow</title>
<link rel="stylesheet" type="text/css"
href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script type="text/javascript" language="Javascript">
dojo.require("esri.map");
dojo.require("esri.tasks.query");
var map, queryTask, query;
var symbol, infoTemplate;
function init() {
//創建地圖
map = new esri.Map("mapDiv");
//創建並添加動態層
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer");
map.addLayer(layer);
//監聽click事件，當用戶點擊地圖時執行executeQueryTask方法
dojo.connect(map, "onClick", executeQueryTask);
//建立查詢任務
queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1");
//監聽onComplete事件的處理結果，使用queryTask.execute方法回調
//dojo.connect(queryTask, "onComplete", showResults);
//建立查詢過濾器
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["STATE_NAME",
"STATE_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"];
//在信息窗口創建infoTemplate
//${屬性名}將取代目前的功能和屬性值
infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "State Fips:${STATE_FIPS}<br />Abbreviation: ${STATE_ABBR}<br />Area: ${AREA}");
symbol = new esri.symbol.SimpleFillSymbol
(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
}
function executeQueryTask(evt) {
//用戶點擊onClick事件返回地圖上EVT點.
//包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素點).
//設置查詢幾何等於evt.mapPoint
query.geometry = evt.mapPoint;
//執行任務和完成showResults
queryTask.execute(query, showResults);
}
function showResults(featureSet) {
//刪除地圖上所有的圖形層
map.graphics.clear();
//QueryTask返回featureSet類型.通過featureSet的循環把他們添加到信息窗口
for (var i=0, il=featureSet.features.length; i<il; i++) {
//從featureSet中得到當前實例.
//從當前實例賦值給graphic
var graphic = featureSet.features[0];
graphic.setSymbol(symbol);
//設置圖形的infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//添加當前這個圖形到地圖圖層中
map.graphics.add(graphic);
}
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
Click on a State to get more info. When State is highlighted, click State again to get infoWindow.
<div id="map" style="width:600px; height:600px; border:1px solid #000;"></div>
</body>
</html>