（转） 基于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来实现的，如下：

1. var edit = new Edit(map);
2. var select;
3. edit.on("deactivate",function(evt){
4. var geom = evt.graphic.geometry;
5. var wkt = null;
6. switch(geom.type){
7. case "polyline":{
8. wkt = LineToWKT(geom);
9. break;
10. }
11. case "polygon":{
12. wkt = PolygonToWKT(geom);
13. break;
14. }
15. default :{
16. wkt = PointToWKT(geom);
17. break;
18. }
19. }
20. if(confirm('是否编辑?')){
21. console.log("编辑："+wkt);
22. }
23. });
24. map.on("click", function(evt){
25. edit.deactivate();
26. });

1. editItem = function(td){
2. var tr = td.parentElement;
3. var objType = tr.id;
4. var id = tr.cells[0].innerHTML;
5. var title = tr.cells[1].innerHTML;
6. $("#itemTitle").html("").html(title);
7. $("#itemType").val("point");
8. $("#itemObjtype").val(objType)
9. $("#editWindow").show();
10. var draw = new Draw(map);
11. draw.on("draw-end", function(evt){
12. map.setMapCursor("default");
13. var symbol = null,wkt;
14. switch(evt.geometry.type){
15. case "polyline":{
16. symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
17. new Color([255,0,0]), 3);
18. wkt = LineToWKT(evt.geometry);
19. break;
20. }
21. case "polygon":{
22. symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
23. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
24. new Color([255,0,0]), 2),
25. new Color([200,200,200,0.5]));
26. wkt = PolygonToWKT(evt.geometry);
27. break;
28. }
29. default :{
30. symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
31. new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
32. new Color([255,0,0]), 1),
33. new Color([0,255,0,0.25]));
34. wkt = PointToWKT(evt.geometry);
35. break;
36. }
37. }
38. var graphic = new Graphic(evt.geometry, symbol,{id:$("#itemObjtype").val(),name:$("#itemTitle").html()});
39. editLayer.add(graphic);
40. draw.deactivate();
41. if(confirm('是否绘制?')){
42. console.log("新建："+wkt);
43. }
44. });
45. on(dom.byId("editBtn"), "click",function(){
46. var objType = $("#itemType").val();
47. switch(objType){
48. case "polyline":{
49. draw.activate(esri.toolbars.Draw.POLYLINE);
50. break;
51. }
52. case "polygon":{
53. draw.activate(esri.toolbars.Draw.POLYGON);
54. break;
55. }
56. default :{
57. draw.activate(esri.toolbars.Draw.POINT);
58. break;
59. }
60. }
61. map.setMapCursor("corsshair");
62. $("#editWindow").hide();
63. });
64. }

2、对象的编辑

对象的编辑是通过Edit实现的，如下：

1. var edit = new Edit(map);
2. var select;
3. edit.on("deactivate",function(evt){
4. var geom = evt.graphic.geometry;
5. var wkt = null;
6. switch(geom.type){
7. case "polyline":{
8. wkt = LineToWKT(geom);
9. break;
10. }
11. case "polygon":{
12. wkt = PolygonToWKT(geom);
13. break;
14. }
15. default :{
16. wkt = PointToWKT(geom);
17. break;
18. }
19. }
20. if(confirm('是否编辑?')){
21. console.log("编辑："+wkt);
22. }
23. });
24. map.on("click", function(evt){
25. edit.deactivate();
26. });
27. editLayer.on("click", function(evt) {
28. event.stop(evt);
29. activateToolbar(evt.graphic);
30. });
31. function activateToolbar(graphic) {
32. var tool = 15;
33. var options = {allowAddVertices: "true", allowDeleteVertices: "true", uniformScaling: "true"};
34. edit.activate(tool, graphic, options);
35. select = graphic;
36. }

3、对象的删除

1. delItem = function(td){
2. if(confirm('是否删除?')){
3. var id = tr.cells[0].innerHTML;
4. var graphics = editLayer.graphics;
5. for(var i= 0, dl=graphics.length; i<dl; i++){
6. var graphic = graphics[i];
7. if(graphic.attributes.id===id){
8. editLayer.remove(graphic);
9. break;
10. }
11. }
12. }
13. }

最后，就是将绘制的geometry传给后台，主要有两个地方，一个是绘制完成之后，代码中体现在draw的draw-end事件中，一个是在编辑完成之后，代码中体现在edit的deactivate事件中。