加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Flex等值线客户端动态标注

发布时间:2020-12-15 04:18:50 所属栏目:百科 来源:网络整理
导读:??? 在气象行业的等值线标注中可能会有这样的需求,在客户端对等值线进行标注,按照一点的间隔并且需要对文字做旋转角度的处理,那么在FLEX客户端应该做如何处理呢。 总体思路如下: LabelSymbol.as继承TextSymbol public class LabelSymbol extends TextSym

??? 在气象行业的等值线标注中可能会有这样的需求,在客户端对等值线进行标注,按照一点的间隔并且需要对文字做旋转角度的处理,那么在FLEX客户端应该做如何处理呢。

总体思路如下:

LabelSymbol.as继承TextSymbol

public class LabelSymbol extends TextSymbol
?{
??public function LabelSymbol(text:String=null,htmlText:String=null,color:uint=0,alpha:Number=1,border:Boolean=false,borderColor:uint=0,background:Boolean=false,backgroundColor:uint=16777215,placement:String="middle",angle:Number=0,xoffset:Number=0,yoffset:Number=0,textFormat:TextFormat=null,textAttribute:String=null,textFunction:Function=null)
??{
???super(text,htmlText,color,alpha,border,borderColor,background,backgroundColor,placement,angle,xoffset,yoffset,textFormat,textAttribute,textFunction);
??}
??private var _sText:String;

??public function get sText():String
??{
???return _sText;
???
??}

??public function set sText(value:String):void
??{
???_sText = value;
???this.text=value;
???
??}

??public function get TextRotation():Number
??{
???return _TextRotation;
??}

??public function set TextRotation(value:Number):void
??{
???_TextRotation = value;
???this.angle=value;
????
??}

??
??private var _TextRotation:Number;
??
?}

IsolineTextLabels.as线上标注点的获取以及文字角度的获取

package IDW
{
?import com.esri.ags.FeatureSet;
?import com.esri.ags.Graphic;
?import com.esri.ags.geometry.Extent;
?import com.esri.ags.geometry.MapPoint;
?import com.esri.ags.geometry.Polyline;
?
?import flash.text.TextFormat;

?public class IsolineTextLabels
?{
??public function IsolineTextLabels()
??{
??}
??private static var _wayBeforeText:Number = 0.1;

??public static function get wayBeforeText():Number
??{
???return _wayBeforeText;
??}

??public static function set wayBeforeText(value:Number):void
??{
???_wayBeforeText = value;
??}
??/**
?? * 返回两点距离
?? * @param x1
?? * @param y1
?? * @param x2
?? * @param y2
?? * @return
?? *
?? */
??public static function? GetDistance( x1:Number,y1:Number,x2:Number,y2:Number):Number
??{
???return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
??}
??/**
?? * 根据角度象限返回文本旋转角度
?? * @param x1
?? * @param y1
?? * @param x2
?? * @param y2
?? * @return
?? *
?? */
??public static function? GetTxtRotation(x1:Number,y2:Number):Number
??{
???var dx:Number = Math.abs(x2 - x1);
???var dy:Number = Math.abs(y2 - y1);
???var r:Number = (Math.atan2(dy,dx) * 180 / Math.PI);
???if (x1 <= x2 && y1 <= y2) //1
???{
????r = 360 - r;
???}
???else if (x1 >= x2 && y1 <= y2) //2
???{
????
???}
???else if (x1 >= x2 && y1 >= y2)//3
???{
????r = 360 - r;
???}
???else if (x1 <= x2 && y1 <= y2)//4
???{
????
???}
???return r;
??}
??public static function Annotate(lines:FeatureSet,? visible:Extent):Vector.<Graphic>
??{
???var res:Vector.<Graphic> = new Vector.<Graphic>();
???for each (var pc:Graphic in lines.features)
???{
????var way:Number = 0;
????var tem:Polyline=Polyline(pc.geometry);
????for each(var arr:Array in tem.paths)
????{
?????for (var i:int = 1; i <arr.length;i++)
?????{
??????var length:Number=GetDistance(arr[i-1].x,arr[i-1].y,arr[i].x,arr[i].y);
??????way =way+length;
??????if (way > visible.width * wayBeforeText)
??????{
???????way = 0;
???????var? _G:Graphic = new Graphic();
???????_G.geometry=arr[i];
???????var Symbol:LabelSymbol= new LabelSymbol();
???????Symbol.sText=(arr[i] as MapPoint).z.toFixed(2);
????????? var txtf:TextFormat=new TextFormat();
???????txtf.font="Arial";
???????txtf.size=10;
???????Symbol.textFormat=txtf;
???????Symbol.background=true;
???????Symbol.backgroundColor=0xffffff;
???????Symbol.TextRotation=GetTxtRotation(arr[i-1].x,arr[i].y)
???????_G.symbol=Symbol;
???????var obj:Object=new Object();
???????obj.Z=(arr[i] as MapPoint).z;
???????_G.attributes=obj;
???????res.push(_G);
??????}
?????}?
????}
????
???}
???
???return res;
??}
?}
}

IoslineSymbolGraphicsLayer继承GraphicsLayer用户最终展示

package IDW
{
?import com.esri.ags.FeatureSet;
?import com.esri.ags.Graphic;
?import com.esri.ags.events.ExtentEvent;
?import com.esri.ags.geometry.Polyline;
?import com.esri.ags.layers.GraphicsLayer;
?
?import mx.events.FlexEvent;
?import mx.formatters.DateFormatter;
?
?public class IoslineSymbolGraphicsLayer extends GraphicsLayer
?{
??public var SoureFeatureSet:FeatureSet;
??private? static var UpdateCount:uint=1;
??public function IoslineSymbolGraphicsLayer(fs:FeatureSet)
??{
???SoureFeatureSet=fs;
???super();
???this.addEventListener(FlexEvent.INITIALIZE,IsolineGraphicLayer_Initialized);
??}
??private function IsolineGraphicLayer_Initialized(event:FlexEvent):void
??{
???var df:DateFormatter=new DateFormatter();
???df.formatString="YYYY-MM-DD JJ:NN:SS:QQQ";
???
???trace("第一次开始"+df.format(new Date()));
???UpdateLabel();
???trace("第一次结束"+df.format(new Date()));
???this.map.addEventListener(ExtentEvent.EXTENT_CHANGE,Map_ExtentChanged);
??}
??private function Map_ExtentChanged(event:ExtentEvent):void
??{
???UpdateCount=UpdateCount+1;
???var df:DateFormatter=new DateFormatter();
???df.formatString="YYYY-MM-DD JJ:NN:SS:QQQ";
???trace("第"+UpdateCount+"次更新开始"+df.format(new Date()));
???UpdateLabel();
???trace("第"+UpdateCount+"次更新结束"+df.format(new Date()));
??}
??private function UpdateLabel():void
??{
???this.clear();
???var fs:FeatureSet=SoureFeatureSet;
???var labels:Vector.<Graphic> = IsolineTextLabels.Annotate(fs,this.map.extent);
???for each (var _G2:Graphic in labels)
???{
????this.add(_G2);
???}
??}
?}
}

FlexIosSymbol.mxml 测试客户端

<?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" xmlns:esri="http://www.esri.com/2008/ags" xmlns:IDW="IDW.*">
?<fx:Script>
??<![CDATA[
???import IDW.IoslineSymbolGraphicsLayer;
???
???import com.esri.ags.FeatureSet;
???import com.esri.ags.events.MapEvent;
???import com.esri.ags.geometry.MapPoint;
???
???import mx.collections.ArrayCollection;
???
???
???
???protected function button1_clickHandler(event:MouseEvent):void
???{
????// TODO Auto-generated method stub
????var fs:FeatureSet= new FeatureSet();
????var arr:Array=new Array();
????for (var i:int;i<flayer.graphicProvider.length;i++)
????{
?????arr.push(flayer.graphicProvider[i]);
????}
????fs.features=arr;
????var ioslayer:IoslineSymbolGraphicsLayer=new IoslineSymbolGraphicsLayer(fs);
????myMap.addLayer(ioslayer);
????
???}
???
??]]>
?</fx:Script>
?<fx:Declarations>
??<!-- 将非可视元素(例如服务、值对象)放在此处 -->
?</fx:Declarations>
?<s:Button? label="测试" click="button1_clickHandler(event)">
??
?</s:Button>
?<esri:Map id="myMap" top="30" >
??<esri:ArcGISDynamicMapServiceLayer url="http://localhost:6080/arcgis/rest/services/MyMap/MapServer">
???
??</esri:ArcGISDynamicMapServiceLayer>
??<esri:FeatureLayer id="flayer" url="http://localhost:6080/arcgis/rest/services/MyMap/MapServer/0">
???
??</esri:FeatureLayer>
??
?</esri:Map>
</s:Application>

最终测试效果如下:

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读