arcgis 要素服务增删改查
<!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="../3.27/dijit/themes/tundra/tundra.css" /> <link rel="stylesheet" type="text/css" href="../3.27/esri/css/esri.css" /> <script type="text/Javascript" src="../3.27/init.js"></script> <style type="text/css"> .MapClass { width: 100%; height: 500px; border: 1px solid #000; } </style> <script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var map; 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", 'esri/Evented', 'esri/tasks/PrintTemplate', 'esri/tasks/PrintTask', 'esri/tasks/PrintParameters', 'esri/request', 'esri/config', 'dojo/_base/array', 'dojo/dom', 'dojo/parser', "esri/InfoTemplate", "dojo/domReady!" ], function(Map, on, query, ArcGISDynamicMapServiceLayer, Draw, FeatureLayer, Graphic, Add, Delete, Update, Query, jsonUtil, Evented, PrintTemplate, PrintTask, PrintParameters, esriRequest, esriConfig, arrayUtils, dom, parser, InfoTemplate ) { var featureUrl = "http://localhost:6080/arcgis/rest/services/ZC/aa/FeatureServer/0"; var baseUrl = "http://localhost:6080/arcgis/rest/services/ZC/zc/MapServer"; //map = new esri.Map("MyMapDiv"); map = new Map("MyMapDiv", { basemap: 'osm', center: [113.851625, 23.373552], zoom: 10 }) var layer = new ArcGISDynamicMapServiceLayer(baseUrl); //map.addLayer(layer); var infoTemplate = new InfoTemplate("Attributes", "name:${name}"); var layers = new FeatureLayer(featureUrl, { id: "lay", mode: FeatureLayer.MODE_SNAPSHOT, infoTemplate: infoTemplate, outFields: ["*"] }); map.addLayer(layers); /*map.on('click',function(evt){ console.log(evt.mapPoint); })*/ //用于操作的要素图层,注意我们是操作的宿舍楼图层 var featureLayer = new FeatureLayer(featureUrl, { mode: FeatureLayer.MODE_SNAPSHOT, // infoTemplate: infoTemplate, outFields: ["*"] }); //map.addLayer(featureLayer); //在添加要素时,利用Draw工具获得geometry对象 var d = new Draw(map, { showTooltips: true }); //要操作的graphic var g; query("button").on("click", function(event) { debugger; var value = this.innerHTML; switch (value) { case "添加要素": d.activate(Draw.POLYGON); /*var aajson = { geometry:{ spatialReference: {wkid: 4326, latestWkid: 4326}, x: "113.05923821722959", y: "23.839534074518017" }, symbol:null, attributes:{ //"OBJECTID": 227, "农作物输出":"" , "土壤本底值": "0.132294", "大气沉降": "0.036585", "年净累积率": "0.000436", "年净累积量": "1.169477", "灌溉水输入": "1.098019", "点位编号": "333-33-33", "纬度": "23.83083", "经度": "113.17028", "肥料输入": "0.280426" } } var graphic = new Graphic(aajson); var add=new Add({ "featureLayer":featureLayer,//给哪一个要素图层添加要素 "addedGraphics":[graphic] //用于添加的要素 }) //执行添加函数 add.performRedo(); //刷新视图 layer.refresh();*/ break; case "删除要素": //创建Graphic对象,删除OBJECTID为34的元素, //因为OBJECTID是主键,所以只需要指定主键即可 // var data =[]; // for(var i=0;i<227;i++){ // var gg=new Graphic("","",{ // "OBJECTID":i // //点位编号: "333-33-33" // }); // data.push(gg) // } delEle(); g = new Graphic("", "", { "OBJECTID": 2 //点位编号: "333-33-33" }); //创建删除对象 var de = new Delete({ "featureLayer": featureLayer, "deletedGraphics": [g] //"deletedGraphics":data }); //执行删除结果 //de.performRedo(); //刷新图层 //layer.refresh(); break; case "修改要素": //用于修改要素的函数,查询更新为36的要素 updateFeature(1); break; case "查询要素": //用于查询要素的函数,查询主键为36的要素 searchFeather(1); break; } }); function delEle() { var html = ""; for (var i = 0; i < map.getLayer("lay").graphics.length; i++) { html += '<option value="' + map.getLayer("lay").graphics[i].attributes["OBJECTID"] + '">' + map.getLayer("lay") .graphics[i].attributes["OBJECTID"] + '</option>' } $("#sel").html(html); $("#sel").show(); } $("#sel").change(function() { //alert($(this).val()) g = new Graphic("", "", { "OBJECTID": $(this).val() //点位编号: "333-33-33" }); //创建删除对象 var de = new Delete({ "featureLayer": featureLayer, "deletedGraphics": [g] //"deletedGraphics":data }); //执行删除结果 de.performRedo(); //刷新图层 setTimeout(function() { layers.refresh(); }, 2000) $("#sel").hide(); }) //当画图完毕时,添加要素 on(d, "draw-complete", function(result) { //要素只赋予了geometry,属性信息为空 var infoTemplate = new InfoTemplate("Attributes", "name:${name}"); var graphic = new Graphic(result.geometry, null, { "name": "tt" }, infoTemplate); //var graphic = new Graphic(result.geometry, null,{}); var add = new Add({ "featureLayer": featureLayer, //给哪一个要素图层添加要素 "addedGraphics": [graphic] //用于添加的要素 }) //执行添加函数 add.performRedo(); //刷新视图 setTimeout(function() { layers.refresh(); }, 2000) //layers.refresh(); //关闭绘图对象 d.deactivate(); }); //根据id修改要素 function updateFeature(id) { //注意:(第二个参数)这里传入一个回调函数,用于处理查询出来的数据 searchFeather(id, function(result) { //获得旧的要素 var oldgraphic = result[0]; //新的要素 //var newgraphic=new Graphic(oldgraphic.toJson()); var oldjson = oldgraphic.toJson(); oldjson.attributes["name"] = "kk" var newgraphic = new Graphic(oldjson); //将alias属性修改为:修改后的A区宿舍 //newgraphic.attributes.农作物输出="0.245553"; //创建更新对象 var update = new Update({ "featureLayer": featureLayer, "postUpdatedGraphics": [newgraphic], //修改之后的要素 "preUpdatedGraphics": [oldgraphic] //修改之前的要素 }) //执行刷新操作 update.performRedo(); //刷新视图 //layer.refresh(); setTimeout(function() { layers.refresh(); }, 2000) console.log("修改成功"); }) } //根据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) { alert(result.length); //因为我们根据主键查询,一定只有一个元素 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> <select id='sel' style='display: none;'> <option value="请选择"></option> </select> </body> </html>