1 DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>WebGIStitle>
6 <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.21/dijit/themes/tundra/tundra.css"/>
7 <link rel="stylesheet"type ="text/css" href="https://js.arcgis.com/3.21/esri/css/esri.css" / >
8 <script type="text/Javascript" src="https://js.arcgis.com/3.21/init.js">script>
9
10 <style type="text/css">
11 .MapClass{
12
13 width:100%;
14
15 height:500px;
16
17 border:1px solid #000;
18
19 }
20
21 style>
22 <script type="text/javascript">
23 require(["esri/map",
24 "dojo/on",
25 "dojo/query",
26 "esri/layers/ArcGISDynamicMapServiceLayer",
27 "esri/toolbars/draw",
28 "esri/layers/FeatureLayer",
29 "esri/graphic",
30 "esri/dijit/editing/Add",
31 "esri/dijit/editing/Delete","esri/dijit/editing/Update","esri/tasks/query","dojo/json","dojo/domReady!"],
32 function (Map,on,query, ArcGISDynamicMapServiceLayer, Draw,FeatureLayer,Graphic,Add,Delete,Update,Query,jsonUtil) {
33 var map = new esri.Map("MyMapDiv");
34
35 var layer = new ArcGISDynamicMapServiceLayer("http://127.0.0.1:6080/arcgis/rest/services/test/MapServer");
36 map.addLayer(layer);
37
38 //用于操作的要素图层
39 var featureLayer = new FeatureLayer("http://127.0.0.1:6080/arcgis/rest/services/test/FeatureServer/0",
40 {
41 mode: FeatureLayer.MODE_SNAPSHOT,
42 outFields: ["*"]
43 });
44
45 //在添加要素时，利用Draw工具获得geometry对象
46 var d = new Draw(map, {
47 showTooltips: true
48 });
49
50 //要操作的graphic
51 var g;
52 query("button").on("click",
53 function(event) {
54 var value = this.innerHTML;
55 switch (value) {
56 case "添加要素":
57 d.activate(Draw.POLYGON);
58 break;
59 case "删除要素":
60 //创建Graphic对象，删除OBJECTID为34的元素，
61 //因为OBJECTID是主键，所以只需要指定主键即可
62 g = new Graphic("", "", {
63 "OBJECTID": 34
64 });
65 //创建删除对象
66 var de = new Delete({
67 "featureLayer": featureLayer,
68 "deletedGraphics": [g]
69 });
70 //执行删除结果
71 de.performRedo();
72 //刷新图层
73 layer.refresh();
74 break;
75 case "修改要素":
76 //用于修改要素的函数,查询更新为36的要素
77 updateFeature(223614);
78 break;
79
80 case "查询要素":
81 //用于查询要素的函数，查询主键为36的要素
82 searchFeather(1);
83 break;
84
85 }
86
87 });
88
89 //当画图完毕时，添加要素
90 on(d, "draw-complete",
91 function(result) {
92
93 //要素只赋予了geometry，属性信息为空
94 var graphic = new Graphic(result.geometry, null, {});
95 //graphic.attributes.add("");
96
97 var add = new Add({
98 "featureLayer": featureLayer,
99 //给哪一个要素图层添加要素
100 "addedGraphics": [graphic] //用于添加的要素
101 })
102
103 //执行添加函数
104 add.performRedo();
105
106 //刷新视图
107 layer.refresh();
108
109 //关闭绘图对象
110 d.deactivate();
111
112 });
113
114 //根据id修改要素
115 function updateFeature(id) {
116 //注意:（第二个参数）这里传入一个回调函数，用于处理查询出来的数据
117 searchFeather(id,
118 function(result) {
119 //获得旧的要素
120 var oldgraphic = result[0];
121 //新的要素
122 var newgraphic = new Graphic(oldgraphic.toJson());
123 //此处可以Draw重新画图
124 //var newgraphic=new Graphic(newGeometry,null,newAttributes);
125 var newAttributes = newgraphic.attributes;
126 newAttributes.MAINPERSON = "Wxz";
127 newgraphic.attributes = newAttributes;
128 //创建更新对象
129 var update = new Update({
130 "featureLayer": featureLayer,
131 "postUpdatedGraphics": [newgraphic],
132 //修改之后的要素
133 "preUpdatedGraphics": [oldgraphic] //修改之前的要素
134 })
135 //执行刷新操作
136 update.performRedo();
137 //刷新视图
138 layer.refresh();
139
140 alert("修改成功");
141
142 })
143
144 }
145
146 //根据id查询要素
147 function searchFeather(id, callback) {
148
149 //得到要素图层的主键属性
150 var idProperty = featureLayer.objectIdField;
151
152 //定义查询参数
153 var query = new Query();
154
155 //是否返回几何形状
156 query.returnGeometry = false;
157
158 //图层的主键名称（根据自己要求修改）
159 query.objectIds = [id];
160
161 //查询条件1=1意思是：只根据主键查询，忽略where子句
162 query.where = "1=1";
163
164 //进行查询
165 featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW,
166 function(result) {
167
168 //如果callback不存在，说明仅仅是查询操作
169 if (!callback) {
170
171 //因为我们根据主键查询，一定只有一个元素
172 var graphic = result[0];
173
174 //获得属性
175 var attributes = graphic.attributes;
176
177 //得到该属性信息转换成字符串
178 var result = jsonUtil.stringify(attributes)
179
180 //将结果弹出一下
181 alert(result);
182
183 } else //如果callback存在，说明是更新操作
184 {
185
186 callback(result);
187
188 }
189
190 });
191
192 }
193
194 });
195
196 script>
197 head > <body >
198 <div id="MyMapDiv" class = "MapClass">div>
199 <button class="btn">添加要素button>
200 <button class="btn"> 删除要素 button>
201 <button class="btn">修改要素button>
202 <button class = "btn" > 查询要素 button>
203 body >
204 html>