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

http://blog.csdn.net/gisshixisheng/article/details/44310765

在前一篇博文“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事件中。