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

最新推荐文章于 2018-04-18 00:05:56 发布
置顶 最新推荐文章于 2018-04-18 00:05:56 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： Flex 文章标签： flex arggis 几何图形 距离 面积
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/musketeerl/article/details/22147993
版权

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

下面贴代码，其中图片部分自己替换，或者从我资源中有完整的代码  http://download.youkuaiyun.com/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>


ARCGIS viewer入门（4） 简单图查
yangtang_newton的专栏
12-03 1915
第一步：在config.xml中添加创建的widget；打开config.xml文件添加下面几行代码到标记块，你可以为创建的widget使用自己的图标，可以是40×40的一个png图像文件，或者gif、jpg文件。 widgetlabel = "My First Widget" icon   = " com/esri/solutions/flexviewer/assets/
地图几何计算
weixin_30733003的博客
12-03 230
百度地图JavaScript 开源库 类 BMapLib.GeoUtils 源文件:GeoUtils.js. http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbol...
arcgis api for flex 编辑功能
GIS让世界更美好
06-17 1798
xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:mx="library://ns.adobe.com/flex/mx"                xmlns:esri="http://www.esri.com/2008/ags"                pageTitle="Edit graphics
Flex布局（三：Flex计算规则）
JUSTIN的博客
04-18 7283
与弹性盒子计算相关的属性有： margin：外边距 flex-grow： 定义项目的放大比例，默认为0 flex-shrink： 定义项目的缩小比例，默认为1 flex-basis： 定义了在分配多余空间之前，项目占据的主轴空间（main size）。 flex： 是flex-grow, ...
用GeometryService 计算面积和长度时的投影转换
刘跃飞的专栏
04-29 2919
在用Silverlight开发ArcGis应用时，用到了计算面积与长度的功能！用ESRI发布的例子上面的Geometry Service地址，可以计算美国地区的长度和面积，但是不能计算其他地方的长度和面积！用自己发布的Geometry服务来计算长度和面积，中国地区的计算结果为0。检查代码发现，在设置geometryService.project([event.graphic], new Spati
Flex调用GP服务实现按划选范围切割地图（二）
GIS大奔
12-17 1797
具体代码实现： http://ns.adobe.com/mxml/2009”       xmlns:s=”library://ns.adobe.com/flex/spark”       xmlns:esri=”http://www.esri.com/2008/ags“       xmlns:mx=”library://ns.adobe.com/flex/mx”minWidt
Flex创建带有空间信息的椭圆(Polygon)
weixin_33843409的博客
01-11 124
运行环境：Flash Builder 4.0+Arcgis API for Flex Version 2.1类库 本来在ArcGIS Flex API中是不能直接画椭圆的polygon的，后来想到调用GP服务画椭圆，但是效率很低下，画一个椭圆要花个好几秒，最直接的办法就是自己创建 1privatefunctionCreateLocalEllpise(centerPoint...
js tooltip用于验证输入方法
写博客只为学习
04-11 254
var obj = $("#div_id") ;// div_id是对应input的id obj.tooltip({ position: 'right', showEvent: 'none', showDelay:0, hideDelay:0, content: "TTTest" }); obj.tooltip("sho
webservice的header详解
lulihong324的专栏
05-02 2582
该webservice是用java axis2做服务端，flex as3做客户端。 一、利用抓包工具抓的请求包如下： POST /axis2/services/ScService.ScServiceSOAP/ HTTP/1.1 Referer: app:/MultimediaDispatch.swf Accept: text/xml, application/xml, applicat
webservice方法没有参数
lulihong324的专栏
05-03 1676
在webservice中定义不需要参数的方法，服务端java+axis2，客户端flex as3. 一、wsdl 二、as3 ws = new WebService(); ws.wsdl = "http://192.168.2.172:8080/axis2/services/ScServ
Flex离线地图和在线谷歌地图实现<完整版>
lulihong324的专栏
03-19 1362
在前面文章“Flex离线地图和在线谷歌地图实现” 中粗略的实现了基于arggis的离线和在线加载谷歌地图。代码很多地方引用了内部的方法导致不能很好的运行，下面将呈现完整的实现 GoogleMapLayer代码 package cn.showclear.gis { import com.esri.ags.SpatialReference; import com.esri.ags.geomet
Flex4绘制扇形
lulihong324的专栏
04-25 1361
注意：参考了扇形菜单的算法( )
Flex离线地图和在线谷歌地图实现
lulihong324的专栏
03-18 1282
下面代码是使用arggis的免费库“agslib-3.4-2013-06-30.swc”开发的在线谷歌地图和离线地图类。 实现理论：在线模式是根据谷歌地图提供的文件服务调用地图资源；离线模式估计本地文件访问离线文件。 当然你也可以将离线文件发布在内网文件服务器直接调用，不需要存放本地。关键就是能根据level, row, col调用文件就行。 GoogleMapLayer代码如下： p
FLEX ArrayCollection删除过滤的数据
lulihong324的专栏
05-11 1139
一、问题： ArrayCollection添加过滤器后，部门数据不会被展现，当我删除未展现的数据时，调用removeItemAt（）是无法删除的。 二、原因： public function removeItemAt(index:int):Object { if (index = length) { var me
FLEX4 List代码触发选择
lulihong324的专栏
05-10 910
在Flex4中需要触发list的选择事件，代码如下: <s:List id="groupContainer" width="160" height="100%" itemRenderer="components.group.GroupItemRenderer" dataProvider="{Managers.getGroupManager().groups}" change="grou
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值