ArcGIS API For Javascript之编辑服务器端图层(通过要素服务feature进行增删改查 )
来源:互联网 发布:《南风知我意》 编辑:程序博客网 时间:2024/05/29 16:49
- 引言
- 需求服务器端图层编辑
- 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.org/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 () {('pre.prettyprint code').each(function () {
var lines =
for (i = 1; i <= lines; i++) {
};
$numbering.fadeIn(1700);
});
});
0 0
- ArcGIS API For Javascript之编辑服务器端图层(通过要素服务feature进行增删改查 )
- (十二)ArcGIS API For Javascript之编辑服务器端图层
- 通过 ArcGIS for Desktop 发布可编辑要素服务教程
- ArcGIS API for Javascript 实现在线要素编辑(一)
- ArcGIS API for Javascript 实现在线要素编辑(二)
- ArcGIS API for Javascript 实现在线要素编辑(二)
- ArcGIS API for Javascript 实现在线要素编辑(一)
- ArcGIS API For Javascript之多图层显示与隐藏,图层要素选框查询
- ArcGIS API for JavaScript 通过identifyTask实现点击选择要素
- ArcGIS API for JavaScript——要素服务(FeatureLayer)
- MongoDB 通过 Maven 用 Java API 进行增删改查
- (十)ArcGIS API For Javascript之动态图层
- ArcGIS API For Javascript之动态图层
- arcgis api for javascript 图层控制
- ArcGIS api for javascript-图层控制
- arcgis for javascript 选中要素、删除要素和编辑节点
- ArcGIS For JavaScript API Feature layer hover(功能图层的悬浮)————(二十六)
- 怎么对ArcGIS for Server发布服务的要素类进行操作(字段增删、索引重建等)
- 方形图片,高度铺满,宽度居中裁剪
- 设计师应该关注的科技发展方向(四)
- SQL Server 密码过期
- Python selenium —— 将你的自动化脚本打包成一个exe
- Android ViewPager 自定义翻页动画
- ArcGIS API For Javascript之编辑服务器端图层(通过要素服务feature进行增删改查 )
- Linux c==网络编程的理论知识-并发服务器,分布式服务器(34)
- <C语言漫谈录>5——原码,反码,补码,大端模式与小端模式
- 《图解HTTP》学习笔记之(二)
- bzoj 4602: [Sdoi2016]齿轮(加权并查集)
- linux shell注意点
- 【xamarin】xamarin debug exited
- 类方法 和 对象方法(实例方法) 区别的误区
- 利用JS代码判断是否手机访问()