Flex地图几何图形操作和距离面积计算

下面展示了Flex地图的几何图形的操作，绘制、编辑、计算长度和面积。几何图形包含：点、直线、曲线、多边形、随意多边形、方形、圆。计算长度和面积调用的是arggis官方提供的在线免费计算资源，本地计算非常复杂，以后再解决！

下面贴代码，其中图片部分自己替换，或者从我资源中有完整的代码  http://download.csdn.net/detail/lulihong324/7099641

ArggisGeometryDemo：

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   xmlns:esri="http://www.esri.com/2008/ags"   xmlns:gis="cn.showclear.gis.*"   minWidth="1366" minHeight="768"><fx:Script><![CDATA[import com.esri.ags.Graphic;import com.esri.ags.SpatialReference;import com.esri.ags.events.DrawEvent;import com.esri.ags.events.GeometryServiceEvent;import com.esri.ags.events.MapEvent;import com.esri.ags.events.MapMouseEvent;import com.esri.ags.geometry.Extent;import com.esri.ags.geometry.Geometry;import com.esri.ags.geometry.MapPoint;import com.esri.ags.geometry.Polygon;import com.esri.ags.geometry.Polyline;import com.esri.ags.symbols.TextSymbol;import com.esri.ags.tasks.supportClasses.AreasAndLengthsParameters;import com.esri.ags.tasks.supportClasses.AreasAndLengthsResult;import com.esri.ags.tasks.supportClasses.LengthsParameters;import com.esri.ags.tasks.supportClasses.ProjectParameters;import com.esri.ags.utils.GeometryUtil;import com.esri.ags.utils.WebMercatorUtil;import mx.controls.Alert;import mx.events.ItemClickEvent;import mx.rpc.AsyncResponder;import mx.rpc.Fault;private var graphic:Graphic;private var lastEditGraphic:Graphic;private var lastActiveEditTypes:String;[Bindable]private var latestEndpoint:MapPoint;  private function maploadHandler(event:MapEvent):void {esriMap.centerAt(fmtMapPoint(120.1,30.2));  //设置中心点， 杭州西湖三塘映月岛esriMap.level = 12;//设置级别}/** * 将经纬度坐标转换为墨卡托坐标 */private static function fmtMapPoint(lng:Number, lat:Number) : MapPoint {return WebMercatorUtil.geographicToWebMercator(new MapPoint(lng, lat)) as MapPoint;}/** * 将 墨卡托坐标转化为经纬度坐标 * @param mercatorMP * @return  *  */public static function toGeographic(mercatorMP:MapPoint): MapPoint {return WebMercatorUtil.webMercatorToGeographic(mercatorMP) as MapPoint;}private function tbb_itemClickHandler(event:ItemClickEvent):void {if (tbb.selectedIndex < 0) {myDrawTool.deactivate();return;} switch (event.item.label) {case "MAPPOINT": myDrawTool.activate(DrawTool.MAPPOINT); break;case "POLYLINE": myDrawTool.activate(DrawTool.POLYLINE); break;case "FREEHAND_POLYLINE":myDrawTool.activate(DrawTool.FREEHAND_POLYLINE); break;case "POLYGON":myDrawTool.activate(DrawTool.POLYGON);break;case "FREEHAND_POLYGON":myDrawTool.activate(DrawTool.FREEHAND_POLYGON); break;case "EXTENT":myDrawTool.activate(DrawTool.EXTENT); break;case "CIRCLE":myDrawTool.activate(DrawTool.CIRCLE); break;case "ELLIPSE":myDrawTool.activate(DrawTool.ELLIPSE); break;default:;}}protected function drawTool_drawEndHandler(event:DrawEvent):void {myDrawTool.deactivate();tbb.selectedIndex = -1;var geometry:Geometry = event.graphic.geometry;if (geometry is MapPoint) {return;}if(geometry is Polygon)  {//多边形var polygon:Polygon = geometry as Polygon;                    if (GeometryUtil.polygonSelfIntersecting(polygon)) {                        geometryService.simplify([ polygon ]);                        } else   {                        projectPolygon(polygon);}                    } else if (geometry is Polyline)   {//线               var drawnLine:Polyline = Polyline(geometry);var lengthsParameters:LengthsParameters = new LengthsParameters();                    lengthsParameters.geodesic = true;                    lengthsParameters.polylines = [ drawnLine ];latestEndpoint = drawnLine.paths[0][0] as MapPoint;var arr:Array = drawnLine.paths;addPolylineToMap(drawnLine);geometryService.lengths(lengthsParameters);} else if (geometry is Extent)   { //方形var extent:Extent = geometry as Extent;var maxMP:MapPoint = new MapPoint(extent.xmax, extent.ymax, new SpatialReference(54034)); var minMP:MapPoint = new MapPoint(extent.xmin, extent.ymin, new SpatialReference(54034)); maxMP = toGeographic(maxMP);minMP = toGeographic(minMP);projectGeometry(extent.toPolygon());}  else {//其他projectGeometry(geometry);}}private function projectPolygon(polygon:Polygon):void {                var wkid:Number = esriMap.spatialReference.wkid;    polygon.spatialReference = new SpatialReference(54034);var projectParam:ProjectParameters = new ProjectParameters();  projectParam.geometries = [polygon];                  projectParam.outSpatialReference = esriMap.extent.spatialReference;geometryService.project(projectParam, new AsyncResponder(project_resultHandler, project_faultHandler, polygon));                }private function projectGeometry(geometry:Geometry):void {                var wkid:Number = esriMap.spatialReference.wkid;    geometry.spatialReference = new SpatialReference(54034);var projectParam:ProjectParameters = new ProjectParameters();  projectParam.geometries = [geometry];                  projectParam.outSpatialReference = esriMap.extent.spatialReference;geometryService.project(projectParam, new AsyncResponder(project_resultHandler, project_faultHandler, geometry));                }private function project_resultHandler(result:Object, token:Object = null):void  {                if (result)  {                    var polygon:Geometry = (result as Array)[0];      var areasAndLengthsParameters:AreasAndLengthsParameters = new AreasAndLengthsParameters();                    areasAndLengthsParameters.areaUnit = GeometryService.UNIT_SQUARE_KILOMETERS;         areasAndLengthsParameters.polygons = [ polygon ];geometryService.areasAndLengths(areasAndLengthsParameters, new AsyncResponder(areasAndLengths_resultHandler, areasAndLengths_faultHandler, token));                  }                }private function areasAndLengths_resultHandler(result:AreasAndLengthsResult, token:Object = null):void  {                var area:String ="";                if(result.areas[0]<1)  {                    var num:Number=result.areas[0]*1000000;                area=myNumberFormatter.format(num);                    geometryService.labelPoints([ token ], new AsyncResponder(labelPoints_resultHandler, labelPoints_faultHandler, area + " 平方米"));} else {                                   area=myNumberFormatter.format(result.areas[0]);                    geometryService.labelPoints([ token ], new AsyncResponder(labelPoints_resultHandler, labelPoints_faultHandler, area + " 平方公里"));                    }               }private function labelPoints_resultHandler(result:Object, token:Object = null):void     {                for each (var geom:Geometry in result)  {                    var g:Graphic = new Graphic();                    g.geometry = geom;                    g.symbol = new TextSymbol(String(token), null, 0, 1, true, 0xFF0000, true, 0xFFFFB9);graphicsLayer.add(g);                    }            }private function labelPoints_faultHandler(fault:Fault, token:Object = null):void  {                Alert.show(fault.faultString + "\n\n" + fault.faultDetail, "labelPoints Fault " + fault.faultCode);                }private function areasAndLengths_faultHandler(fault:Fault, token:Object = null):void  {                Alert.show(fault.faultString + "\n\n" + fault.faultDetail, "areasAndLengths Fault " + fault.faultCode);                }private function project_faultHandler(fault:Fault, token:Object = null):void  {                Alert.show(fault.faultString + "\n\n" + fault.faultDetail, "project Fault " + fault.faultCode);                }        private function addPolylineToMap(polyline:Polyline):void  {                var newGraphic:Graphic = new Graphic(polyline);                newGraphic.symbol=lineSymbol;                graphicsLayer.add(newGraphic);                }private function lengthsCompleteHandler(event:GeometryServiceEvent):void  {                // Report as meters if less than 3km, otherwise km                var dist:Number = (event.result as Array)[0];                var myAttributes:Object = {};                if (dist < 3000) {                    myAttributes.distance = Math.round(dist) + " 米";                    } else {                    myAttributes.distance = Number(dist / 1000).toFixed(1) + " 千米";                    }                //var g:Graphic = new Graphic(latestEndpoint, new TextSymbol(null, "text3", 0, true, 0, true));                var g:Graphic = new Graphic(latestEndpoint, myInfoSymbol, myAttributes);                graphicsLayer.add(g);                }private function geometryService_simplifyCompleteHandler(event:GeometryServiceEvent):void            {                // Note: GeometryService returns geometries instead of graphics as of Flex API 2.0                if (event.result)                    {                    var polygon:Polygon = (event.result as Array)[0]; // we only draw one area at a time                    projectPolygon(polygon);                    }                }private function mapMouseDownHandler(event:MapMouseEvent):void {event.currentTarget.addEventListener(MouseEvent.MOUSE_MOVE, mapMouseMoveHandler);event.currentTarget.addEventListener(MouseEvent.MOUSE_UP, mapMouseUpHandler);}private function mapMouseMoveHandler(event:MouseEvent):void {event.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, mapMouseMoveHandler);event.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, mapMouseUpHandler);}private function mapMouseUpHandler(event:MouseEvent):void {event.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, mapMouseMoveHandler);event.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, mapMouseUpHandler);if (event.target is Graphic || event.target.parent is Graphic){if (event.target is Graphic){graphic = Graphic(event.target);}else if (event.target.parent is Graphic) //check for PictureMarkerSymbol{graphic = Graphic(event.target.parent);}if (lastEditGraphic !== graphic){lastEditGraphic = graphic;lastActiveEditTypes = "moveRotateScale"; // make sure move and edit vertices is the 1st mode}if (graphic.geometry is Polyline || graphic.geometry is Polygon){if (lastActiveEditTypes == "moveEditVertices"){lastActiveEditTypes = "moveRotateScale";myEditTool.activate(EditTool.MOVE | EditTool.SCALE | EditTool.ROTATE, [ graphic ]);}else{lastActiveEditTypes = "moveEditVertices";myEditTool.activate(EditTool.MOVE | EditTool.EDIT_VERTICES, [ graphic ]);}}else if (graphic.geometry is Extent){myEditTool.activate(EditTool.MOVE | EditTool.SCALE, [ graphic ]);}else if (graphic.graphicsLayer == graphicsLayer){myEditTool.activate(EditTool.MOVE | EditTool.EDIT_VERTICES, [ graphic ]);}}else{myEditTool.deactivate();lastActiveEditTypes = "moveRotateScale"; // make sure move and edit vertices is the 1st mode}}]]></fx:Script><fx:Declarations><esri:GeometryService id="geometryService"                                showBusyCursor="false"                                concurrency="last"                                lengthsComplete="lengthsCompleteHandler(event)"                                simplifyComplete="geometryService_simplifyCompleteHandler(event)"                            url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"/><esri:SimpleLineSymbol id="lineSymbol"  width="2" color="#6E6F00"/><mx:NumberFormatter id="myNumberFormatter"  precision="2"  useThousandsSeparator="true"/><esri:InfoSymbol id="myInfoSymbol" containerStyleName="africaStyle">            <esri:infoRenderer>                <fx:Component>                    <s:DataRenderer>                    <s:Label paddingBottom="3"                                  paddingLeft="3"                                  paddingRight="3"                                  paddingTop="3"                                  color="0x00FF00"                                  text="长度： {data.distance}"/>                        </s:DataRenderer>                    </fx:Component>                </esri:infoRenderer>            </esri:InfoSymbol><!-- Symbol for all point shapes --><esri:SimpleMarkerSymbol id="sms" color="0x00FF00" size="12" style="square"/><!-- Symbol for all line shapes --><esri:SimpleLineSymbol id="sls" width="3" color="0x00FF00"/><!-- Symbol for all polygon shapes --><esri:SimpleFillSymbol id="sfs" color="0xFFFFFF" style="diagonalcross"><esri:outline><esri:SimpleLineSymbol width="2" color="0x00FF00"/></esri:outline></esri:SimpleFillSymbol><esri:DrawTool id="myDrawTool" drawEnd="drawTool_drawEndHandler(event)" fillSymbol="{sfs}"   graphicsLayer="{graphicsLayer}" lineSymbol="{sls}" map="{esriMap}"   markerSymbol="{sms}"/><esri:EditTool id="myEditTool" map="{esriMap}"/></fx:Declarations><s:VGroup width="100%" height="100%"><mx:ToggleButtonBar id="tbb" itemClick="tbb_itemClickHandler(event)" labelField="null"selectedIndex="-1" toggleOnClick="true"><fx:Object label="MAPPOINT" icon="@Embed(source='assets/i_draw_point.png')" toolTip="点"/><fx:Object label="POLYLINE" icon="@Embed(source='assets/i_draw_line.png')" toolTip="直线、折线"/><fx:Object label="FREEHAND_POLYLINE" icon="@Embed(source='assets/i_draw_freeline.png')" toolTip="曲线"/><fx:Object label="POLYGON" icon="@Embed(source='assets/i_draw_poly.png')" toolTip="多边形"/><fx:Object label="FREEHAND_POLYGON" icon="@Embed(source='assets/i_draw_freepoly.png')" toolTip="曲多边形"/><fx:Object label="EXTENT" icon="@Embed(source='assets/i_draw_rect.png')" toolTip="方形"/><fx:Object label="CIRCLE" icon="@Embed(source='assets/i_draw_circle.png')"  toolTip="圆"/><fx:Object label="ELLIPSE" icon="@Embed(source='assets/i_draw_ellipse.png')" toolTip="椭圆"/></mx:ToggleButtonBar><esri:Map id="esriMap" load="maploadHandler(event)" logoVisible="false"  mapMouseDown="mapMouseDownHandler(event)" openHandCursorVisible="false"  scaleBarVisible="true" zoomSliderVisible="false"><gis:GoogleMapLayer id="googleMapLayer" /><esri:GraphicsLayer id="graphicsLayer"></esri:GraphicsLayer></esri:Map></s:VGroup></s:Application>