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>WebGIS</title>
  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>