在现实需求中，我们不仅仅需要编辑客户端图层，也有可能去编辑服务器端图层，要想编辑服务器端的图层，必须要将地图发布为：要素服务
需求（服务器端图层编辑）
关于服务器端图层的操作,基本就是增删改查操作，要素服务的查询前面已经介绍过，在此篇博客中主要记录一下关于要素服务的增删改操作,在ArcGIS API for JS中给我们提供了三个类用于要素的增Add,删Delete,改Update,接下来就用这三个类来实现我们的功能。
- 我们操作的是要素服务的sushelou图层
- 我们的服务：
注意：宿舍楼图层编号为1
图层的属性信息
实现
首先在页面添加三个按钮(用于实现用户的增删改操作)
添加地图（省略）
创建通用的对象，例如Draw1
2
3
4
5
6
7
8
9
10//用于操作的要素图层，注意我们是操作的宿舍楼图层
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
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34query("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;
}
});
如果是添加操作（利用draw添加geometry属性）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//当画图完毕时，添加要素
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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31//根据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//根据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 | <!DOCTYPE html> |
