admin管理员组文章数量:1650911
- 引言
- 需求服务器端图层编辑
- 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 () {('pre.prettyprint code').each(function () {
var lines = (this).text().split(′\n′).length;var numbering = $('
(this).addClass(′has−numbering′).parent().append( numbering);
for (i = 1; i <= lines; i++) {
numbering.append( ('
- ').text(i));
};
$numbering.fadeIn(1700);
});
});
版权声明:本文标题:ArcGIS API For Javascript之编辑服务器端图层(通过要素服务feature进行增删改查 ) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729534489a1205238.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论