南沙政府应急系统之GIS一张图（arcgis api for flex）讲解（十三）台风模块

sinna

config.xml文件的配置如下：

1. <widget label="台风"  icon="assets/images/typhoon.png" config=""  url="widgets/ActualWeather/TyphoonWarningWidget.swf"/>

复制代码

源代码目录如下：

界面效果：

大概的思路如下：从后台数据库获取台风的信息列表，展示在界面的表格里面；点击某条台风选项时候，会动态的在地图上展示台风的轨迹信息出来，点击某个时刻的台风轨迹时候，会弹出该时刻的台风详情气泡窗口来展示；

具体的技术：利用arcgis api的Geometry（Point、Polyline）、Graphic、infowindow等等，就是把台风点轨迹连成线，然后把点和线描绘出来展示在地图上。

TyphoonWarningWidget.mxml:

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
   
3.                    xmlns:s="library://ns.adobe.com/flex/spark"
   
4.                    xmlns:mx="library://ns.adobe.com/flex/mx"
   
5.                    xmlns:esri="http://www.esri.com/2008/ags"
   
6.                    xmlns:viewer="com.esri.viewer.*"
   
7.                    creationComplete="init()"
   
8.                    width="340" height="440"
   
9.                    >
   
10.     <fx:Declarations>
    
11.     </fx:Declarations>
    
12.     <fx:Script>
    
13.         <![CDATA[
    
14.             import com.esri.ags.Graphic;
    
15.             import com.esri.ags.SpatialReference;
    
16.             import com.esri.ags.geometry.Geometry;
    
17.             import com.esri.ags.geometry.MapPoint;
    
18.             import com.esri.ags.geometry.Polyline;
    
19.             import com.esri.ags.layers.GraphicsLayer;
    
20.             import com.esri.ags.symbols.PictureMarkerSymbol;
    
21.             import com.esri.ags.symbols.SimpleLineSymbol;
    
22.             import com.esri.ags.symbols.SimpleMarkerSymbol;
    
23.             import com.esri.ags.symbols.Symbol;
    
24.             import com.esri.ags.symbols.TextSymbol;
    
25.             import flash.globalization.NumberFormatter;
    
26.             import flash.utils.clearInterval;
    
27.             import flashx.textLayout.elements.BreakElement;
    
28.             import mx.collections.ArrayCollection;
    
29.             import mx.controls.Alert;
    
30.             import mx.controls.Text;
    
31.             import mx.core.FlexGlobals;
    
32.             import mx.events.CloseEvent;
    
33.             import mx.events.ListEvent;
    
34.             import mx.events.SliderEvent;
    
35.             import mx.formatters.Formatter;
    
36.             import mx.managers.PopUpManager;
    
37.             import spark.events.DropDownEvent;
    
38.             import spark.events.IndexChangeEvent;
    
39.             import spark.events.TitleWindowBoundsEvent;
    
40.             //台风10年年份集合
    
41.             private    var dt:Date = new Date();
    
42.             private    var yearnow:String=dt.fullYear.toString();
    
43.             private    var yearReduceOne:int=dt.fullYear-1;
    
44.             private    var yearReduceTwo:int=dt.fullYear-2;
    
45.             private    var yearReduceThree:int=dt.fullYear-3;
    
46.             private    var yearReduceFour:int=dt.fullYear-4;
    
47.             private    var yearReduceFive:int=dt.fullYear-5;
    
48.             private    var yearReduceSix:int=dt.fullYear-6;
    
49.             private    var yearReduceSeven:int=dt.fullYear-7;
    
50.             private    var yearReduceEight:int=dt.fullYear-8;
    
51.             private    var yearReduceNine:int=dt.fullYear-9;
    
52.             /**
    
53.              *@autor:hanhh
    
54.              *@function: 台风功能
    
55.              *@date:2015/3/8
    
56.             */
    
57.             [Bindable]
    
58.             private var tfData:ArrayCollection=new ArrayCollection
    
59.                 ([
    
60.                     {formatTF_TIME :"2015-1-18 2时",tfLongitude:"113.92020120006099",tfLatitude:"22.58297969742287",tfFs :"18",tfQy:"998"},
    
61.                     {formatTF_TIME :"2015-1-18 3时",tfLongitude:"113.90973157163533",tfLatitude:"22.57488953000305",tfFs :"18",tfQy:"998"},
    
62.                     {formatTF_TIME :"2015-1-18 4时",tfLongitude:"113.88974409918636",tfLatitude:"22.572510068997218",tfFs :"18",tfQy:"998"},
    
63.                     {formatTF_TIME :"2015-1-18 6时",tfLongitude:"113.87023251893855",tfLatitude:"22.573937745600716",tfFs :"18",tfQy:"998"},
    
64.                     {formatTF_TIME :"2015-1-18 8时",tfLongitude:"113.84831768307485",tfLatitude:"22.57822077541121",tfFs :"18",tfQy:"998"},
    
65.                     {formatTF_TIME :"2015-1-18 12时",tfLongitude:"113.81357755238973",tfLatitude:"22.588214511635698",tfFs :"18",tfQy:"998"},
    
66.                     {formatTF_TIME :"2015-1-18 14时",tfLongitude:"113.79075852134382",tfLatitude:"22.599635924463684",tfFs :"18",tfQy:"998"},
    
67.                     {formatTF_TIME :"2015-1-18 16时",tfLongitude:"113.77315050990067",tfLatitude:"22.60867787628584",tfFs :"18",tfQy:"998"},
    
68.                     {formatTF_TIME :"2015-1-18 18时",tfLongitude:"113.7488800076412",tfLatitude:"22.620099289113824",tfFs :"18",tfQy:"998"},
    
69.                     {formatTF_TIME :"2015-1-18 20时",tfLongitude:"113.73317556500272",tfLatitude:"22.63009302533831",tfFs :"18",tfQy:"998"},
    
70.                     {formatTF_TIME :"2015-1-18 21时",tfLongitude:"113.72268214196701",tfLatitude:"22.631996594142976",tfFs :"18",tfQy:"998"},
    
71.                     {formatTF_TIME :"2015-1-18 23时",tfLongitude:"113.70367024853043",tfLatitude:"22.63247248634414",tfFs :"18",tfQy:"998"}
    
72.                 ]);
    
73.             private var tfDataNew:ArrayCollection=new ArrayCollection
    
74.                 ([
    
75.                     {formatTF_TIME :"2015-1-18 4时",tfLongitude:"113.78552370713099",tfLatitude:"22.54586010573192",tfFs :"18",tfQy:"998"},
    
76.                     {formatTF_TIME :"2015-1-18 6时",tfLongitude:"113.77695764751",tfLatitude:"22.537769938312096",tfFs :"18",tfQy:"998"},
    
77.                     {formatTF_TIME :"2015-1-18 7时",tfLongitude:"113.76172909707269",tfLatitude:"22.53253512409927",tfFs :"18",tfQy:"998"},
    
78.                     {formatTF_TIME :"2015-1-18 9时",tfLongitude:"113.74647675202532",tfLatitude:"22.5349145851051",tfFs :"18",tfQy:"998"},
    
79.                     {formatTF_TIME :"2015-1-18 11时",tfLongitude:"113.74221751682488",tfLatitude:"22.543956536927254",tfFs :"18",tfQy:"998"},
    
80.                     {formatTF_TIME :"2015-1-18 13时",tfLongitude:"113.74124193781248",tfLatitude:"22.561088656169233",tfFs :"18",tfQy:"998"},
    
81.                     {formatTF_TIME :"2015-1-18 15时",tfLongitude:"113.7526395560304",tfLatitude:"22.57584131440538",tfFs :"18",tfQy:"998"},
    
82.                     {formatTF_TIME :"2015-1-18 17时",tfLongitude:"113.7445969778307",tfLatitude:"22.60249127767068",tfFs :"18",tfQy:"998"},
    
83.                     {formatTF_TIME :"2015-1-18 19时",tfLongitude:"113.70697769932852",tfLatitude:"22.60725019968234",tfFs :"18",tfQy:"998"},
    
84.                     {formatTF_TIME :"2015-1-18 21时",tfLongitude:"113.66655065683946",tfLatitude:"22.601539493268348",tfFs :"18",tfQy:"998"},
    
85.                     {formatTF_TIME :"2015-1-18 23时",tfLongitude:"113.62800338854501",tfLatitude:"22.576793098807713",tfFs :"18",tfQy:"998"}
    
86.                 ]);
    
87.             [Bindable]
    
88.             // 是否播放了.0:未播放，1：播放了。以播放情况下才可以通过列表关联到气泡
    
89.             private var isPlay:Number = 0;
    
90.             // 判断是不是播放到最后一点
    
91.             public var isPlayEndPoint:Boolean = false;
    
92.             // 判断台风是否在播放中
    
93.             public var isPlaying:Boolean = false;
    
94.             // 保存单击双击事件的状态
    
95.             public var tfxxTitle :String=null;
    
96.             
    
97.             //保存台风的中文名以便导出时使用
    
98.             public var tfZWName:String=null;
    
99.             // 保存单击双击事件的状态
    
100.             private var interval :Number= 0;
     
101.             private var tfInfoLayer:GraphicsLayer;//显示台风信息
     
102.             private var showTfNameIndex:String="";
     
103.             [Bindable]
     
104.             private var tfHistoryList:ArrayCollection=new ArrayCollection
     
105.                 ([
     
106.                     {id:"201501",happenTime:"2015-1-18",tfZhName:"",tfName :"MEaKKHLA",tfqd:"台风"},
     
107.                     {id:"201502",happenTime:"2015-2-18",tfZhName:"",tfName :"HIGOS",tfqd:"强台风"}
     
108.                 ]);
     
109.             private var typhoonSpeed:Number=0;
     
110.             /**
     
111.              * 初始化页面
     
112.              * @autor:hanhh
     
113.              */
     
114.             public function init():void{
     
115.                 this.isResizeable = false;
     
116.                 //取得当年台风列表
     
117.                 var tfHappendTime:String;
     
118.                 tfHappendTime=tfYear_DropDownList.selectedItem.tfHappendTime;
     
119.                 //add by gwli
     
120.                 graphicsLayer=new GraphicsLayer();            
     
121.                 map.addLayer(graphicsLayer);
     
122.                
     
123.                 //add hanhh
     
124.                 tfInfoLayer=new GraphicsLayer()
     
125.                 map.addLayer(tfInfoLayer);
     
126.             }
     
127.             /**
     
128.              * 播放、停止
     
129.              * @autor:hanhh
     
130.              */
     
131.             public function button1_clickHandler(event:MouseEvent):void {
     
132.                     graphicsLayer.clear();
     
133.                     points =new Array();
     
134.                 //再次播放时定位到最上面
     
135.                 if(tfData.length>10){
     
136.                     this.dataGrid.selectedIndex = 0;
     
137.                     this.dataGrid.verticalScrollPosition=dataGrid.selectedIndex;
     
138.                 }               
     
139.                 isPlaying = true;
     
140.                 isPlay = 0;
     
141.                 this.backButton.enabled = false;
     
142.                 this.playbutton.enabled = false;
     
143.                 recor=0;
     
144.                 intervaltime = setInterval(drawTrace, typhoonSpeed,tfData); //播放速度关联
     
145.             }
     
146.             private var points:Array;//保存表格数据集的经纬度点集合
     
147.             private var polyline:Polyline;//线定义
     
148.             private var lastDrawGraphic:Graphic; //保存绘制线graphic
     
149.             private var GraphicMarker:Graphic;//保存绘制点轨迹graphic
     
150.             private var GraphicPicture:Graphic;//保存图片picturegraphic
     
151.             [Bindable]
     
152.             private var graphicsLayer:GraphicsLayer;//显示绘制图的layer   
     
153.             
     
154.             
     
155.             //private var picgraphicsLayer:GraphicsLayer;//显示swf图标的layer   
     
156.             //定时器            
     
157.             private var intervaltime:uint;
     
158.             private var recor:int=0;//用来判断是否结束时间间隔函数的标识
     
159.             /**
     
160.              * 绘制轨迹函数
     
161.              * data,表格数据集,含有经纬度信息,用来描绘用的
     
162.              */
     
163.             public function drawTrace(data:ArrayCollection):void{
     
164.                 //判断是否删除台风动态swf图标，保证地图上只显示一个
     
165.                 if(GraphicPicture!=null && recor<data.length){
     
166.                     graphicsLayer.remove(GraphicPicture);
     
167.                 }
     
168.                 polyline = new Polyline();
     
169.                 lastDrawGraphic = new Graphic();
     
170.                 GraphicMarker = new Graphic();
     
171.                 GraphicPicture = new Graphic();
     
172.                 lastDrawGraphic.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 0xDD2222, 0.8, 2);//设置线符号
     
173.                 GraphicMarker.symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 13, 0x0033DD);//设置点符号
     
174.                 GraphicPicture.symbol = pic;
     
175.                 if(recor<data.length){
     
176.                     this.dataGrid.selectedIndex = recor;//实现轨迹点和datagrid的联动效果
     
177.                     // 【台风改造】当台风的定位信息只有一页时，点击播放按钮，播放完毕后，整个数据会上移，而没有滚动条  
     
178.                     // 当前选择行居中
     
179.                     if(recor>9){
     
180.                         this.dataGrid.verticalScrollPosition=dataGrid.selectedIndex-3;
     
181.                     }
     
182.                     var mp:MapPoint = new MapPoint(Number(data.getItemAt(recor).tfLongitude),Number(data.getItemAt(recor).tfLatitude),map.spatialReference);//获取经纬度信息, 转换为点                    
     
183.                     GraphicMarker.geometry = mp;
     
184.                     GraphicMarker.attributes = { tfLongitude: data.getItemAt(recor).tfLongitude,tfLatitude: data.getItemAt(recor).tfLatitude,formatTF_TIME: data.getItemAt(recor).formatTF_TIME,tfFs: data.getItemAt(recor).tfFs, tfQy: data.getItemAt(recor).tfQy };//台风时间,风速,气压
     
185.                     GraphicPicture.geometry =mp;
     
186.                     points.push(mp);
     
187.                     polyline.addPath(points);
     
188.                     lastDrawGraphic.geometry = polyline;
     
189.                     //GraphicMarker.addEventListener(MouseEvent.CLICK, onGraphicClick);//添加点单击graphic的监控事件
     
190.                     GraphicMarker.addEventListener(MouseEvent.MOUSE_OVER, onGraphicMouseOver);//添加鼠标overgraphic的监控事件
     
191.                     GraphicMarker.addEventListener(MouseEvent.MOUSE_OUT, onGraphicMouseOut);//添加鼠标outgraphic的监控事件
     
192.                     graphicsLayer.add(lastDrawGraphic);//添加线
     
193.                     graphicsLayer.add(GraphicPicture);//添加swf台风图标
     
194.                     graphicsLayer.add(GraphicMarker);//添加点
     
195.                     if(points.length>1)
     
196.                         map.zoomTo(polyline);
     
197.                     else
     
198.                         map.zoomTo(mp);
     
199.                 }
     
200.                 else{
     
201.                     if(intervaltime){
     
202.                         clearInterval(intervaltime);
     
203.                     }
     
204.                     this.backButton.enabled = true;
     
205.                     this.playbutton.enabled = true;
     
206.                 }
     
207.                 recor++;
     
208.             }
     
209.             /**
     
210.              * graphic mouseover事件
     
211.              * 获取各个时刻的点轨迹详细信息
     
212.              * 气泡弹出框来显示详细的信息
     
213.              */
     
214.             private function onGraphicMouseOver(event:MouseEvent):void
     
215.             {
     
216.                 var graphic:Graphic=event.currentTarget as Graphic;
     
217.                 //Alert.show("经纬度:"+graphic.attributes.tfLongitude+","+graphic.attributes.tfLatitude+"\n"+"台风时间:"+graphic.attributes.formatTF_TIME+"\n"+"风速:"+graphic.attributes.tfFs+"\n"+"气压:"+graphic.attributes.tfQy);
     
218.                 var text:Text = new Text();
     
219.                 text.text="经纬度:"+graphic.attributes.tfLongitude+","+graphic.attributes.tfLatitude+"\n"+"台风时间:"+graphic.attributes.formatTF_TIME+"\n"+"风速:"+graphic.attributes.tfFs+"\n"+"气压:"+graphic.attributes.tfQy;
     
220.                 map.infoWindow.content =text;
     
221.                 map.infoWindow.closeButtonVisible=true;
     
222.                 map.infoWindow.show(graphic.geometry as MapPoint);
     
223.             }
     
224.             /**
     
225.              * graphic mouseout事件
     
226.              * 获取各个时刻的点轨迹详细信息
     
227.              * 气泡弹出框来显示详细的信息
     
228.              */
     
229.             private function onGraphicMouseOut(event:MouseEvent):void
     
230.             {
     
231.                 map.infoWindow.hide();
     
232.             }
     
233.             /**
     
234.              * 改变播放速度
     
235.              * @autor:hanhh
     
236.              */
     
237.             private function changeSpend(event:SliderEvent):void{
     
238.                 // 修改播放速度，在右端播放速度快
     
239.                 typhoonSpeed =(0.5-Number(this.timeSelect.value))*1000;
     
240.             }
     
241.             /**
     
242.              *在年份下拉列表选择某一年取得台风列表
     
243.              * @autor:hanhh
     
244.              */
     
245.             protected function dropDownYearList_closeHandler(event:DropDownEvent):void{
     
246.                 //取得选取台风发生年份
     
247.                 var tfHappendTime:String=tfYear_DropDownList.selectedItem.tfHappendTime;
     
248.             }
     
249.             /**
     
250.              * @autor:hanhh
     
251.              *单击台风列表取得台风的详细信息
     
252.              */
     
253.             private function tfitemClick(event:ListEvent):void{
     
254.                 tfInfoLayer.clear();
     
255.                 this.playbutton.enabled = true;
     
256.                 this.backButton.enabled = true;
     
257.                 isPlay = 0;
     
258.                 this.playbutton.enabled = true;
     
259.                 // 修改播放速度，在右端播放速度快
     
260.                 typhoonSpeed =Number(this.timeSelect.value)*1000;
     
261.                 //得到选择项目的objec
     
262.                 var selectedObj:*=this.tfDataGrid.selectedItem as Object;
     
263.                 //如果有数据则弹出详细台风数据窗口
     
264.                 if(selectedObj.tfZhName!="没有台风数据"){
     
265.                     this.title.text=selectedObj.tfZhName+"("+selectedObj.tfName+")定位信息";
     
266.                     this.tfDetail.visible=true;
     
267.                     this.backButton.visible = true;
     
268.                     this.tf.visible=false;
     
269.                     this.playbutton.visible = true;
     
270.                     tfxxTitle =selectedObj.tfZhName+"("+selectedObj.tfName+")";
     
271.                     tfZWName=selectedObj.tfZhName;
     
272.                     tfData=null;
     
273.                     tfData =tfDataNew;
     
274.                 }
     
275.                
     
276.                      showTfNameIndex = "";
     
277.                     showTfNameIndex +=  selectedObj.happenTime.substring(0,4)+"年第"+String(selectedObj.id).substr(2,selectedObj.id.length)+"号台风 "+selectedObj.tfZhName+"("+selectedObj.tfName+")\n";
     
278.                     var textSymbol:TextSymbol=new TextSymbol(showTfNameIndex);
     
279.                     this.left= Capabilities.screenResolutionX/7-this.width/7;
     
280.                     this.top=Capabilities.screenResolutionY/7;
     
281.                     var point:MapPoint=map.toMapFromStage(Number(this.left),Number(this.top));
     
282.                     var graphic:Graphic=new Graphic(point);
     
283.                     var textFormat:TextFormat=new TextFormat("Arial", 16, 0xe10601, true);
     
284.                     textSymbol.textFormat=textFormat;
     
285.                     graphic.symbol=textSymbol;
     
286.                     tfInfoLayer.add(graphic);
     
287.             }
     
288.             /**
     
289.              * 风列表修改  
     
290.              * @autor:hanhh
     
291.              * */
     
292.             public function openTfInfo(event:Event):void{
     
293.                 this.tfDetail.visible=false;
     
294.                 this.backButton.visible = false;
     
295.                 this.title.text="台风列表";
     
296.                 this.tf.visible=true;               
     
297.             }
     
298.             //台风年份数据绑定
     
299.             [Bindable]
     
300.             private var arrYear:ArrayCollection=new ArrayCollection
     
301.                 ([
     
302.                     {tfHappendTime:yearnow},{tfHappendTime:yearReduceOne},{tfHappendTime:yearReduceTwo},{tfHappendTime:yearReduceThree},{tfHappendTime:yearReduceFour},
     
303.                     {tfHappendTime:yearReduceFive},{tfHappendTime:yearReduceSix},{tfHappendTime:yearReduceSeven},{tfHappendTime:yearReduceEight},{tfHappendTime:yearReduceNine}
     
304.                 ]);
     
305.             /**
     
306.              * 关闭事件
     
307.              * @autor:hanhh
     
308.              * */
     
309.             private function widgetClosedHandler(event:Event):void
     
310.             {
     
311.                 graphicsLayer.clear();
     
312.                 tfInfoLayer.clear();
     
313.             }   
     
314.             
     
315.         ]]>
     
316.     </fx:Script>
     
317.     <fx:Declarations>
     
318.         <esri:PictureMarkerSymbol id="pic" source="@Embed(source='assets/images/tf.swf')"/>
     
319.     </fx:Declarations>
     
320.     <viewer:WidgetTemplate id="wTemplate" width="100%" height="100%"  closed="widgetClosedHandler(event)">
     
321.         <s:Label text="台风列表" id="title" height="20" paddingTop="5" paddingLeft="5"/>
     
322.         <mx:LinkButton height="20" width="20" id="backButton" click="openTfInfo(event)" icon="@Embed('widgets/ActualWeather/images/BACK.png')" visible="false" right="5"/>
     
323.         <s:VGroup  id="tf" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="25" gap="5" horizontalAlign="center" width="98%" height="100%" visible="true" >
     
324.             <s:HGroup verticalAlign="middle" width="100%">
     
325.                 <!--根据年份选择台风下拉列表-->
     
326.                 <s:Label text="选择查看的台风年份:" width="60%" fontFamily="宋体"/>
     
327.                 <s:DropDownList id="tfYear_DropDownList" dataProvider="{arrYear}" labelField="tfHappendTime"  close="dropDownYearList_closeHandler(event)" prompt="请选择台风年份" selectedIndex="0" width="40%"></s:DropDownList>   
     
328.             </s:HGroup>
     
329.             <mx:DataGrid id="tfDataGrid" itemClick="tfitemClick(event)" doubleClickEnabled="true" width="100%" rowCount="12" dataProvider="{tfHistoryList}">
     
330.                 <mx:columns >
     
331.                     <mx:DataGridColumn headerText="台风编号"  minWidth="50" dataField="id"/>
     
332.                     <mx:DataGridColumn headerText="台风名" minWidth="70" dataField="tfZhName" />
     
333.                     <mx:DataGridColumn headerText="强度" minWidth="90" dataField="tfqd" />
     
334.                 </mx:columns>
     
335.             </mx:DataGrid>
     
336.         </s:VGroup>
     
337.         <s:VGroup  paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="25" gap="5" horizontalAlign="center"  id="tfDetail" visible="false" width="98%">
     
338.             <s:HGroup width="100%">
     
339.                 <mx:DataGrid dataProvider="{tfData}" id="dataGrid" horizontalScrollPolicy="auto" verticalScrollPolicy="auto" rowCount="11"  width="100%" >
     
340.                     <mx:columns>
     
341.                         <mx:DataGridColumn textAlign="center" headerText="台风时间" width="80" dataField="formatTF_TIME"/>
     
342.                         <mx:DataGridColumn textAlign="center"  headerText="经度(°)" width="50" dataField="tfLongitude"/>
     
343.                         <mx:DataGridColumn textAlign="center"  headerText="纬度(°)" width="50" dataField="tfLatitude"/>
     
344.                         <mx:DataGridColumn textAlign="center"  headerText="风速(m/s)" dataField="tfFs" width="50"/>
     
345.                         <mx:DataGridColumn textAlign="center"  headerText="气压(Pa)" dataField="tfQy" width="50"/>
     
346.                     </mx:columns>
     
347.                 </mx:DataGrid>
     
348.             </s:HGroup>
     
349.             <s:HGroup width="100%" paddingTop="5">
     
350.                 <mx:HRule width="100%" strokeWidth="2" alpha="0.5"  id="qx" />
     
351.             </s:HGroup>
     
352.             <s:HGroup width="100%" verticalAlign="middle" paddingBottom="0" >
     
353.                 <s:Label text="播放速度："/>
     
354.                 <mx:HSlider minimum="0.1" maximum="0.4" value="0.4" dataTipPlacement="top" change="changeSpend(event)"
     
355.                             tickColor="black"
     
356.                             snapInterval="0.1" tickInterval="0.1"
     
357.                             allowTrackClick="true"
     
358.                             liveDragging="true" id="timeSelect"
     
359.                             />
     
360.                 <s:Button id="playbutton" label="播放"  width="60"  click="button1_clickHandler(event)"/>
     
361.             </s:HGroup>
     
362.         </s:VGroup>
     
363.     </viewer:WidgetTemplate>
     
364. </viewer:BaseWidget>

复制代码

GIS作品：百度搜索：GIS之家(https://shop116521643.taobao.com/shop/view_shop.htm);

QQ兴趣部落GIS技术交流：gis之家(http://buluo.qq.com/p/barindex.html?bid=327395);

GIS毕业设计&项目承接群：238339408；

GIS技术交流群：432512093