留言
1. 效果图

查询FID为2的区域

2. 引入模块
1
2
3
4
5
6
7
8
9
10
//查询对象
"esri/tasks/FindTask",
//查询参数
   "esri/tasks/FindParameters",
   //线符号对象
"esri/symbols/SimpleLineSymbol",
//面符号对象
"esri/symbols/SimpleFillSymbol",
//图形对象 
"esri/graphic",
3. 步骤
  • 查询
  • 显示

查询

  1. 创建属性查询对象、查询参数

    1
    2
    var findTask = new FindTask(MapServer);
    var findParams = new FindParameters();

  2. 绑定触发事件

    1
    on(dom.byId("Btn"),"click",function(){})

  3. 返回几何信息 决定高亮等结果显示

    1
    findParams.returnGeometry = true;

  4. 查询图层

    1
    findParams.layerIds = [1];

  5. 查询字段 findParams.searchFields=findParams.searchText

    1
    2
    findParams.searchFields = ["FID"];
    findParams.searchText = "2";

  6. 执行查询对象

    1
    2
    //ShowFindResult是显示方法
    findTask.execute(findParams, ShowFindResult);

显示

  1. 创建线符号

    1
    var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);

  2. 创建面符号

    1
    var fill=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);

  3. 如果查询结果等于0，结束。

    1
    2
    3
    4
    if (queryResult.length == 0) {
    	dom.byId("divShowResult").innerHTML = "";
    	return;
    }

  4. 查询结果大于等于1

    1
    if (queryResult.length >= 1) {}

  5. 获得图形，设置符号，添加在地图中，高亮

    1
    2
    3
    4
    5
    6
    7
    //获得图形
    var graphic = queryResult[i].feature;
    //设置符号
    graphic.setSymbol(fill);
    //将graphic添加到地图中
    //实现高亮
    map.graphics.add(graphic);

  6. 获取对应属性表的内容，并修改显示div的html为获取到的内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var ptName = graphic.attributes["FID"];
      if (i % 2 == 0)
      		htmls = htmls + "<tr>";
      else
      		htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";
      htmls = htmls + "<td><a href=\"#\" \">" + ptName + "</a></td>";
      htmls = htmls + "</tr>";
      
      dom.byId("divShowResult").innerHTML = htmls;

  7. 修改显示div的html

    1
    dom.byId("divShowResult").innerHTML = htmls;
4.完整代码
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>FindTask</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/on",
			"dojo/dom",
            "esri/tasks/FindTask",
            "esri/tasks/FindParameters",
			"esri/symbols/SimpleLineSymbol",
			"esri/symbols/SimpleFillSymbol", 
			"esri/graphic",
            "dojo/domReady!"],
			function (Map, ArcGISDynamicMapServiceLayer,on,dom,
			FindTask, FindParameters, 
			SimpleLineSymbol,SimpleFillSymbol,Graphic) {   
                var map = new esri.Map("mapDiv");
                var MapServer = 
            "http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer";
                var layer = new esri.layers.ArcGISDynamicMapServiceLayer(MapServer);
                map.addLayer(layer)

                
				//创建属性查询对象、查询参数
                var findTask = new FindTask(MapServer);
                var findParams = new FindParameters();

                //绑定触发事件
				on(dom.byId("Btn"),"click",function(){
					//是否返回几何信息  决定高亮等结果显示
                    findParams.returnGeometry = true;
					//查询图层
                    findParams.layerIds = [1];
					//查询字段 findParams.searchFields=findParams.searchText
                    findParams.searchFields = ["FID"];
                    findParams.searchText = "2";
					//执行查询对象
                    findTask.execute(findParams, ShowFindResult);
                })
                
                function 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++) {
							//获得图形
                            var graphic = queryResult[i].feature;
							//赋予相应的符号
							graphic.setSymbol(fill);
                            //将graphic添加到地图中
                            //实现高亮
                            map.graphics.add(graphic);
							//获得内容  注意对应属性表
							var ptName = graphic.attributes["FID"];
                            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>";
						//dom操作修改div的html
                        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>


5. 拓展（JS基础）

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