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

config.xml文件的配置如下：

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

源代码目录如下：

界面效果：

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

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

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

</configuration>

NewPlotWidget.mxml：

简单的描述一下思路好了

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

            //集成后的标会响应函数
            private function activateDrawTool(event:MouseEvent):void
            {
                    this.drawToolbar.deactivate();
                    graphicsLayer.visible=true;
                    selectedDrawingIcon =BorderImage(event.currentTarget);
                    clearSelectionFilter();
                    selectedDrawingIcon.filters = [ glowFilter ];

                    finishDrawing = false;
                    showMeasurements = false;
                    drawType = selectedDrawingIcon.name;    

                    borVisibleChange(selectedDrawingIcon.id);

                    switch (drawType)
                    {

                        case DrawTool.POLYLINE:
                        {
                            addingPlot=false;
                            drawingPolygon = false;
                            drawingLine = true;
                            showMeasurements = true;

                            outlineColorId.visible=false;
                            outlineColor.visible=false;

                            drawStatus = drawLineLabel;

                            this.drawtool.deactivate();
                            setMapAction(drawType, drawStatus, lineSymbol, drawEnd);
                            break;
                        }
                        case DrawTool.FREEHAND_POLYLINE:
                        {
                            addingPlot=drawingPolygon =false;
                            drawingLine=showMeasurements = true;

                            outlineColorId.visible=false;
                            outlineColor.visible=false;                    

                            drawStatus = drawFreehandLineLabel;

                            this.drawtool.deactivate();
                            setMapAction(drawType, drawStatus, lineSymbol, drawEnd);
                            break;
                        }
                        case DrawTool.POLYGON:
                        {
                            addingPlot=    drawingLine = false;
                            drawingPolygon = showMeasurements = true;        

                            outlineColorId.visible=true;
                            outlineColor.visible=true;

                            drawStatus = drawPolygonLabel;

                            this.drawtool.deactivate();
                            setMapAction(drawType, drawStatus, fillSymbol, drawEnd);
                            break;
                        }
                        case DrawTool.EXTENT:
                        {
                            addingPlot=    drawingLine = false;
                            drawingPolygon = showMeasurements = true;        

                            outlineColorId.visible=true;
                            outlineColor.visible=true;

                            drawStatus = drawExtentLabel;

                            this.drawtool.deactivate();
                            setMapAction(drawType, drawStatus, fillSymbol, drawEnd);
                            break;
                        }
                        case DrawTool.CIRCLE:
                        {
                            addingPlot=    drawingLine = false;
                            drawingPolygon = showMeasurements = true;        

                            outlineColorId.visible=true;
                            outlineColor.visible=true;

                            drawStatus = drawCircleLabel;

                            this.drawtool.deactivate();
                            setMapAction(drawType, drawStatus, fillSymbol, drawEnd);
                            break;
                        }
                        case DrawTool.FREEHAND_POLYGON:
                        {
                            addingPlot= drawingLine = false;
                            drawingPolygon =showMeasurements = true;

                            outlineColorId.visible=true;
                            outlineColor.visible=true;

                            drawStatus = drawFreehandPolygonLabel;

                            this.drawtool.deactivate();
                            setMapAction(drawType, drawStatus, fillSymbol, drawEnd);
                            break;
                        }
                        case DrawTool.MAPPOINT:
                        {
                            this.addingPlot=drawingPolygon =drawingLine = showMeasurements = false;
                            this.addingText=true;
                            drawStatus = drawMapPointLabel;            

                            outlineColorId.visible=true;
                            outlineColor.visible=true;

                            this.drawtool.deactivate();
                            setMapAction(drawType,drawStatus,null,drawEnd);
                            break;
                        }
                        default:
                        {
                            //响应态势标会
                            drawingPolygon =drawingLine = showMeasurements = false;
                            this.addingPlot=true;    

                            outlineColorId.visible=true;
                            outlineColor.visible=true;

                            this.setMapAction(null,null,null,null);
                            var outline:SimpleLineSymbol=new SimpleLineSymbol("solid", this.outlineColor.selectedColor, this.customAlpha.value, 1);
                            drawtool.fillSymbol=new SimpleFillSymbol("solid", this.fillColor.selectedColor, customAlpha.value, outline);        

                            this.drawtool.activate(drawType);    

                        }

                    }

            }

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

            private function drawEnd(event:DrawEvent):void
            {

                finishDrawing = true;
                this.drawtool.deactivate();
                this.setMapAction(null,null,null,null);

                selectedDrawingIcon = null;
                clearSelectionFilter();
                event.target.deactivate();
                var outSR:SpatialReference = new SpatialReference(102113);
                var geom:Geometry = event.graphic.geometry;

                lastDrawGraphic = new Graphic(geom);            

                if(addingPlot==true)
                {

                    var outline:SimpleLineSymbol=new SimpleLineSymbol("solid", this.outlineColor.selectedColor, this.customAlpha.value, 1);
                    lastDrawGraphic.symbol=new SimpleFillSymbol("solid", this.fillColor.selectedColor, customAlpha.value, outline);
                    this.drawtool.deactivate();

                }
                else
                {
                    switch (geom.type)
                    {
                        /*   case Geometry.MAPPOINT:
                        {
                            //文本标会就是对点的symbol进行了修改
                            if (txtLabel.text == "")
                                return;
                            var text:String=txtLabel.text;
                            var color:uint=cpText.selectedColor;
                            var font:String=textFont.selectedItem.font;
                            var size:Number=numTextSize.value;
                            var textFormat:TextFormat=new TextFormat(font, size, color, bold.selected, italic.selected, underline.selected);
                            var textSymbol:TextSymbol=new TextSymbol(text);
                            textSymbol.textFormat=textFormat;
                            lastDrawGraphic.symbol=textSymbol;
                            break;

                        }   */
                        case Geometry.POLYLINE:
                        {
                            lastDrawGraphic.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, fillColor.selectedColor, customAlpha.value, 6);
                            if (chkMeasurements.selected)
                            {
                                var param:ProjectParameters=new ProjectParameters();
                                param.geometries=[geom];
                                param.outSpatialReference=outSR;
                                geometryService.project(param);
                                var polyline:Polyline = geom as Polyline;
                                measurePt = polyline.extent.center;
                            }
                            break;
                        }
                        case Geometry.POLYGON:
                        {

                                lastDrawGraphic.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, fillColor.selectedColor, customAlpha.value, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, outlineColor.selectedColor, 1, 2));
                                if (chkMeasurements.selected)
                                {
                                    var param:ProjectParameters=new ProjectParameters();
                                    param.geometries=[geom];
                                    param.outSpatialReference=outSR;
                                    geometryService.project(param);
                                    var polygon:Polygon = geom as Polygon;
                                    measurePt = polygon.extent.center;
                                }
                                break;

                        }
                        case Geometry.EXTENT:
                        {
                            lastDrawGraphic.symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, fillColor.selectedColor, customAlpha.value, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, outlineColor.selectedColor, 1, 2));
                            if (chkMeasurements.selected)
                            {
                                var param:ProjectParameters=new ProjectParameters();
                                param.geometries=[geom];
                                param.outSpatialReference=outSR;
                                geometryService.project(param);
                                var extent:Extent = geom as Extent;
                                measurePt = extent.center;
                            }
                            break;
                        }
                    }
                }

                //添加删除要素监听事件
                lastDrawGraphic.addEventListener(MouseEvent.CLICK, onGraphicClick);

                graphicsLayer.add(lastDrawGraphic);
                onePlanGraphics.addItem(lastDrawGraphic);
                savePlanBtn.enabled=true;            

            }    

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

            //使用GeometryService计算距离和面积等响应
            private function projectCompleteHandler(event:GeometryServiceEvent):void
            {
                var geom:Geometry = (event.result as Array)[0];
                var lengthsParameters:LengthsParameters = new LengthsParameters();
                var areasAndLengthsParameters:AreasAndLengthsParameters = new AreasAndLengthsParameters();
                switch (geom.type)
                {
                    case Geometry.POLYLINE:
                    {
                        var pLine:Polyline = Polyline(geom);
                        lengthsParameters.geodesic = true;
                        lengthsParameters.polylines = [ pLine ];
                        geometryService.lengths(lengthsParameters);
                        break;
                    }
                    case Geometry.POLYGON:
                    {
                        var pGon:Polygon = Polygon(geom);
                        areasAndLengthsParameters.polygons = [ pGon ];
                        geometryService.areasAndLengths(areasAndLengthsParameters);
                        break;
                    }
                    case Geometry.EXTENT:
                    {
                        var extent:Extent = Extent(geom);

                        // convert it to a polygon for measurment
                        const arrPoints:Array = [
                            new MapPoint(extent.xmin, extent.ymin),
                            new MapPoint(extent.xmin, extent.ymax),
                            new MapPoint(extent.xmax, extent.ymax),
                            new MapPoint(extent.xmax, extent.ymin),
                            new MapPoint(extent.xmin, extent.ymin)
                        ];

                        var polygon:Polygon = new Polygon();
                        polygon.addRing(arrPoints);
                        polygon.spatialReference = extent.spatialReference;

                        areasAndLengthsParameters.polygons = [ polygon ];
                        geometryService.areasAndLengths(areasAndLengthsParameters);
                        break;
                    }
                }
            }

            private function arealengthsCompleteHandler(event:GeometryServiceEvent):void
            {
                var area:Number = event.result.areas[0]; //event.arealengths.areas[0];
                var length:Number = event.result.lengths[0]; // or (event.result as Array)[0]; //event.arealengths.lengths[0];

                var label:String = "面积：" + numFormatter.format(area/1000000) + "平方千米";
                label += "\n" + "周长：" + numFormatter.format(length/1000) + "千米";
                addDrawLabel(label, lastDrawGraphic);
            }

            private function lengthsCompleteHandler(event:GeometryServiceEvent):void
            {
                var length:Number = (event.result as Array)[0];

                var label:String = "距离：" + numFormatter.format(length/1000) + "千米";
                addDrawLabel(label, lastDrawGraphic);
            }
            

备注：

GIS技术交流QQ群：432512093

WebGIS二次开发培训入门群： 238339408