arcgis api for Flex画贝赛尔曲线
发布时间:2020-12-15 05:18:04 所属栏目:百科 来源:网络整理
导读:?? ? ? ? 最近在研究用arcgis api for Flex客户端动态画曲线的问题。虽然花了不少时间,最终等值线还是没有预期效果那样画在地图之上,但还是有不少收获。画等值线过程中,需要利用贝赛尔曲线函数来画平滑曲线。网上找了很多资料,都是在用flash环境中的curv
?? ? ? ? 最近在研究用arcgis api for Flex客户端动态画曲线的问题。虽然花了不少时间,最终等值线还是没有预期效果那样画在地图之上,但还是有不少收获。画等值线过程中,需要利用贝赛尔曲线函数来画平滑曲线。网上找了很多资料,都是在用flash环境中的curveTo()方法来画,但是好像这样画出来的曲线是不能在gis图层中显示的,即只能在flash.display.Graphics下的graphics才能使用这个方法,ags中的graphics是不是使用这个方法的。要么本人还没有找到转换方法,要么就根本不能用在gis图层。在网上找到了一篇关于在ags图层中画军标的文章,从这篇文件中得到启示。 先看效果 :<?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" minWidth="955" minHeight="600" creationComplete="init()" xmlns:esri="http://www.esri.com/2008/ags"> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ import com.esri.ags.Graphic; import com.esri.ags.SpatialReference; import com.esri.ags.geometry.MapPoint; import com.esri.ags.geometry.Polyline; import com.esri.ags.layers.GraphicsLayer; private var m_firstpoints:Array; private var graphicsLayer:GraphicsLayer; private var full_polyline:Graphic; private function init():void{ map.addEventListener(MouseEvent.CLICK,map_mouseClickHandler); map.addEventListener(MouseEvent.DOUBLE_CLICK,map_mouseDoubleClickHandler); graphicsLayer=new GraphicsLayer(); map.addLayer(graphicsLayer); } public function map_mouseClickHandler(event:MouseEvent):void { map.mapNavigationEnabled=false; //确定点击的地图点的坐标,然后放到数组中 var m_point:MapPoint=map.toMapFromStage(event.stageX,event.stageY); if (m_firstpoints == null) { m_firstpoints=new Array(); } m_firstpoints.push(m_point); } public function map_mouseDoubleClickHandler(event:MouseEvent):void{ var pg:Polyline=drawLine(m_firstpoints,100); full_polyline=new Graphic(pg); graphicsLayer.add(full_polyline); } private function drawLine(inputPoints:Array,mapWidth:Number):Polyline{ var points:Array=new Array(); for(var k:int=0;k<inputPoints.length;k++){ points.push(inputPoints[k]); if(k>0&&k<inputPoints.length-2){ var p:MapPoint=new MapPoint((inputPoints[k].x+inputPoints[k+1].x)/2,(inputPoints[k].y+inputPoints[k+1].y)/2,new SpatialReference(4326)); points.push(p); } } var curvepoints:Array=getzz_geometry(points,20); var dgbj_geometry:Array=getdbx_geometry(curvepoints,mapWidth,20); var full_gbjpolyline:Polyline=new Polyline(dgbj_geometry); return full_gbjpolyline; } /* 求中轴线上所有的点 */ private function getzz_geometry(inputPoints:Array,bzt:Number):Array { //首先定义中轴曲线的点坐标 var curvepoints:Array=new Array(); var i:int; var j:Number; var pos_x:Number; var pos_y:Number; var m_point:MapPoint; for ( i=0; i < inputPoints.length-2; i=i + 2) { for (j=0; j <= 1+0.00001; j=j + 1/bzt) { if (i != 0 && j == 0) continue; pos_x=Math.pow((1 - j),2) * inputPoints[i].x + 2 * j * (1 - j) * inputPoints[i + 1].x + Math.pow(j,2) * inputPoints[i + 2].x; pos_y=Math.pow((1 - j),2) * inputPoints[i].y + 2 * j * (1 - j) * inputPoints[i + 1].y + Math.pow(j,2) * inputPoints[i + 2].y; m_point=new MapPoint(pos_x,pos_y); //中轴线的点数 curvepoints.push(m_point); } } return curvepoints; } /* 获得曲线点组 */ private function getdbx_geometry(curvepoints:Array,mapWidth:Number,bzt:Number):Array { var bottomcurepoints:Array=new Array(); var c_length:Number=curvepoints.length; var dis:Number= mapWidth/20.0; var pos_x:Number; var pos_y:Number; var pre_pos_x:Number; var pre_pos_y:Number; var bb:Number; var slope:Number; var cos_number:Number; var sin_number:Number; var pre_point:MapPoint; var m_point:MapPoint; for (var u:Number=0; u < curvepoints.length; u++) { if (u == 0) { continue; } else { var bottom_pos_x:Number; var bottom_pos_y:Number; m_point=curvepoints[u]; pos_x=m_point.x; pos_y=m_point.y; pre_point=curvepoints[u - 1]; pre_pos_x=pre_point.x; pre_pos_y=pre_point.y; slope=(pos_y - pre_pos_y) / (pos_x - pre_pos_x); bb=dis * (1 - u / c_length * 0.9); cos_number=Math.cos(Math.atan(slope) - Math.PI / 2); sin_number=Math.sin(Math.atan(slope) - Math.PI / 2); if (pre_pos_x <= pos_x && pre_pos_y <= pos_y) { bottom_pos_x=pre_pos_x + ((bb * cos_number) < 0 ? (-bb * cos_number) : (bb * cos_number)); bottom_pos_y=pre_pos_y - ((bb * sin_number) < 0 ? (-bb * sin_number) : (bb * sin_number)); } else if (pre_pos_x <= pos_x && pre_pos_y > pos_y) { bottom_pos_x=pre_pos_x - ((bb * cos_number) < 0 ? (-bb * cos_number) : (bb * cos_number)); bottom_pos_y=pre_pos_y - ((bb * sin_number) < 0 ? (-bb * sin_number) : (bb * sin_number)); } else if (pre_pos_x >= pos_x && pre_pos_y >= pos_y) { bottom_pos_x=pre_pos_x - ((bb * cos_number) < 0 ? (-bb * cos_number) : (bb * cos_number)); bottom_pos_y=pre_pos_y + ((bb * sin_number) < 0 ? (-bb * sin_number) : (bb * sin_number)); } else if (pre_pos_x >= pos_x && pre_pos_y <= pos_y) { bottom_pos_x=pre_pos_x + ((bb * cos_number) < 0 ? (-bb * cos_number) : (bb * cos_number)); bottom_pos_y=pre_pos_y + ((bb * sin_number) < 0 ? (-bb * sin_number) : (bb * sin_number)); } var bottom_point:MapPoint=new MapPoint(bottom_pos_x,bottom_pos_y); bottomcurepoints.push(bottom_point); } } var rings:Array=new Array(); rings.push(bottomcurepoints); return rings; } ]]> </fx:Script> <s:BorderContainer width="100%" height="100%"> <esri:Map id="map"> <esri:ArcGISTiledMapServiceLayer id="layer" url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/> </esri:Map> </s:BorderContainer> </s:Application>这样就可以画出一条平滑的贝赛尔曲线了。这是直接利用贝赛尔曲线公式,而没有利用flash.display.Graphics.curveTo()方法,虽然简单了点,但效果还不错。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |