ArcGIS API For Javascript官方文档（十）之添加任务
这个示例提供了有关如何使用task（任务）的详细信息。所有task都是异步的，因为它们发向REST服务发出http请求。使用query task（查询任务），显示表格结果，但不包括地图。
在ArcGIS API for JavaScript Sandbox中查看此示例的活动版本。sandbox（沙箱）是一个实时代码编辑器，允许您修改示例的源代码并实时查看改变。
以下是整个HTML页面：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Query State Info without Map</title>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
require([
"dojo/dom", "dojo/on",
"esri/tasks/query", "esri/tasks/QueryTask", "dojo/domReady!"
], function (dom, on, Query, QueryTask) {
var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
var query = new Query();
query.returnGeometry = false;
query.outFields = [
"SQMI", "STATE_NAME", "STATE_FIPS", "SUB_REGION", "STATE_ABBR",
"POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "HOUSEHOLDS",
"MALES", "FEMALES", "WHITE", "BLACK", "AMERI_ES", "ASIAN", "OTHER",
"HISPANIC", "AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
"AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
];
on(dom.byId("execute"), "click", execute);
function execute () {
query.text = dom.byId("stateName").value;
queryTask.execute(query, showResults);
}
function showResults (results) {
var resultItems = [];
var resultCount = results.features.length;
for (var i = 0; i < resultCount; i++) {
var featureAttributes = results.features[i].attributes;
for (var attr in featureAttributes) {
resultItems.push("<b>" + attr + ":</b> " + featureAttributes[attr] + "<br>");
}
resultItems.push("<br>");
}
dom.byId("info").innerHTML = resultItems.join("");
}
});
</script>
</head>
<body>
US state name :
<input type="text" id="stateName" value="California">
<input id="execute" type="button" value="Get Details">
<br />
<br />
<div id="info" style="padding:5px; margin:5px; background-color:#eee;">
</div>
</body>
</html>下面的讨论假设您已经熟悉了JavaScritp API和Dojo的基本概念，并且了解JavaScript API如何在HTML页面中工作的基本模式。
1、脚本放置在HTML head标签内
HTML head标签中的脚本部分是您调用JavaScript API编写功能的地方
引用包
由于您正在实现一个task，您需要使用require()语句引用task代码包。在本例中，将引用esri/tasks包。有关可以引用的包的更多信息，请参见有关Dojo信息。
require(["esri/tasks/query"], function (Query) { /* code goes here */ });使用dojo/domReady!插件
函数块是构建查询的地方。首先，使用QueryTask构造函数初始化一个名为queryTask的查询任务。
- esri/tasks/QueryTask值是对QueryTask类的完整引用，类名总是大写的。
- 您看到的URL是名为”ESRI_Census_USA”的地图服务服务器的端点。查询的图层为”5″层，它引用了一个状态层。此端点是可以使用服务目录生成的唯一引用。
function (dom, on, Query, QueryTask) {
queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");接下里，您需要构建查询筛选器:
- 使用Query构造器初始化名为query的查询筛选器，此构造函数不包含任何参数。
- 根据应用程序的不同，您可能希望为每个要素返回geometry（几何）。如果您不想要geometry，则必须将属性returnGeometry设置为false。
- 您需要使用属性outFields设置在结果集中显示哪些字段。此列表必须使用实际的字段名，而不是alias names（别名），但您可以在结果中显示字段别名。
//build query filter
var query = new Query();
query.returnGeometry = false;
query.outFields = [
"SQMI", "STATE_NAME", "STATE_FIPS", "SUB_REGION", "STATE_ABBR",
"POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "HOUSEHOLDS",
"MALES", "FEMALES", "WHITE", "BLACK", "AMERI_ES", "ASIAN", "OTHER",
"HISPANIC", "AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
"AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
];创建一个回调函数
回调函数execute使用dojo/on类连接到HTML页面中的输入按钮。在本例中，名为”execute”的函数(queryTask的执行函数)在用户输入state name并单击”Get Details”按钮后被调用。
- state name用作搜索的输入文本。属性Query.text类似于SQL语句中使用”Like”的where子句。仅在与图层关联的显示字段上进行搜索。此显示字段设置在ArcMap文档中，如果没有设置显示字段，则默认显示字段为第一个文本字段。您可以确定服务目录中的图层的显示字段是什么。
- 通过QueryTask.execute方法执行查询。该方法的参数是Query和一个对名为showResults函数的引用。
function execute(stateName) {
query.text = stateName;
//execute query
queryTask.execute(query,showResults);
}创建一个函数来显示结果
showResults()函数首先根据在回调函数中执行查询任务时收到的信息来解析结果。结果被传递到showResults函数中的results，这是一个FeatureSet对象，FeatureSet包含一个Graphic要素的数组。
function showResults (results) {在此函数的下一节中，变量resultItems填充了包含在results FeatureSet中的字段名和字段值。
- 外部循环遍历了results FeatureSet中的每个feature（要素），在这个例子中，由于只有一个state被处理，所以结果只包含一个Graphic，for循环仅重复一次。
- 变量featureAttributes被分配了results FeatureSet中每个Graphic的属性。
- 内部for循环遍历了featureAttributes中的每个属性，字段名(attr)和字段值(featureAttributes[attr])被添加到resultItems数组中。
var resultItems = [];
var resultCount = results.features.length;
for (var i = 0; i < resultCount; i++) {
var featureAttributes = results.features[i].attributes;
for (var attr in featureAttributes) {
resultItems.push("<b>" + attr + ":</b> " + featureAttributes[attr] + "<br>");
}
resultItems.push("<br>");
}这个函数的下一步是将resultItems赋值给innerHTML，它允许将HTML页面上的文本替换为新文本。在本例中，使用dom.byId，它类似于JavaScript中的函数document.getElementById(id)，该函数搜索并返回第一个HTML元素，其中参数id为”info”。在这种情况下，文本写在id=”info”的HTML DIV中。
dom.byId("info").innerHTML = resultItems.join("");2、HTML BODY
下一节是HTML页面的BODY部分。
- 第一个input标签提供了一个文本框，供用户输入州名。默认值是”California”。
- 第二个input标签是一个按钮，添加了点击事件，当用户单击按钮时，会调用click事件并调用execute()函数
- DIV引用了showResults()函数中的相同变量集。
<body>
US state name :
<input type="text" id="stateName" value="California">
<input id="execute" type="button" value="Get Details">
<br />
<br />
<div id="info" style="padding:5px; margin:5px; background-color:#eee;">
</div>
</body>转载自：https://blog.csdn.net/qq_35732147/article/details/79882485
