ArcGIS API For Javascript之编辑服务器端图层(通过要素服务feature进行增删改查 )

admin管理员组

文章数量:1650919

• 引言
• 需求服务器端图层编辑
  • 1实现
  • 2实现结果
    • 21添加操作
    • 22删除要素操作
    • 23更新要素可以看到objectid1的alias属性为A区宿舍
    • 24当修改之后点击查询按钮结果
  • 3全部代码

1.引言

      在现实需求中，我们不仅仅需要编辑客户端图层，也有可能去编辑服务器端图层，要想编辑服务器端的图层，必须要将地图发布为：要素服务。
      如何发布要素服务请看：ArcGIS Server发布要素服务

2.需求（服务器端图层编辑）

      关于服务器端图层的操作,基本就是增删改查操作，要素服务的查询前面已经介绍过，在此篇博客中主要记录一下关于要素服务的增删改操作,在ArcGIS API for JS中给我们提供了三个类用于要素的增Add,删Delete,改Update,接下来就用这三个类来实现我们的功能。

• 我们操作的是要素服务的sushelou图层
• 我们的服务：

注意：宿舍楼图层编号为1

• 图层的属性信息

2.1实现

• 首先在页面添加三个按钮(用于实现用户的增删改操作)

<button class="btn">添加要素</button>
<button class="btn">删除要素</button>
<button class="btn">修改要素</button>
<button class="btn">查询要素</button>

   
   
1
2
3
4
5
   
   
    
    
   
   
   
   
1
2
3
4
5

• 添加地图（省略）
• 创建通用的对象，例如Draw

                    //用于操作的要素图层，注意我们是操作的宿舍楼图层
                    var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/ft/FeatureServer/1",
                         {
                            mode:FeatureLayer.MODE_SNAPSHOT,
                            outFields: ["*"]
                         });
                    //在添加要素时，利用Draw工具获得geometry对象
                    var d = new Draw(map, { showTooltips: true });
                    //要操作的graphic
                    var g;
   
   
1
2
3
4
5
6
7
8
9
10
   
   
    
    
   
   
   
   
1
2
3
4
5
6
7
8
9
10

• 给相应的按钮添加绑定事件

        query("button").on("click",function(event){
                        //获得按钮的文本
                        var value=this.innerHTML; 
                        //根据文本绑定不同的事件
                        switch(value){
                            case "添加要素":
                                d.activate(Draw.POLYGON);
                                break;
                            case "删除要素":
                                //创建Graphic对象，删除OBJECTID为34的元素，
                                //因为OBJECTID是主键，所以只需要指定主键即可
                                g=new Graphic("","",{
                                    "OBJECTID":34
                                });
                                //创建删除对象
                                var de=new Delete({
                                    "featureLayer":featureLayer,
                                    "deletedGraphics":[g]
                                });
                                //执行删除结果
                                de.performRedo();
                                //刷新图层
                                layer.refresh();
                                break;
                            case "修改要素":
                                //用于修改要素的函数,查询更新为36的要素
                                updateFeature(36);
                                break;                          
                            case "查询要素":
                                //用于查询要素的函数，查询主键为36的要素
                                searchFeather(36);
                                break;
                        }
                    });

   
   
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
   
   
    
    
   
   
   
   
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

• 如果是添加操作（利用draw添加geometry属性）

                    //当画图完毕时，添加要素
                    on(d, "draw-complete", function (result) {
                        //要素只赋予了geometry，属性信息为空
                        var graphic = new Graphic(result.geometry, null,{});
                        var add=new Add({
                            "featureLayer":featureLayer,//给哪一个要素图层添加要素
                            "addedGraphics":[graphic]//用于添加的要素
                        })
                        //执行添加函数
                        add.performRedo();
                        //刷新视图
                        layer.refresh();
                        //关闭绘图对象
                        d.deactivate();
                    });
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   
   
    
    
   
   
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 如果是查询操作

            //根据id查询要素
            function searchFeather(id,callback){
                        //得到要素图层的主键属性
                        var idProperty = featureLayer.objectIdField;
                        //定义查询参数
                        var query = new Query();
                        //是否返回几何形状
                        query.returnGeometry = false;
                        //图层的主键名称（根据自己要求修改）
                        query.objectIds = [id];
                        //查询条件1=1意思是：只根据主键查询，忽略where子句
                        query.where = "1=1";
                        //进行查询
                        featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){
                            //如果callback不存在，说明仅仅是查询操作
                            if(!callback){
                                //因为我们根据主键查询，一定只有一个元素
                                var graphic=result[0];
                                //获得属性
                                var attributes=graphic.attributes;
                                //得到该属性信息转换成字符串
                                var result=jsonUtil.stringify(attributes)
                                //将结果弹出一下
                                alert(result);
                            }else//如果callback存在，说明是更新操作
                            {
                                callback(result);
                            }

                        });
                    }
   
   
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
   
   
    
    
   
   
   
   
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

• 如果是更新操作

                    //根据id修改要素
                    function updateFeature(id){
                        //注意:（第二个参数）这里传入一个回调函数，用于处理查询出来的数据
                        searchFeather(id,function(result){
                                //获得旧的要素
                                var oldgraphic=result[0];
                                //新的要素
                                var newgraphic=new Graphic(oldgraphic.toJson());
                                //将alias属性修改为:修改后的C区
                                newgraphic.attributes.alias="修改后的C区";
                                //创建更新对象
                                var update=new Update({
                                    "featureLayer":featureLayer,
                                    "postUpdatedGraphics":[newgraphic],//修改之后的要素
                                    "preUpdatedGraphics":[oldgraphic]//修改之前的要素
                                })
                                //执行刷新操作
                                update.performRedo();
                                //刷新视图
                                layer.refresh();
                                alert("修改成功");

                        })

                    }
   
   
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
   
   
    
    
   
   
   
   
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

2.2实现结果

2.2.1添加操作

• 添加要素前：

• 添加要素后：

2.2.2删除要素操作

• 删除要素前：

• 删除要素后：

2.2.3更新要素（可以看到objectid=1的alias属性为“A区宿舍“）

2.2.4当修改之后点击查询按钮结果：

2.3全部代码

<!DOCTYPE html> 

<html xmlns="http://www.w3/1999/xhtml"> 

<head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <title>WebGIS</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:500px; 

            border:1px solid #000; 

        } 

    </style> 

    <script type="text/javascript"> 

        require(["esri/map", 

        "dojo/on", 

        "dojo/query", 

        "esri/layers/ArcGISDynamicMapServiceLayer", 

        "esri/toolbars/draw", 

        "esri/layers/FeatureLayer", 

        "esri/graphic", "esri/dijit/editing/Add", 

        "esri/dijit/editing/Delete","esri/dijit/editing/Update","esri/tasks/query","dojo/json", 

        "dojo/domReady!"], 

                function (Map,on,query, ArcGISDynamicMapServiceLayer, Draw,FeatureLayer,Graphic,Add,Delete,Update,Query,jsonUtil) { 

                    var map = new esri.Map("MyMapDiv"); 

                    var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer"); 

                    map.addLayer(layer); 

                    //用于操作的要素图层，注意我们是操作的宿舍楼图层 

                    var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/ft/FeatureServer/1", 

                         { 

                            mode:FeatureLayer.MODE_SNAPSHOT, 

                            outFields: ["*"] 

                         }); 

                    //在添加要素时，利用Draw工具获得geometry对象 

                    var d = new Draw(map, { showTooltips: true }); 

                    //要操作的graphic 

                    var g; 

                    query("button").on("click",function(event){ 

                        var value=this.innerHTML; 

                        switch(value){ 

                            case "添加要素": 

                                d.activate(Draw.POLYGON); 

                                break; 

                            case "删除要素": 

                                //创建Graphic对象，删除OBJECTID为34的元素， 

                                //因为OBJECTID是主键，所以只需要指定主键即可 

                                g=new Graphic("","",{ 

                                    "OBJECTID":34 

                                }); 

                                //创建删除对象 

                                var de=new Delete({ 

                                    "featureLayer":featureLayer, 

                                    "deletedGraphics":[g] 

                                }); 

                                //执行删除结果 

                                de.performRedo(); 

                                //刷新图层 

                                layer.refresh(); 

                                break; 

                            case "修改要素": 

                                //用于修改要素的函数,查询更新为36的要素 

                                updateFeature(1); 

                                break; 

                            case "查询要素": 

                                //用于查询要素的函数，查询主键为36的要素 

                                searchFeather(1); 

                                break; 

                        } 

                    }); 

                    //当画图完毕时，添加要素 

                    on(d, "draw-complete", function (result) { 

                        //要素只赋予了geometry，属性信息为空 

                        var graphic = new Graphic(result.geometry, null,{}); 

                        var add=new Add({ 

                            "featureLayer":featureLayer,//给哪一个要素图层添加要素 

                            "addedGraphics":[graphic]//用于添加的要素 

                        }) 

                        //执行添加函数 

                        add.performRedo(); 

                        //刷新视图 

                        layer.refresh(); 

                        //关闭绘图对象 

                        d.deactivate(); 

                    }); 

                    //根据id修改要素 

                    function updateFeature(id){ 

                        //注意:（第二个参数）这里传入一个回调函数，用于处理查询出来的数据 

                        searchFeather(id,function(result){ 

                                //获得旧的要素 

                                var oldgraphic=result[0]; 

                                //新的要素 

                                var newgraphic=new Graphic(oldgraphic.toJson()); 

                                //将alias属性修改为:修改后的A区宿舍 

                                newgraphic.attributes.alias="修改后的A区宿舍"; 

                                //创建更新对象 

                                var update=new Update({ 

                                    "featureLayer":featureLayer, 

                                    "postUpdatedGraphics":[newgraphic],//修改之后的要素 

                                    "preUpdatedGraphics":[oldgraphic]//修改之前的要素 

                                }) 

                                //执行刷新操作 

                                update.performRedo(); 

                                //刷新视图 

                                layer.refresh(); 

                                alert("修改成功"); 

                        }) 

                    } 

                    //根据id查询要素 

                    function searchFeather(id,callback){ 

                        //得到要素图层的主键属性 

                        var idProperty = featureLayer.objectIdField; 

                        //定义查询参数 

                        var query = new Query(); 

                        //是否返回几何形状 

                        query.returnGeometry = false; 

                        //图层的主键名称（根据自己要求修改） 

                        query.objectIds = [id]; 

                        //查询条件1=1意思是：只根据主键查询，忽略where子句 

                        query.where = "1=1"; 

                        //进行查询 

                        featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){ 

                            //如果callback不存在，说明仅仅是查询操作 

                            if(!callback){ 

                                //因为我们根据主键查询，一定只有一个元素 

                                var graphic=result[0]; 

                                //获得属性 

                                var attributes=graphic.attributes; 

                                //得到该属性信息转换成字符串 

                                var result=jsonUtil.stringify(attributes) 

                                //将结果弹出一下 

                                alert(result); 

                            }else//如果callback存在，说明是更新操作 

                            { 

                                callback(result); 

                            } 

                        }); 

                    } 

                }); 

    </script> 

</head> 

<body> 

<div id="MyMapDiv" class="MapClass"></div> 

<button class="btn">添加要素</button> 

<button class="btn">删除要素</button> 

<button class="btn">修改要素</button> 

<button class="btn">查询要素</button> 

</body> 

</html> 


   
   
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
   
   
    
    
   
   
   
   
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

(function () {$(function () {$('pre.prettyprint code').each(function () {
var lines = (this).text().split(′\n′).length;var $(this).text().split('\n').length; var$numbering = $('

').addClass('pre-numbering').hide();
(this).addClass(′has−numbering′).parent().append( $(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
numbering.append( $numbering.append($('

• ').text(i));
  };
  $numbering.fadeIn(1700);
  });
  });
  

本文标签： 图层服务器端要素编辑API