基於Arcgis for Js的web GIS資料線上採集簡介，arcgisgis

基於Arcgis for Js的web GIS資料線上採集簡介，arcgisgis

在前一篇博文“Arcgis for js之WKT和geometry轉換”中實現了wkt和geometry之間的相互轉化，博文原文地址為：http://blog.csdn.net/gisshixisheng/article/details/44057453。在本節，接上文，簡單講述基於Arcgis for Js的web GIS資料線上採集。

實現資料的線上採集，最主要的是資料的儲存，即將採集到的資料的geometry對象儲存下來，並後續可以轉換為shp資料。在本文，我的處理方式為將前段繪製的geometry對象轉換為wkt形式儲存在資料庫中，在oracle資料庫中，用clob儲存wkt即可。

其次，資料線上採集還需滿足一下需求：

1、對象繪製；

2、對象的編輯；

3、對象的刪除；

4、對象的展示。

下面，看看首先後的效果：

主視窗

選擇編輯

繪製完成後提示

點集對象開始編輯

單擊地圖提示編輯資訊

刪除提示

刪除後的結果

至此，資料的線上採集基本完成，接下來說說實現步驟吧。

1、對象的繪製

對象的繪製是通過Edit來實現的，如下：

        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('是否編輯?')){                    console.log("編輯："+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 SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,                                    new Color([255,0,0]), 3);                            wkt = LineToWKT(evt.geometry);                            break;                        }                        case "polygon":{                            symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                                    new SimpleLineSymbol(SimpleLineSymbol.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_SQUARE, 10,                                    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('是否繪製?')){                        console.log("建立："+wkt);                    }                });                on(dom.byId("editBtn"), "click",function(){                    var objType = $("#itemType").val();                    switch(objType){                        case "polyline":{                            draw.activate(esri.toolbars.Draw.POLYLINE);                            break;                        }                        case "polygon":{                            draw.activate(esri.toolbars.Draw.POLYGON);                            break;                        }                        default :{                            draw.activate(esri.toolbars.Draw.POINT);                            break;                        }                    }                    map.setMapCursor("corsshair");                    $("#editWindow").hide();                 });            }

2、對象的編輯

對象的編輯是通過Edit實現的，如下：

            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('是否編輯?')){                    console.log("編輯："+wkt);                }            });            map.on("click", function(evt){                edit.deactivate();            });            editLayer.on("click", function(evt) {                event.stop(evt);                activateToolbar(evt.graphic);            });            function activateToolbar(graphic) {                var tool = 15;                var options = {allowAddVertices: "true", allowDeleteVertices: "true", uniformScaling: "true"};                edit.activate(tool, graphic, options);                select = graphic;            }

3、對象的刪除

            delItem = function(td){                if(confirm('是否刪除?')){                    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;                        }                    }                }            }

最後，就是將繪製的geometry傳給後台，主要有兩個地方，一個是繪製完成之後，代碼中體現在draw的draw-end事件中，一個是在編輯完成之後，代碼中體現在edit的deactivate事件中。