系統架構是B/S,開發語言是flex，開發工具是myeclise或者flashbuild，通過調用百度提供的線上天氣預報web api接口的方式來實作。
采用地圖是ArcGIS全國地圖，開發接口為arcgis api for flex，但是程式可以拓展api 接口，可以采用其他GIS api，地圖資料也可以更換其他地圖資料，拓展性比較好。
系統架構是B/S,開發語言是flex，開發工具是myeclise或者flashbuild，通過調用百度提供的線上天氣預報web api接口的方式來實作。
采用地圖是ArcGIS全國地圖，開發接口為arcgis api for flex，但是程式可以拓展api 接口，可以采用其他GIS api，地圖資料也可以更換其他地圖資料，拓展性比較好。
先談談主界面的布局，隻是簡單的設計了大概的布局，如下：
首先是兩行，第一行是标題；第二行再分為兩列，第一列是用來天氣預報查詢以及顯示查詢的結果，第二列用來顯示全國地圖。
貼上界面布局的代碼：
<s:layout>
<s:VerticalLayout gap="0"/>
</s:layout>
<s:BorderContainer width="100%" backgroundColor="#D7D7D7">
<s:layout>
<s:VerticalLayout paddingBottom="7"
paddingLeft="10"
paddingRight="10"
paddingTop="7"/>
<s:RichText width="100%">
flex for arcgis----天氣預報專題
</s:RichText>
</s:BorderContainer>
<s:HGroup width="100%" height="100%"
paddingLeft="1"
paddingTop="1">
<s:Group width="30%" height="100%" >
<s:Rect width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="0xCECECE"/>
</s:stroke>
</s:Rect>
<s:VGroup width="100%" height="100%" horizontalAlign="center">
<s:HGroup horizontalAlign="center" width="100%" paddingTop="10">
<s:Label text="城市名稱:" paddingTop="4"/>
<s:TextInput id="txt_userName" text="廣州"/>
</s:HGroup>
<s:HGroup horizontalAlign="center" width="100%">
<s:Button label="查詢" id="btn_login"/>
<s:Button label="查詢所有" click="all_clickHandler(event)"/>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="0xCECECE" weight="1"/>
</s:stroke>
</s:Line>
<s:VGroup width="100%" height="100%" horizontalAlign="center" id="hidepanel" visible="false">
<s:HGroup horizontalAlign="center" width="100%">
<s:Label text="星期:" paddingTop="4"/>
<s:Label text="" paddingTop="4" id="date1"/>
</s:HGroup>
<s:Label text="溫度:" paddingTop="4"/>
<s:Label text="" paddingTop="4" id="temperature1"/>
<s:Label text="白天:" paddingTop="4"/>
<s:Image id="dayimg1" width="25" height="15"/>
<s:Label text="黑夜:" paddingTop="4"/>
<s:Image id="nightimg1" width="25" height="15"/>
<s:Label text="氣候:" paddingTop="4"/>
<s:Label text="" paddingTop="4" id="weather1"/>
<s:Label text="風向:" paddingTop="4"/>
<s:Label text="" paddingTop="4" id="wind1"/>
<s:Label text="星期:" paddingTop="4"/>
<s:Label text="" paddingTop="4" id="date2"/>
<s:Label text="" paddingTop="4" id="temperature2"/>
<s:Image id="dayimg2" width="25" height="15"/>
<s:Image id="nightimg2" width="25" height="15"/>
<s:Label text="" paddingTop="4" id="weather2"/>
<s:Label text="" paddingTop="4" id="wind2"/>
<s:Label text="" paddingTop="4" id="date3"/>
<s:Label text="" paddingTop="4" id="temperature3"/>
<s:Image id="dayimg3" width="25" height="15"/>
<s:Image id="nightimg3" width="25" height="15"/>
<s:Label text="" paddingTop="4" id="weather3"/>
<s:Label text="" paddingTop="4" id="wind3"/>
<s:Label text="" paddingTop="4" id="date4"/>
<s:Label text="" paddingTop="4" id="temperature4"/>
<s:Image id="dayimg4" width="25" height="15"/>
<s:Image id="nightimg4" width="25" height="15"/>
<s:Label text="" paddingTop="4" id="weather4"/>
<s:Label text="" paddingTop="4" id="wind4"/>
</s:VGroup>
<s:Label width="100%"
paddingBottom="0"
text="地理位置: {mapCoordX.toFixed(4)},{mapCoordY.toFixed(4)}"/>
</s:Group>
<esri:Map id="myMap" wrapAround180="true">
<esri:extent>
<esri:Extent xmin="71.6184779133381" ymin="29.726061424023065" xmax="135.50700591988112" ymax="54.94834808582403">
<esri:SpatialReference wkid="4326"/>
</esri:Extent>
</esri:extent>
<esri:infoWindowContent>
<s:TextArea id="myTextArea"
width="250" height="75"/>
</esri:infoWindowContent>
<esri:ArcGISDynamicMapServiceLayer url="http://localhost:6080/arcgis/rest/services/weather/MapServer"/>
<esri:GraphicsLayer id="myGraphicsLayer"/>
</esri:Map>
紅色背景的url是地圖釋出的服務，調用顯示全國地圖。背景的核心實作：
<fx:Declarations>
<!-- 将非可視元素（例如服務、值對象）放在此處 -->
<s:HTTPService id="httpSer" method="POST">
</s:HTTPService>
<esri:PictureMarkerSymbol id="sfs"/>
<!-- <esri:PictureMarkerSymbol id="sfs1"/>-->
<!-- Layer with US States -->
<esri:QueryTask id="queryTask" url="http://localhost:6080/arcgis/rest/services/weather/MapServer/0"/>
<esri:Query id="query"
outSpatialReference="{myMap.spatialReference}"
returnGeometry="true"
text="{str}">
<esri:outFields>
<fx:String>Name</fx:String>
<fx:String>X</fx:String>
<fx:String>Y</fx:String>
</esri:outFields>
</esri:Query>
</fx:Declarations>
httpSer是聲明HTTPService，因為天氣預報是調用線上的http形式來實作的；queryTask是用來query查詢的條件設定的，作用是為了每個城市的天氣預報圖示定位在地圖上顯示，url是指定用哪個圖層來進行query查詢。
程式運作時候顯示的是全國城市的天氣預報圖示以及資訊，是以在初始化時候定義并調用CityCodeDB.xml檔案來擷取所有的城市名稱。
public const xmlUrl:String = "CityCodeDB.xml";
初始化函數：
private function init():void{
getallcityinfo();//擷取所有的城市資訊
}
/*
* 擷取所有城市資訊以及相關的天氣預報資訊
*/
private function getallcityinfo():void{
myGraphicsLayer.clear();
//HTTPService，為了監聽初始化時候加載所有的城市天氣預報，從配置檔案xml擷取所有的城市資訊
var service:HTTPService = new HTTPService();
service.url = xmlUrl;
service.addEventListener(ResultEvent.RESULT, resultHandler);
service.send();
private function resultHandler(event:ResultEvent):void{
citys = event.result.CityCode.City; //擷取到所有的配置檔案城市名稱集合
var service:HTTPService = new HTTPService();
service.addEventListener(ResultEvent.RESULT, cityresultHandler);//為了監聽具體的每個城市天氣預報資訊
for(var i:int;i<citys.length;i++){
str=citys[i].Name;
var params:URLVariables = new URLVariables();
params.name =encodeURIComponent(citys[i].Name); //編碼
service.url = "http://api.map.baidu.com/telematics/v3/weather?location="+ params.name+ "&ak=YknGmxIoPugT7YrNrG955YLS";//調用百度提供天氣預報的api接口
service.send();
private function cityresultHandler(event:ResultEvent):void{
var weather:Weather = new Weather();//自定義的類，主要是定義跟天氣預報資訊接口對應的字段，比如溫度等
if(event.result.CityWeatherResponse.results){
weather.cityname = event.result.CityWeatherResponse.results.currentCity;//目前的城市名稱
weather.date =event.result.CityWeatherResponse.results.weather_data.date; //星期
weather.dayPictureUrl=event.result.CityWeatherResponse.results.weather_data.dayPictureUrl;//白天圖示
weather.nightPictureUrl=event.result.CityWeatherResponse.results.weather_data.nightPictureUrl;//黑夜圖示
weather.temperature=event.result.CityWeatherResponse.results.weather_data.temperature;//溫度
weather.weather=event.result.CityWeatherResponse.results.weather_data.weather;//氣候
weather.wind=event.result.CityWeatherResponse.results.weather_data.wind;//風向
query.text = weather.cityname;//為了動态的更新query查詢text條件
queryTask.execute(query, new AsyncResponder(onResult, onFault));
function onResult(featureSet:FeatureSet, token:Object = null):void
{
if (featureSet.features.length == 0)
Alert.show("地圖上沒有搜尋到相關資料定位");
else
//動态的改變顯示在地圖上的圖示以及graphic
var sps:PictureMarkerSymbol = new PictureMarkerSymbol();
sps.source = weather.dayPictureUrl[0];
var graphic:Graphic = new Graphic(featureSet.features[0].geometry,sps,null);
graphic.toolTip = "目前城市:"+weather.cityname+"\n"+"星期:" + weather.date[0] + "\n" + "溫度:" + weather.temperature[0] +"\n"+"氣候:"+weather.weather[0]+"\n"+"風向:"+weather.wind[0];
myGraphicsLayer.add(graphic);
function onFault(info:Object, token:Object = null):void
Alert.show(info.toString());
else{
hidepanel.visible = false;
Alert.show("搜尋不到城市相關的天氣預報資料");
到這裡全國的城市天氣預報資訊以及圖示都實作了。
下面是查詢某個城市的天氣預報資訊，首先在初始化函數init添加httpservice監聽事件：
//監聽查詢按鈕單擊事件
btn_login.addEventListener(MouseEvent.CLICK,login);
//加載HTTPService的傳回監聽，為了監聽單個城市查詢使用
httpSer.addEventListener(ResultEvent.RESULT,httpSerResultHandler);
httpSer.addEventListener(FaultEvent.FAULT,httpSerFaultHandler);
然後在查詢按鈕事件添加：
//查詢天氣預報
private function weather(event:MouseEvent):void{
str = txtcity.text; //文本框輸入城市名稱值
var params:URLVariables = new URLVariables(); //編碼
params.name =encodeURIComponent(txt_userName.text);
httpSer.url = "http://api.map.baidu.com/telematics/v3/weather?location="+ params.name+ "&ak=YknGmxIoPugT7YrNrG955YLShttpSer.send();
//傳回成功事件
private function httpSerResultHandler(event:ResultEvent):void{
var weather:Weather = new Weather();
hidepanel.visible = true;
weather.cityname = event.result.CityWeatherResponse.results.currentCity;
weather.date =event.result.CityWeatherResponse.results.weather_data.date;
weather.dayPictureUrl=event.result.CityWeatherResponse.results.weather_data.dayPictureUrl;
weather.nightPictureUrl=event.result.CityWeatherResponse.results.weather_data.nightPictureUrl;
weather.temperature=event.result.CityWeatherResponse.results.weather_data.temperature;
weather.weather=event.result.CityWeatherResponse.results.weather_data.weather;
weather.wind=event.result.CityWeatherResponse.results.weather_data.wind;
date1.text = weather.date[0]; //第一天天氣預報詳情
temperature1.text = weather.temperature[0];
weather1.text = weather.weather[0];
wind1.text = weather.wind[0];
dayimg1.source = weather.dayPictureUrl[0];
nightimg1.source = weather.nightPictureUrl[0];
date2.text = weather.date[1];//第二天天氣預報詳情
temperature2.text = weather.temperature[1];
weather2.text = weather.weather[1];
wind2.text = weather.wind[1];
dayimg2.source = weather.dayPictureUrl[1];
nightimg2.source = weather.nightPictureUrl[1];
date3.text = weather.date[2];//第三天天氣預報詳情
temperature3.text = weather.temperature[2];
weather3.text = weather.weather[2];
wind3.text = weather.wind[2];
dayimg3.source = weather.dayPictureUrl[2];
nightimg3.source = weather.nightPictureUrl[2];
date4.text = weather.date[3];//第四天天氣預報詳情
temperature4.text = weather.temperature[3];
weather4.text = weather.weather[3];
wind4.text = weather.wind[3];
dayimg4.source = weather.dayPictureUrl[3];
nightimg4.source = weather.nightPictureUrl[3];
// clear the graphics layer
{
sfs.source = weather.dayPictureUrl[0];
var graphic:Graphic = new Graphic(featureSet.features[0].geometry,sfs,null);
myMap.centerAt(featureSet.features[0].geometry as MapPoint);
myMap.zoomIn();
}
//傳回失敗事件
private function httpSerFaultHandler(event:FaultEvent):void{
Alert.show(event.fault.message as String,"請求天氣預報資訊失敗提示");
到這裡，某個城市的天氣預報資訊查詢也實作了。效果圖：
備注：
源代碼下載下傳：http://download.csdn.net/detail/liguoweioo/8440727
GIS技術交流QQ群：432512093
GIS論壇：http://arcgis.c.ev123.com/vip_arcgis.html
GIS之家作品店鋪：GIS之家作品店鋪
GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢
![Flex實作代碼分離mxml/as[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)