zl程序教程

您现在的位置是:首页 >  系统

当前栏目

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

模块系统API for 讲解 一张 ArcGIS flex
2023-09-11 14:19:51 时间

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