在ArcGIS API中查询功能是非常常用的，Esri给我们提供了三个类用于实现矢量数据查询功能。FindTask,QueryTask,IdentifyTask，他们之间的区别为：
- FindTask只能进行属性查询，QueryTask,IdentifyTask两个类既可以进行属性查询也可以进行空间查询。
- 对于QueryTask,IdentifyTask两个类，QueryTask只可应用于一个单独的图层，IdentifyTask可应用于地图服务和多个图层
- QueryTask可以进行简单的统计功能。
需求
利用FindTask实现简单的属性查询
我们将name属性为J4的教学楼查询出来，在页面上显示J4是哪一个学院？（机电学院），并且将J4的楼高亮显示
代码实现
在页面加入一个地图（略）
在页面添加一个button和一个div（button用于属性查询，div用于显示楼层的名字）1
2<input type="button" value="属性查询" id="Btn"/>
<div id="divShowResult"></div>
创建属性查询对象并给button绑定点击事件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18//地图服务的URL
var MapServer = "http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer";
//创建属性查询对象
var findTask = new FindTask(MapServer);
//创建属性查询参数
var findParams = new FindParameters();
on(dom.byId("Btn"),"click",function(){
//是否返回给我们几何信息
findParams.returnGeometry = true;
//对哪一个图层进行属性查询
findParams.layerIds = [1];
//查询的字段
findParams.searchFields = ["name"];
//searchText和searchFields结合使用，即查询name=J4
findParams.searchText = "J4";
//执行查询对象
findTask.execute(findParams, ShowFindResult);
})
处理属性查询返回给我们的数据1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34function ShowFindResult(queryResult) {
//创建线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//创建面符号
var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
if (queryResult.length == 0) {
dom.byId("divShowResult").innerHTML = "";
return;
}
var htmls = "";
if (queryResult.length >= 1) {
htmls = htmls + "<table style=\"width: 100%\">";
htmls = htmls + "<tr><td>名称</td></tr>";
for (var i = 0; i < queryResult.length; i++) {
//获得图形graphic
var graphic = queryResult[i].feature;
//赋予相应的符号
graphic.setSymbol(fill);
//将graphic添加到地图中，从而实现高亮效果
map.graphics.add(graphic);
//获得教学楼名称（此处是和shp属性表对应的）
var ptName = graphic.attributes["alias"];
if (i % 2 == 0)
htmls = htmls + "<tr>";
else
htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";
htmls = htmls + "<td><a href=\"#\" \">" + ptName + "</a></td>";
htmls = htmls + "</tr>";
}
htmls = htmls + "</table>";
//将属性绑定在divShowResult上面
dom.byId("divShowResult").innerHTML = htmls;
}
}
全部代码
1 | <!DOCTYPE html> |
运行之后的结果为：
利用QueryTask实现空间查询
此时的的需求是：我们在地图上画一个图形，然后和图形相交的教学楼选择出来。1
2
3
41.使用draw交互绘制几何形状
2.根据geometry形状构建空间查询参数
3.执行空间分析对象
4.处理空间分析的结果
创建一个button和一个div（button用于激活绘图工具，div用户显示用户选择的教学楼的名称）1
2<input type="button" value="空间查询" id="Btn"/>
<div id="divShowResult"></div>
给button绑定事件（激活绘图工具）1
2
3
4
5
6
7//定义一个绘图工具
var toolBar = new Draw(map);
//给button绑定事件
on(dom.byId("Btn"),"click",function(){
//激活绘图工具，我要绘制一个面图形
toolBar.activate(Draw.POLYGON);
})
给绘图工具绑定绘图完成事件，绘图完成执行queryGraphic函数,并将绘制的geometry传入函数1
2
3
4
5
6
7on(toolBar, "draw-complete", function (result) {
//获得绘图得到的面
var geometry=result.geometry;
//关闭绘图工具
toolBar.deactivate();
queryGraphic(geometry);
});
编写queryGraphic函数1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18function queryGraphic(geometry) {
//创建查询对象，注意：服务的后面有一个编号，代表对那一个图层进行查询
var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/1");
//创建查询参数对象
var query = new Query();
//空间查询的几何对象
query.geometry = geometry;
//服务器给我们返回的字段信息，*代表返回所有字段
query.outFields = ["*"];
//空间参考信息
query.outSpatialReference = map.spatialReference;
//查询的标准，此处代表和geometry相交的图形都要返回
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
//是否返回几何信息
query.returnGeometry = true;
//执行空间查询
queryTask.execute(query, showQueryResult);
}
处理返回的结果信息1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34function showQueryResult(queryResult) {
//创建线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//创建面符号
var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
if (queryResult.features.length == 0) {
dom.byId("divShowResult").innerHTML = "";
return;
}
var htmls = "";
if (queryResult.features.length >= 1) {
htmls = htmls + "<table style=\"width: 100%\">";
htmls = htmls + "<tr><td>名称</td></tr>";
for (var i = 0; i < queryResult.features.length; i++) {
//得到graphic
var graphic = queryResult.features[i];
//给图形赋予符号
graphic.setSymbol(fill);
//添加到地图从而实现高亮效果
map.graphics.add(graphic);
//获得教学楼的名称信息，此处应和shp的属性表对应
var ptName = graphic.attributes["alias"];
if (i % 2 == 0)
htmls = htmls + "<tr>";
else
htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";
htmls = htmls + "<td><a href=\"#\"\">" + ptName + "</a></td>";
htmls = htmls + "</tr>";
}
htmls = htmls + "</table>";
//将教学楼的名称信息和divShowResult绑定
dom.byId("divShowResult").innerHTML = htmls;
}
}
全部代码
1 | <!DOCTYPE html> |
运行之后的结果为：
利用QueryTask进行属性查询
利用QueryTask进行属性查询和空间查询代码差不多。
#####全部代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>QueryTask</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<style type="text/css">
.MapClass{
width:100%;
height:600px;
border:1px solid #000;
}
</style>
<script type="text/javascript">
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/dom",
"dojo/on",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"dojo/domReady!"],
function (Map, ArcGISDynamicMapServiceLayer,dom, on,
QueryTask, Query,
SimpleLineSymbol,SimpleFillSymbol,Graphic) {
//根据div的id属性创建地图
var map = new Map("mapDiv");
//定义一个动态地图服务
var layer = new ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer");
//将图层添加到地图
map.addLayer(layer)
//给属性查询按钮添加click事件
on(dom.byId("Btn"),"click",function(e){
//定义查询对象
var queryTask = new QueryTask
("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/1");
//定义查询参数对象
var query = new Query();
//查询条件，类似于sql语句的where子句
query.where = "name = 'J4'";;
//返回的字段信息：*代表返回全部字段
query.outFields = ["*"];
//是否返回几何形状
query.returnGeometry = true;
//执行属性查询
queryTask.execute(query, showQueryResult);
})
//属性查询完成之后，用showQueryResult来处理返回的结果
function showQueryResult(queryResult)
{
//创建线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//创建面符号
var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
if (queryResult.features.length == 0) {
dom.byId("divShowResult").innerHTML = "";
return;
}
var htmls = "";
if (queryResult.features.length >= 1) {
htmls = htmls + "<table style=\"width: 100%\">";
htmls = htmls + "<tr><td>名称</td></tr>";
for (var i = 0; i < queryResult.features.length; i++) {
//获得图形graphic
var graphic = queryResult.features[i];
//赋予相应的符号
graphic.setSymbol(fill);
//将graphic添加到地图中，从而实现高亮效果
map.graphics.add(graphic);
//获得教学楼名称（此处是和shp属性表对应的）
var ptName = graphic.attributes["alias"];
if (i % 2 == 0)
htmls = htmls + "<tr>";
else
htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";
htmls = htmls + "<td><a href=\"#\" \">" + ptName + "</a></td>";
htmls = htmls + "</tr>";
}
htmls = htmls + "</table>";
//将属性绑定在divShowResult上面
dom.byId("divShowResult").innerHTML = htmls;
}
}
});
</script>
</head>
<body>
<div id="mapDiv" class="MapClass"></div>
<input type="button" value="属性查询" id="Btn"/>
<div id="divShowResult"></div>
</body>
</html>
运行之后的结果：
利用IdentifyTask实现空间查询
IdentifyTask的使用与QueryTask十分类似，唯一不同的是IdentifyTask可以作用于多个图层，而QueryTask是作用于一个图层的。
全部代码
1 | <!DOCTYPE html> |
运行之后的结果：
