config.xml文件的配置如下：
<widget label="台风" icon="assets/images/typhoon.png" config="" url="widgets/ActualWeather/TyphoonWarningWidget.swf"/>
源代码目录如下：
界面效果：
大概的思路如下：从后台数据库获取台风的信息列表，展示在界面的表格里面；点击某条台风选项时候，会动态的在地图上展示台风的轨迹信息出来，点击某个时刻的台风轨迹时候，会弹出该时刻的台风详情气泡窗口来展示；
具体的技术：利用arcgis api的Geometry（Point、Polyline）、Graphic、infowindow等等，就是把台风点轨迹连成线，然后把点和线描绘出来展示在地图上。
TyphoonWarningWidget.mxml:
<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget 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:viewer="com.esri.viewer.*"
creationComplete="init()"
width="340" height="440"
>
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.esri.ags.Graphic;
import com.esri.ags.SpatialReference;
import com.esri.ags.geometry.Geometry;
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.geometry.Polyline;
import com.esri.ags.layers.GraphicsLayer;
import com.esri.ags.symbols.PictureMarkerSymbol;
import com.esri.ags.symbols.SimpleLineSymbol;
import com.esri.ags.symbols.SimpleMarkerSymbol;
import com.esri.ags.symbols.Symbol;
import com.esri.ags.symbols.TextSymbol;
import flash.globalization.NumberFormatter;
import flash.utils.clearInterval;
import flashx.textLayout.elements.BreakElement;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.Text;
import mx.core.FlexGlobals;
import mx.events.CloseEvent;
import mx.events.ListEvent;
import mx.events.SliderEvent;
import mx.formatters.Formatter;
import mx.managers.PopUpManager;
import spark.events.DropDownEvent;
import spark.events.IndexChangeEvent;
import spark.events.TitleWindowBoundsEvent;
//台风10年年份集合
private var dt:Date = new Date();
private var yearnow:String=dt.fullYear.toString();
private var yearReduceOne:int=dt.fullYear-1;
private var yearReduceTwo:int=dt.fullYear-2;
private var yearReduceThree:int=dt.fullYear-3;
private var yearReduceFour:int=dt.fullYear-4;
private var yearReduceFive:int=dt.fullYear-5;
private var yearReduceSix:int=dt.fullYear-6;
private var yearReduceSeven:int=dt.fullYear-7;
private var yearReduceEight:int=dt.fullYear-8;
private var yearReduceNine:int=dt.fullYear-9;
/**
*@autor:hanhh
*@function: 台风功能
*@date:2015/3/8
*/
[Bindable]
private var tfData:ArrayCollection=new ArrayCollection
([
{formatTF_TIME :"2015-1-18 2时",tfLongitude:"113.92020120006099",tfLatitude:"22.58297969742287",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 3时",tfLongitude:"113.90973157163533",tfLatitude:"22.57488953000305",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 4时",tfLongitude:"113.88974409918636",tfLatitude:"22.572510068997218",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 6时",tfLongitude:"113.87023251893855",tfLatitude:"22.573937745600716",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 8时",tfLongitude:"113.84831768307485",tfLatitude:"22.57822077541121",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 12时",tfLongitude:"113.81357755238973",tfLatitude:"22.588214511635698",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 14时",tfLongitude:"113.79075852134382",tfLatitude:"22.599635924463684",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 16时",tfLongitude:"113.77315050990067",tfLatitude:"22.60867787628584",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 18时",tfLongitude:"113.7488800076412",tfLatitude:"22.620099289113824",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 20时",tfLongitude:"113.73317556500272",tfLatitude:"22.63009302533831",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 21时",tfLongitude:"113.72268214196701",tfLatitude:"22.631996594142976",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 23时",tfLongitude:"113.70367024853043",tfLatitude:"22.63247248634414",tfFs :"18",tfQy:"998"}
]);
private var tfDataNew:ArrayCollection=new ArrayCollection
([
{formatTF_TIME :"2015-1-18 4时",tfLongitude:"113.78552370713099",tfLatitude:"22.54586010573192",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 6时",tfLongitude:"113.77695764751",tfLatitude:"22.537769938312096",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 7时",tfLongitude:"113.76172909707269",tfLatitude:"22.53253512409927",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 9时",tfLongitude:"113.74647675202532",tfLatitude:"22.5349145851051",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 11时",tfLongitude:"113.74221751682488",tfLatitude:"22.543956536927254",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 13时",tfLongitude:"113.74124193781248",tfLatitude:"22.561088656169233",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 15时",tfLongitude:"113.7526395560304",tfLatitude:"22.57584131440538",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 17时",tfLongitude:"113.7445969778307",tfLatitude:"22.60249127767068",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 19时",tfLongitude:"113.70697769932852",tfLatitude:"22.60725019968234",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 21时",tfLongitude:"113.66655065683946",tfLatitude:"22.601539493268348",tfFs :"18",tfQy:"998"},
{formatTF_TIME :"2015-1-18 23时",tfLongitude:"113.62800338854501",tfLatitude:"22.576793098807713",tfFs :"18",tfQy:"998"}
]);
[Bindable]
// 是否播放了.0:未播放，1：播放了。以播放情况下才可以通过列表关联到气泡
private var isPlay:Number = 0;
// 判断是不是播放到最后一点
public var isPlayEndPoint:Boolean = false;
// 判断台风是否在播放中
public var isPlaying:Boolean = false;
// 保存单击双击事件的状态
public var tfxxTitle :String=null; //保存台风的中文名以便导出时使用
public var tfZWName:String=null;
// 保存单击双击事件的状态
private var interval :Number= 0;
private var tfInfoLayer:GraphicsLayer;//显示台风信息
private var showTfNameIndex:String="";
[Bindable]
private var tfHistoryList:ArrayCollection=new ArrayCollection
([
{id:"201501",happenTime:"2015-1-18",tfZhName:"",tfName :"MEaKKHLA",tfqd:"台风"},
{id:"201502",happenTime:"2015-2-18",tfZhName:"",tfName :"HIGOS",tfqd:"强台风"}
]);
private var typhoonSpeed:Number=0;
/**
* 初始化页面
* @autor:hanhh
*/
public function init():void{
this.isResizeable = false;
//取得当年台风列表
var tfHappendTime:String;
tfHappendTime=tfYear_DropDownList.selectedItem.tfHappendTime;
//add by gwli
graphicsLayer=new GraphicsLayer();
map.addLayer(graphicsLayer); //add hanhh
tfInfoLayer=new GraphicsLayer()
map.addLayer(tfInfoLayer);
}
/**
* 播放、停止
* @autor:hanhh
*/
public function button1_clickHandler(event:MouseEvent):void {
graphicsLayer.clear();
points =new Array();
//再次播放时定位到最上面
if(tfData.length>10){
this.dataGrid.selectedIndex = 0;
this.dataGrid.verticalScrollPosition=dataGrid.selectedIndex;
}
isPlaying = true;
isPlay = 0;
this.backButton.enabled = false;
this.playbutton.enabled = false;
recor=0;
intervaltime = setInterval(drawTrace, typhoonSpeed,tfData); //播放速度关联
}
private var points:Array;//保存表格数据集的经纬度点集合
private var polyline:Polyline;//线定义
private var lastDrawGraphic:Graphic; //保存绘制线graphic
private var GraphicMarker:Graphic;//保存绘制点轨迹graphic
private var GraphicPicture:Graphic;//保存图片picturegraphic
[Bindable]
private var graphicsLayer:GraphicsLayer;//显示绘制图的layer //private var picgraphicsLayer:GraphicsLayer;//显示swf图标的layer
//定时器
private var intervaltime:uint;
private var recor:int=0;//用来判断是否结束时间间隔函数的标识
/**
* 绘制轨迹函数
* data,表格数据集,含有经纬度信息,用来描绘用的
*/
public function drawTrace(data:ArrayCollection):void{
//判断是否删除台风动态swf图标，保证地图上只显示一个
if(GraphicPicture!=null && recor<data.length){
graphicsLayer.remove(GraphicPicture);
}
polyline = new Polyline();
lastDrawGraphic = new Graphic();
GraphicMarker = new Graphic();
GraphicPicture = new Graphic();
lastDrawGraphic.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 0xDD2222, 0.8, 2);//设置线符号
GraphicMarker.symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 13, 0x0033DD);//设置点符号
GraphicPicture.symbol = pic;
if(recor<data.length){
this.dataGrid.selectedIndex = recor;//实现轨迹点和datagrid的联动效果
// 【台风改造】当台风的定位信息只有一页时，点击播放按钮，播放完毕后，整个数据会上移，而没有滚动条
// 当前选择行居中
if(recor>9){
this.dataGrid.verticalScrollPosition=dataGrid.selectedIndex-3;
}
var mp:MapPoint = new MapPoint(Number(data.getItemAt(recor).tfLongitude),Number(data.getItemAt(recor).tfLatitude),map.spatialReference);//获取经纬度信息, 转换为点
GraphicMarker.geometry = mp;
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 };//台风时间,风速,气压
GraphicPicture.geometry =mp;
points.push(mp);
polyline.addPath(points);
lastDrawGraphic.geometry = polyline;
//GraphicMarker.addEventListener(MouseEvent.CLICK, onGraphicClick);//添加点单击graphic的监控事件
GraphicMarker.addEventListener(MouseEvent.MOUSE_OVER, onGraphicMouseOver);//添加鼠标overgraphic的监控事件
GraphicMarker.addEventListener(MouseEvent.MOUSE_OUT, onGraphicMouseOut);//添加鼠标outgraphic的监控事件
graphicsLayer.add(lastDrawGraphic);//添加线
graphicsLayer.add(GraphicPicture);//添加swf台风图标
graphicsLayer.add(GraphicMarker);//添加点
if(points.length>1)
map.zoomTo(polyline);
else
map.zoomTo(mp);
}
else{
if(intervaltime){
clearInterval(intervaltime);
}
this.backButton.enabled = true;
this.playbutton.enabled = true;
}
recor++;
}
/**
* graphic mouseover事件
* 获取各个时刻的点轨迹详细信息
* 气泡弹出框来显示详细的信息
*/
private function onGraphicMouseOver(event:MouseEvent):void
{
var graphic:Graphic=event.currentTarget as Graphic;
//Alert.show("经纬度:"+graphic.attributes.tfLongitude+","+graphic.attributes.tfLatitude+"\n"+"台风时间:"+graphic.attributes.formatTF_TIME+"\n"+"风速:"+graphic.attributes.tfFs+"\n"+"气压:"+graphic.attributes.tfQy);
var text:Text = new Text();
text.text="经纬度:"+graphic.attributes.tfLongitude+","+graphic.attributes.tfLatitude+"\n"+"台风时间:"+graphic.attributes.formatTF_TIME+"\n"+"风速:"+graphic.attributes.tfFs+"\n"+"气压:"+graphic.attributes.tfQy;
map.infoWindow.content =text;
map.infoWindow.closeButtonVisible=true;
map.infoWindow.show(graphic.geometry as MapPoint);
}
/**
* graphic mouseout事件
* 获取各个时刻的点轨迹详细信息
* 气泡弹出框来显示详细的信息
*/
private function onGraphicMouseOut(event:MouseEvent):void
{
map.infoWindow.hide();
}
/**
* 改变播放速度
* @autor:hanhh
*/
private function changeSpend(event:SliderEvent):void{
// 修改播放速度，在右端播放速度快
typhoonSpeed =(0.5-Number(this.timeSelect.value))*1000;
}
/**
*在年份下拉列表选择某一年取得台风列表
* @autor:hanhh
*/
protected function dropDownYearList_closeHandler(event:DropDownEvent):void{
//取得选取台风发生年份
var tfHappendTime:String=tfYear_DropDownList.selectedItem.tfHappendTime;
}
/**
* @autor:hanhh
*单击台风列表取得台风的详细信息
*/
private function tfitemClick(event:ListEvent):void{
tfInfoLayer.clear();
this.playbutton.enabled = true;
this.backButton.enabled = true;
isPlay = 0;
this.playbutton.enabled = true;
// 修改播放速度，在右端播放速度快
typhoonSpeed =Number(this.timeSelect.value)*1000;
//得到选择项目的objec
var selectedObj:*=this.tfDataGrid.selectedItem as Object;
//如果有数据则弹出详细台风数据窗口
if(selectedObj.tfZhName!="没有台风数据"){
this.title.text=selectedObj.tfZhName+"("+selectedObj.tfName+")定位信息";
this.tfDetail.visible=true;
this.backButton.visible = true;
this.tf.visible=false;
this.playbutton.visible = true;
tfxxTitle =selectedObj.tfZhName+"("+selectedObj.tfName+")";
tfZWName=selectedObj.tfZhName;
tfData=null;
tfData =tfDataNew;
} showTfNameIndex = "";
showTfNameIndex += selectedObj.happenTime.substring(0,4)+"年第"+String(selectedObj.id).substr(2,selectedObj.id.length)+"号台风 "+selectedObj.tfZhName+"("+selectedObj.tfName+")\n";
var textSymbol:TextSymbol=new TextSymbol(showTfNameIndex);
this.left= Capabilities.screenResolutionX/7-this.width/7;
this.top=Capabilities.screenResolutionY/7;
var point:MapPoint=map.toMapFromStage(Number(this.left),Number(this.top));
var graphic:Graphic=new Graphic(point);
var textFormat:TextFormat=new TextFormat("Arial", 16, 0xe10601, true);
textSymbol.textFormat=textFormat;
graphic.symbol=textSymbol;
tfInfoLayer.add(graphic);
}
/**
* 风列表修改
* @autor:hanhh
* */
public function openTfInfo(event:Event):void{
this.tfDetail.visible=false;
this.backButton.visible = false;
this.title.text="台风列表";
this.tf.visible=true;
}
//台风年份数据绑定
[Bindable]
private var arrYear:ArrayCollection=new ArrayCollection
([
{tfHappendTime:yearnow},{tfHappendTime:yearReduceOne},{tfHappendTime:yearReduceTwo},{tfHappendTime:yearReduceThree},{tfHappendTime:yearReduceFour},
{tfHappendTime:yearReduceFive},{tfHappendTime:yearReduceSix},{tfHappendTime:yearReduceSeven},{tfHappendTime:yearReduceEight},{tfHappendTime:yearReduceNine}
]);
/**
* 关闭事件
* @autor:hanhh
* */
private function widgetClosedHandler(event:Event):void
{
graphicsLayer.clear();
tfInfoLayer.clear();
} ]]>
</fx:Script>
<fx:Declarations>
<esri:PictureMarkerSymbol id="pic" source="@Embed(source='assets/images/tf.swf')"/>
</fx:Declarations>
<viewer:WidgetTemplate id="wTemplate" width="100%" height="100%" closed="widgetClosedHandler(event)">
<s:Label text="台风列表" id="title" height="20" paddingTop="5" paddingLeft="5"/>
<mx:LinkButton height="20" width="20" id="backButton" click="openTfInfo(event)" icon="@Embed('widgets/ActualWeather/images/BACK.png')" visible="false" right="5"/>
<s:VGroup id="tf" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="25" gap="5" horizontalAlign="center" width="98%" height="100%" visible="true" >
<s:HGroup verticalAlign="middle" width="100%">
<!--根据年份选择台风下拉列表-->
<s:Label text="选择查看的台风年份:" width="60%" fontFamily="宋体"/>
<s:DropDownList id="tfYear_DropDownList" dataProvider="{arrYear}" labelField="tfHappendTime" close="dropDownYearList_closeHandler(event)" prompt="请选择台风年份" selectedIndex="0" width="40%"></s:DropDownList>
</s:HGroup>
<mx:DataGrid id="tfDataGrid" itemClick="tfitemClick(event)" doubleClickEnabled="true" width="100%" rowCount="12" dataProvider="{tfHistoryList}">
<mx:columns >
<mx:DataGridColumn headerText="台风编号" minWidth="50" dataField="id"/>
<mx:DataGridColumn headerText="台风名" minWidth="70" dataField="tfZhName" />
<mx:DataGridColumn headerText="强度" minWidth="90" dataField="tfqd" />
</mx:columns>
</mx:DataGrid>
</s:VGroup>
<s:VGroup paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="25" gap="5" horizontalAlign="center" id="tfDetail" visible="false" width="98%">
<s:HGroup width="100%">
<mx:DataGrid dataProvider="{tfData}" id="dataGrid" horizontalScrollPolicy="auto" verticalScrollPolicy="auto" rowCount="11" width="100%" >
<mx:columns>
<mx:DataGridColumn textAlign="center" headerText="台风时间" width="80" dataField="formatTF_TIME"/>
<mx:DataGridColumn textAlign="center" headerText="经度(°)" width="50" dataField="tfLongitude"/>
<mx:DataGridColumn textAlign="center" headerText="纬度(°)" width="50" dataField="tfLatitude"/>
<mx:DataGridColumn textAlign="center" headerText="风速(m/s)" dataField="tfFs" width="50"/>
<mx:DataGridColumn textAlign="center" headerText="气压(Pa)" dataField="tfQy" width="50"/>
</mx:columns>
</mx:DataGrid>
</s:HGroup>
<s:HGroup width="100%" paddingTop="5">
<mx:HRule width="100%" strokeWidth="2" alpha="0.5" id="qx" />
</s:HGroup>
<s:HGroup width="100%" verticalAlign="middle" paddingBottom="0" >
<s:Label text="播放速度："/>
<mx:HSlider minimum="0.1" maximum="0.4" value="0.4" dataTipPlacement="top" change="changeSpend(event)"
tickColor="black"
snapInterval="0.1" tickInterval="0.1"
allowTrackClick="true"
liveDragging="true" id="timeSelect"
/>
<s:Button id="playbutton" label="播放" width="60" click="button1_clickHandler(event)"/>
</s:HGroup>
</s:VGroup>
</viewer:WidgetTemplate>
</viewer:BaseWidget>
备注：
GIS技术交流QQ群：432512093
WebGIS二次开发培训入门群： 238339408