基于Arcgis for Js的web GIS数据在线采集简介

在前一篇博文“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();
                 });
            }

对象的编辑是通过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;
            }

            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;
                        }
                    }
                }
            }