南沙政府应急系统之GIS一张图（arcgis api for flex）讲解（十）态势标绘模块

sinna

config.xml文件的配置如下：

1.    <widget label="态势标绘" icon="assets/images/impact_area_over.png"
   
2.             config="widgets/esri/NewPlot/NewPlotWidget.xml" url="widgets/esri/NewPlot/NewPlotWidget.swf" />

复制代码

源代码目录如下：

界面效果：

大概的思路如下：利用arcgis api  for flex的draw绘制接口以及一个第三方的绘制api PlotAPI4flex,来绘制各种箭头以及多边形、圆形等图形，文本和图片的绘制用的是arcgis api。

NewPlotWidget.xml：配置计算周长和面积的单位信息等等

1. <?xml version="1.0" encoding="utf-8" ?>
   
2. <configuration>
   
3.     <geometryservice>http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer</geometryservice>
   
4.     <spatialref>4326</spatialref>
   
5.     <distanceunit>千米</distanceunit>      
   
6.     <areaunit>平方公里</areaunit>  
   
7.     <showMeasurements>显示测量结果</showMeasurements>   
   
8.     <perimeter>周长：</perimeter>
   
9.     <arealabel>面积：</arealabel>
   
10.       
    
11. </configuration>

复制代码

NewPlotWidget.mxml：

简单的描述一下思路好了

1.响应绘制的事件，要激活draw工具：

1. //集成后的标会响应函数            
   
2.             private function activateDrawTool(event:MouseEvent):void
   
3.             {
   
4.                     this.drawToolbar.deactivate();
   
5.                     graphicsLayer.visible=true;                        
   
6.                     selectedDrawingIcon =BorderImage(event.currentTarget);
   
7.                     clearSelectionFilter();
   
8.                     selectedDrawingIcon.filters = [ glowFilter ];
   
9.                     
   
10.                     finishDrawing = false;
    
11.                     showMeasurements = false;
    
12.                     drawType = selectedDrawingIcon.name;   
    
13.                     
    
14.                     borVisibleChange(selectedDrawingIcon.id);
    
15.                     
    
16.                     switch (drawType)
    
17.                     {
    
18.                         
    
19.                         case DrawTool.POLYLINE:
    
20.                         {
    
21.                             addingPlot=false;                        
    
22.                             drawingPolygon = false;
    
23.                             drawingLine = true;
    
24.                             showMeasurements = true;
    
25.                            
    
26.                             outlineColorId.visible=false;
    
27.                             outlineColor.visible=false;
    
28.                            
    
29.                             drawStatus = drawLineLabel;
    
30.                            
    
31.                             this.drawtool.deactivate();   
    
32.                             setMapAction(drawType, drawStatus, lineSymbol, drawEnd);
    
33.                             break;
    
34.                         }
    
35.                         case DrawTool.FREEHAND_POLYLINE:
    
36.                         {
    
37.                             addingPlot=drawingPolygon =false;                           
    
38.                             drawingLine=showMeasurements = true;
    
39.                            
    
40.                             outlineColorId.visible=false;
    
41.                             outlineColor.visible=false;                    
    
42.                            
    
43.                             drawStatus = drawFreehandLineLabel;
    
44.                            
    
45.                             this.drawtool.deactivate();   
    
46.                             setMapAction(drawType, drawStatus, lineSymbol, drawEnd);
    
47.                             break;
    
48.                         }                           
    
49.                         case DrawTool.POLYGON:
    
50.                         {
    
51.                             addingPlot=    drawingLine = false;
    
52.                             drawingPolygon = showMeasurements = true;        
    
53.                            
    
54.                             outlineColorId.visible=true;
    
55.                             outlineColor.visible=true;
    
56.                            
    
57.                             drawStatus = drawPolygonLabel;
    
58.                            
    
59.                             this.drawtool.deactivate();   
    
60.                             setMapAction(drawType, drawStatus, fillSymbol, drawEnd);                           
    
61.                             break;
    
62.                         }
    
63.                         case DrawTool.EXTENT:
    
64.                         {
    
65.                             addingPlot=    drawingLine = false;
    
66.                             drawingPolygon = showMeasurements = true;        
    
67.                            
    
68.                             outlineColorId.visible=true;
    
69.                             outlineColor.visible=true;
    
70.                            
    
71.                             drawStatus = drawExtentLabel;
    
72.                            
    
73.                             this.drawtool.deactivate();   
    
74.                             setMapAction(drawType, drawStatus, fillSymbol, drawEnd);                           
    
75.                             break;
    
76.                         }
    
77.                         case DrawTool.CIRCLE:
    
78.                         {
    
79.                             addingPlot=    drawingLine = false;
    
80.                             drawingPolygon = showMeasurements = true;        
    
81.                            
    
82.                             outlineColorId.visible=true;
    
83.                             outlineColor.visible=true;
    
84.                            
    
85.                             drawStatus = drawCircleLabel;
    
86.                            
    
87.                             this.drawtool.deactivate();   
    
88.                             setMapAction(drawType, drawStatus, fillSymbol, drawEnd);                           
    
89.                             break;
    
90.                         }
    
91.                         case DrawTool.FREEHAND_POLYGON:
    
92.                         {
    
93.                             addingPlot= drawingLine = false;
    
94.                             drawingPolygon =showMeasurements = true;
    
95.                            
    
96.                             outlineColorId.visible=true;
    
97.                             outlineColor.visible=true;
    
98.                            
    
99.                             drawStatus = drawFreehandPolygonLabel;
    
100.                            
     
101.                             this.drawtool.deactivate();   
     
102.                             setMapAction(drawType, drawStatus, fillSymbol, drawEnd);
     
103.                             break;
     
104.                         }   
     
105.                         case DrawTool.MAPPOINT:
     
106.                         {   
     
107.                             this.addingPlot=drawingPolygon =drawingLine = showMeasurements = false;                        
     
108.                             this.addingText=true;
     
109.                             drawStatus = drawMapPointLabel;            
     
110.                            
     
111.                             outlineColorId.visible=true;
     
112.                             outlineColor.visible=true;
     
113.                            
     
114.                             this.drawtool.deactivate();                           
     
115.                             setMapAction(drawType,drawStatus,null,drawEnd);                        
     
116.                             break;
     
117.                         }
     
118.                         default:
     
119.                         {
     
120.                             //响应态势标会
     
121.                             drawingPolygon =drawingLine = showMeasurements = false;                        
     
122.                             this.addingPlot=true;   
     
123.                            
     
124.                             outlineColorId.visible=true;
     
125.                             outlineColor.visible=true;
     
126.                            
     
127.                             this.setMapAction(null,null,null,null);
     
128.                             var outline:SimpleLineSymbol=new SimpleLineSymbol("solid", this.outlineColor.selectedColor, this.customAlpha.value, 1);               
     
129.                             drawtool.fillSymbol=new SimpleFillSymbol("solid", this.fillColor.selectedColor, customAlpha.value, outline);        
     
130.                                                         
     
131.                             this.drawtool.activate(drawType);   
     
132.                                 
     
133.                            
     
134.                         }
     
135.                        
     
136.                         
     
137.                     }
     
138.                
     
139.             }

复制代码

2.绘制完之后的结束事件，获取geometry等信息，分别判断是属于哪种类型（点、线、面等等），然后转换graphic，添加在地图上展示出来

1. private function drawEnd(event:DrawEvent):void
   
2.             {
   
3.                
   
4.                 finishDrawing = true;
   
5.                 this.drawtool.deactivate();
   
6.                 this.setMapAction(null,null,null,null);
   
7.                
   
8.                 selectedDrawingIcon = null;
   
9.                 clearSelectionFilter();
   
10.                 event.target.deactivate();
    
11.                 var outSR:SpatialReference = new SpatialReference(102113);
    
12.                 var geom:Geometry = event.graphic.geometry;
    
13.                
    
14.                 lastDrawGraphic = new Graphic(geom);            
    
15.                
    
16.                 if(addingPlot==true)
    
17.                 {
    
18.                     
    
19.                     var outline:SimpleLineSymbol=new SimpleLineSymbol("solid", this.outlineColor.selectedColor, this.customAlpha.value, 1);               
    
20.                     lastDrawGraphic.symbol=new SimpleFillSymbol("solid", this.fillColor.selectedColor, customAlpha.value, outline);        
    
21.                     this.drawtool.deactivate();
    
22.                     
    
23.                 }               
    
24.                 else
    
25.                 {               
    
26.                     switch (geom.type)
    
27.                     {
    
28.                         /*   case Geometry.MAPPOINT:
    
29.                         {
    
30.                             //文本标会就是对点的symbol进行了修改
    
31.                             if (txtLabel.text == "")
    
32.                                 return;
    
33.                             var text:String=txtLabel.text;
    
34.                             var color:uint=cpText.selectedColor;
    
35.                             var font:String=textFont.selectedItem.font;
    
36.                             var size:Number=numTextSize.value;
    
37.                             var textFormat:TextFormat=new TextFormat(font, size, color, bold.selected, italic.selected, underline.selected);                           
    
38.                             var textSymbol:TextSymbol=new TextSymbol(text);
    
39.                             textSymbol.textFormat=textFormat;                             
    
40.                             lastDrawGraphic.symbol=textSymbol;     
    
41.                             break;
    
42.                         
    
43.                         }   */
    
44.                         case Geometry.POLYLINE:
    
45.                         {
    
46.                             lastDrawGraphic.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, fillColor.selectedColor, customAlpha.value, 6);
    
47.                             if (chkMeasurements.selected)
    
48.                             {
    
49.                                 var param:ProjectParameters=new ProjectParameters();
    
50.                                 param.geometries=[geom];
    
51.                                 param.outSpatialReference=outSR;
    
52.                                 geometryService.project(param);
    
53.                                 var polyline:Polyline = geom as Polyline;
    
54.                                 measurePt = polyline.extent.center;
    
55.                             }
    
56.                             break;
    
57.                         }
    
58.                         case Geometry.POLYGON:
    
59.                         {
    
60.                            
    
61.                                 lastDrawGraphic.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, fillColor.selectedColor, customAlpha.value, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, outlineColor.selectedColor, 1, 2));
    
62.                                 if (chkMeasurements.selected)
    
63.                                 {
    
64.                                     var param:ProjectParameters=new ProjectParameters();
    
65.                                     param.geometries=[geom];
    
66.                                     param.outSpatialReference=outSR;
    
67.                                     geometryService.project(param);
    
68.                                     var polygon:Polygon = geom as Polygon;
    
69.                                     measurePt = polygon.extent.center;
    
70.                                 }
    
71.                                 break;
    
72.                            
    
73.                            
    
74.                         }
    
75.                         case Geometry.EXTENT:
    
76.                         {
    
77.                             lastDrawGraphic.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, fillColor.selectedColor, customAlpha.value, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, outlineColor.selectedColor, 1, 2));
    
78.                             if (chkMeasurements.selected)
    
79.                             {
    
80.                                 var param:ProjectParameters=new ProjectParameters();
    
81.                                 param.geometries=[geom];
    
82.                                 param.outSpatialReference=outSR;
    
83.                                 geometryService.project(param);
    
84.                                 var extent:Extent = geom as Extent;
    
85.                                 measurePt = extent.center;
    
86.                             }
    
87.                             break;
    
88.                         }
    
89.                     }
    
90.                 }
    
91.             
    
92.                 //添加删除要素监听事件
    
93.                 lastDrawGraphic.addEventListener(MouseEvent.CLICK, onGraphicClick);
    
94.                
    
95.                 graphicsLayer.add(lastDrawGraphic);                 
    
96.                 onePlanGraphics.addItem(lastDrawGraphic);
    
97.                 savePlanBtn.enabled=true;            
    
98.             
    
99.             }

复制代码

3.投影结果函数，计算周长和面积等信息

1. //使用GeometryService计算距离和面积等响应
   
2.             private function projectCompleteHandler(event:GeometryServiceEvent):void
   
3.             {
   
4.                 var geom:Geometry = (event.result as Array)[0];
   
5.                 var lengthsParameters:LengthsParameters = new LengthsParameters();
   
6.                 var areasAndLengthsParameters:AreasAndLengthsParameters = new AreasAndLengthsParameters();
   
7.                 switch (geom.type)
   
8.                 {
   
9.                     case Geometry.POLYLINE:
   
10.                     {
    
11.                         var pLine:Polyline = Polyline(geom);
    
12.                         lengthsParameters.geodesic = true;
    
13.                         lengthsParameters.polylines = [ pLine ];
    
14.                         geometryService.lengths(lengthsParameters);
    
15.                         break;
    
16.                     }
    
17.                     case Geometry.POLYGON:
    
18.                     {
    
19.                         var pGon:Polygon = Polygon(geom);
    
20.                         areasAndLengthsParameters.polygons = [ pGon ];
    
21.                         geometryService.areasAndLengths(areasAndLengthsParameters);
    
22.                         break;
    
23.                     }
    
24.                     case Geometry.EXTENT:
    
25.                     {
    
26.                         var extent:Extent = Extent(geom);
    
27.                         
    
28.                         // convert it to a polygon for measurment
    
29.                         const arrPoints:Array = [
    
30.                             new MapPoint(extent.xmin, extent.ymin),
    
31.                             new MapPoint(extent.xmin, extent.ymax),
    
32.                             new MapPoint(extent.xmax, extent.ymax),
    
33.                             new MapPoint(extent.xmax, extent.ymin),
    
34.                             new MapPoint(extent.xmin, extent.ymin)
    
35.                         ];
    
36.                         
    
37.                         var polygon:Polygon = new Polygon();
    
38.                         polygon.addRing(arrPoints);
    
39.                         polygon.spatialReference = extent.spatialReference;
    
40.                         
    
41.                         areasAndLengthsParameters.polygons = [ polygon ];
    
42.                         geometryService.areasAndLengths(areasAndLengthsParameters);
    
43.                         break;
    
44.                     }
    
45.                 }
    
46.             }
    
47.             
    
48.             private function arealengthsCompleteHandler(event:GeometryServiceEvent):void
    
49.             {
    
50.                 var area:Number = event.result.areas[0]; //event.arealengths.areas[0];
    
51.                 var length:Number = event.result.lengths[0]; // or (event.result as Array)[0]; //event.arealengths.lengths[0];
    
52.                
    
53.                 var label:String = "面积：" + numFormatter.format(area/1000000) + "平方千米";
    
54.                 label += "\n" + "周长：" + numFormatter.format(length/1000) + "千米";
    
55.                 addDrawLabel(label, lastDrawGraphic);
    
56.             }
    
57.             
    
58.             private function lengthsCompleteHandler(event:GeometryServiceEvent):void
    
59.             {
    
60.                 var length:Number = (event.result as Array)[0];
    
61.                
    
62.                 var label:String = "距离：" + numFormatter.format(length/1000) + "千米";
    
63.                 addDrawLabel(label, lastDrawGraphic);
    
64.             }

复制代码

GIS作品：百度搜索：GIS之家(https://shop116521643.taobao.com/shop/view_shop.htm);

QQ兴趣部落GIS技术交流：gis之家(http://buluo.qq.com/p/barindex.html?bid=327395);

GIS技术交流群：432512093