In the previous post "Arcgis for JS wkt and Geometry conversion" to achieve the wkt and geometry between the conversion, the original address is: http://blog.csdn.net/gisshixisheng/article/ details/44057453. In this section, next, we briefly describe the online collection of Web GIS data based on ArcGIS for JS.
The realization of data online acquisition, the most important is the storage of data, the data will be collected geometry objects are saved, and subsequently can be converted to SHP data. In this article, my approach is to convert the geometry objects drawn in the previous section to wkt form stored in the database, in the Oracle database, with CLOB storage wkt.
Second, data online acquisition needs to meet the requirements:
1, object drawing;
2, the editing of objects;
3, the deletion of objects;
4, the display of objects.
Below, look at the effect after the first:
Main Window
Select Edit
Prompt after drawing complete
Point Set object Start editing
Click Map tips to edit information
Delete prompt
The result after deletion
At this point, the online collection of data is basically complete, then say the implementation steps.
1. Drawing of objects
The drawing of the object is implemented by using edit, as follows:
var edit = new edit (map); var Select; Edit.on ("Deactivate", function (evt) { var geom = evt.graphic.geometry; var wkt = null; Switch (geom.type) {case "polyline": { wkt = linetowkt (geom); break; } Case "Polygon": { wkt = polygontowkt (geom); break; } Default: { wkt = pointtowkt (geom); break; } } if (Confirm (' edit? ')) { Console.log ("edit:" +wkt); } ); Map.on ("click", Function (evt) { edit.deactivate (); });
EditItem = function (TD) {var TR = td.parentelement; var objType = tr.id; var id = tr.cells[0].innerhtml; var title = tr.cells[1].innerhtml; $ ("#itemTitle"). HTML (""). HTML (title); $ ("#itemType"). Val ("point"); $ ("#itemObjtype"). Val (objType) $ ("#editWindow"). Show (); var draw = new Draw (map); Draw.on ("Draw-end", function (evt) {map.setmapcursor ("default"); var symbol = NULL,WKT; Switch (evt.geometry.type) {case "polyline": {symbol = new SIMPLELINESYMB OL (Simplelinesymbol.style_solid, New Color ([255,0,0]), 3); wkt = Linetowkt (evt.geometry); Break } case "Polygon": {symbol =New Simplefillsymbol (Simplefillsymbol.style_solid, New Simplelinesymbol (Simplelinesymbo L.style_solid, New Color ([255,0,0]), 2), new Color ([200,200,200,0.5])); wkt = Polygontowkt (evt.geometry); Break } default: {symbol = new Simplemarkersymbol (simplemarkersymbol.style_sq Uare, New Simplelinesymbol (Simplelinesymbol.style_solid, New color ([255,0,0]), 1), New color ([0,255,0,0.25])); wkt = Pointtowkt (evt.geometry); Break }} var graphic = new Graphic (evt.geometry, symbol,{id:$ ("#itemObjtype"). Val (), Name: $ ("#itemTitle"). HTML ()}); Editlayer.add (graphic); Draw.deactivate (); if (Confirm (' Draw? ')) {Console.log ("NEW:" +wkt); } }); On (Dom.byid ("editbtn"), "click", Function () {var objType = $ ("#itemType"). Val (); Switch (objType) {case "polyline": {draw.activate (Esri.toolbars.Draw.POLY line); Break } case "Polygon": {draw.activate (Esri.toolbars.Draw.POLYGON); Break } default: {Draw.activate (Esri.toolbars.Draw.POINT); Break }} map.setmapcursor ("Corsshair"); $ ("#editWindow"). Hide (); }); }
2. Editing of objects
The editing of the object is implemented by edit, as follows:
var edit = new edit (map); var Select; Edit.on ("Deactivate", function (evt) {var geom = evt.graphic.geometry; var wkt = null; Switch (geom.type) {case "polyline": {wkt = Linetowkt (Geom); Break } case "Polygon": {wkt = Polygontowkt (Geom); Break } default: {wkt = Pointtowkt (Geom); Break }} if (Confirm (' edit? ')) {Console.log ("edit:" +wkt); } }); Map.on ("click", Function (evt) {edit.deactivate (); }); Editlayer.on ("click", Function (evt) {event.stop (evt); Activatetoolbar (evt.graphic); }); functionActivatetoolbar (graphic) {var tool = 15; var options = {allowaddvertices: "true", Allowdeletevertices: "True", Uniformscaling: "true"}; Edit.activate (tool, graphic, options); select = Graphic; }
3. Deletion of objects
Delitem = function (TD) { if (confirm (' delete? ')) { var id = tr.cells[0].innerhtml; var graphics = editlayer.graphics; for (Var i= 0, Dl=graphics.length; i<dl; i++) { var graphic = graphics[i]; if (graphic.attributes.id===id) { editlayer.remove (graphic); Break;}}}}
Finally, the geometry is passed to the background, there are two main places, one is drawn after the completion of the code is reflected in the draw Draw-end event, one after the completion of the editing, the code is reflected in the edit Deactivate event.
Introduction of Web GIS data online collection based on ArcGIS for JS