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

Source: Internet
Author: User
Tags polyline

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.