留言
1. 效果图

查询FID为2的区域

2. FindTask和QueryTask属性查询中的不同
  1. 引入模块

FindTask："esri/tasks/FindTask","esri/tasks/FindParameters",
QueryTask："esri/tasks/QueryTask","esri/tasks/query",

  1. 定义查询对象

FindTask：

1
2
//动态图层
var findTask = new FindTask(http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer);

**QueryTask：**


1
2
//要素图层
var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer/0");
  1. 查询条件

FindTask：

1
2
3
//查询字段 findParams.searchFields=findParams.searchText
findParams.searchFields = ["FID"];
findParams.searchText = "2";

**QueryTask：**


1
2
3
4
//查询条件，类似于sql语句的where子句
query.where = "FID = 2";
//返回的字段信息：*代表返回全部字段
query.outFields = ["*"];
  1. 显示

FindTask 中的 queryResult == QueryTask 中的 queryResult.features[i];

3. 贴代码
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
<!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" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/tundra/tundra.css"/>
    <script  type="text/Javascript" src="https://js.arcgis.com/3.28/"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:800px;
            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/ecology/beijing_2012_3/MapServer");
				//将图层添加到地图
                map.addLayer(layer)
                
				//给属性查询按钮添加click事件
				on(dom.byId("Btn"),"click",function(e){
					//定义查询对象，查询参数
					var queryTask = new QueryTask
					("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer/0");
					var query = new Query();
                    //是否返回几何形状
                    query.returnGeometry = true;
                    //查询条件，类似于sql语句的where子句
                    query.where = "FID = 2";
					//返回的字段信息：*代表返回全部字段
                    query.outFields = ["*"];
					//执行属性查询
                    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);
							//获得neirong
							var ptName = graphic.attributes["NL_NAME_3"];
                            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>
4. 拓展（JS基础）

改为选择查询参数，输入查询关键字，点击查询