Introduction of Web GIS data online collection based on ArcGIS for JS

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