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

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+"
"+"台风时间:"+graphic.attributes.formatTF_TIME+"
"+"风速:"+graphic.attributes.tfFs+"
"+"气压:"+graphic.attributes.tfQy);
                var text:Text = new Text();
                text.text="经纬度:"+graphic.attributes.tfLongitude+","+graphic.attributes.tfLatitude+"
"+"台风时间:"+graphic.attributes.formatTF_TIME+"
"+"风速:"+graphic.attributes.tfFs+"
"+"气压:"+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+")
";
                    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