【转】使用arcgis javascript api 保存不规则面状数据(镂空、自相交)
使用arcgis javascript. api 编辑面状数据的时候,如果面状数据出现自相交(如八字形、多部分、镂空等情况),在使用FeatureLayer的applyEdits函数进行保存时,会保存不成功。 一般来说,保存不成功脚本是不会有任何提示的,必须要对编辑事件进行监控,让其抛出提示,可以参考featureLayer里面的事件onEditsComplete(addResults, updateResults, deleteResults) 事件。在地图初始化时加载featureLayer,然后给featureLayer注册事件,使用dojo.connect的方式,如下dojo.connect(editLayer,"onEditsComplete",editCalled); 其中editLayer就是对应的FeatureLayer,onEditsComplete是FeatureLayer的事件,editCalled是这个事件所触发的执行方法。
function editCalled(addResults,updateResults, deleteResults){ if(addResults[0].success==true){ alert("保存成功"); }else{ alert("保存失败"); } }
接下来要对面图形进行处理,由于客户端脚本无法对自相交的面数据进行运算,那么,我们可以借助Geometry Service的simplify函数,处理后的图形就会由于一个ring变成实际上的多个ring。(注:arcgis 体系下,polygon是由多个ring组成的,默认情况下polygon都是一个ring。出现自相交的时候,polygon这个默认的ring实际上已经是错误的,因此无法对图形进行保存)。这种方法的原理在于通过simplify把polygon变成多个ring再进行保存。原理很简单,但其中有一点要注意的,simplify处理时需要一定的时间,必须要等待期处理完成后重设graphic的图形才能保存。因此,必须要对simplify进行监听。gsvc.simplify([geometry],doSave); doSave函数负责处理新的图形。如下代码段
function doSave(geometries){ alert("Ring的数目 = " + geometries[0].rings.length); gra.setGeometry(geometries[0]); //gra是之前已经声明的graphic }
以下是面编辑的整个网页的测试代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta. http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta. http-equiv="X-UA-Compatible" content="IE=7" /> <title>Maps Toolbar</title> <link rel="stylesheet" type="text/css" href="http://lazysheep/arcgis_js_api/library/2.0/arcgis/js/dojo/dijit/themes/tundra/tundra.css"> <script. type="text/javascript" src="http://lazysheep/arcgis_js_api/library/2.0/arcgis/"></script> <script. type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.toolbars.draw"); dojo.require("esri.dijit.editing.Editor-all"); dojo.require("esri.tasks.geometry"); dojo.require("esri.geometry"); var map, toolbar, symbol, editLayer,gsvc,gra; function init() { esri.config.defaults.io.proxyUrl = "proxy.ashx"; map = new esri.Map("map"); gsvc = new esri.tasks.GeometryService("http://lazysheep:8399/arcgis/rest/services/Geometry/GeometryServer"); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://lazysheep:8399/arcgis/rest/services/world/MapServer"); map.addLayer(basemap); editLayer = new esri.layers.FeatureLayer("http://lazysheep:8399/arcgis/rest/services/wd/FeatureServer/0", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); dojo.connect(map, "onLayersAddResult", initEditing); dojo.connect(editLayer,"onEditsComplete",addCalled); map.addLayers([editLayer]); } function addCalled(addResults,updateResults, deleteResults){ if(addResults[0].success==true){ alert("success"); }else{ alert("faile"); } } function createToolbar(map) { toolbar = new esri.toolbars.Draw(map); dojo.connect(toolbar, "onDrawEnd", addToMap); } function addToMap(geometry) { switch (geometry.type) { case "point": var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25])); break; case "polyline": var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1); break; case "polygon": var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); gsvc.simplify([geometry],doSave); //对simplify进行监听,在完成simplify操作后重设图形。 break; case "extent": var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); break; case "multipoint": var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5])); break; } var graphic = new esri.Graphic(geometry, symbol); gra = graphic; map.graphics.add(graphic); } function drawing(){ toolbar = new esri.toolbars.Draw(map); toolbar.activate(esri.toolbars.Draw.POLYGON); dojo.connect(toolbar, "onDrawEnd", addToMap); } function drawing2(){ toolbar = new esri.toolbars.Draw(map); toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON); dojo.connect(toolbar, "onDrawEnd", addToMap); } function initEditing(layers) { var myMap = this; var editToolbar = new esri.toolbars.Edit(myMap); dojo.connect(editToolbar, "onDeactivate", function(tool,graphic) { editLayer.applyEdits(null, [graphic], null); }); var editingEnabled = false; dojo.connect(editLayer, "onDblClick", function(evt) { dojo.stopEvent(evt); if (editingEnabled === false) { editingEnabled = true; editToolbar.activate(esri.toolbars.Edit.EDIT_VERTICES , evt.graphic); } else { editToolbar.deactivate(); editingEnabled = false; } }); } function doSave(geometries){ alert("Ring的数目 = " + geometries[0].rings.length); gra.setGeometry(geometries[0]); } function save(){ editLayer.applyEdits([gra],null,null); } dojo.addOnLoad(init); </script> </head> <body class="tundra"> <input type="button" value="draw polygon" nclick="drawing()"/> <input type="button" value="draw gpolygon" nclick="drawing2()"/> <input type="button" value="save" nclick="save()"/> <div id="map" style="width:900px; height:600px; border:1px solid #000;"></div> </body> </html>
博客地址: http://www.cnblogs.com/dwf07223,本文以学习、研究和分享为主,欢迎转载,转载请务必保留此出处。若本博文中有不妥或者错误处请不吝赐教。 |