flex全国地图气候预告的现实性完成进度解析

By admin in 亚洲必赢app在哪下载 on 2019年2月1日

     
 系统架构是B/S,开发语言是flex,开发工具是myeclise或者flashbuild,通过调用百度提供的在线天气预报web
api接口的主意来落到实处。

       采取地图是ArcGIS全国地图,开发接口为arcgis api for
flex,然而程序可以拓展api 接口,可以使用其余GIS
api,地图数据也得以转换其余地图数据,拓展性比较好。

       先谈谈主界面的布局,只是简短的统筹了大概的布局,如下:

       亚洲必赢app在哪下载 1

     
首先是两行,第一行是标题;第二行再分为两列,第一列是用来天气预告查询以及展现查询的结果,第二列用来浮现全国地图。

      贴上界面布局的代码:

      <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:layout>
<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:HGroup>
<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:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”温度:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”temperature1″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”白天:” paddingTop=”4″/>
<s:Image id=”dayimg1″ width=”25″ height=”15″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”黑夜:” paddingTop=”4″/>
<s:Image id=”nightimg1″ width=”25″ height=”15″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”气候:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”weather1″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”风向:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”wind1″/>
</s:HGroup>
<s:Line width=”100%”>
<s:stroke>
<s:SolidColorStroke color=”0xCECECE” weight=”1″/>
</s:stroke>
</s:Line>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”星期:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”date2″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”温度:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”temperature2″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”白天:” paddingTop=”4″/>
<s:Image id=”dayimg2″ width=”25″ height=”15″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”黑夜:” paddingTop=”4″/>
<s:Image id=”nightimg2″ width=”25″ height=”15″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”气候:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”weather2″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”风向:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”wind2″/>
</s:HGroup>
<s:Line width=”100%”>
<s:stroke>
<s:SolidColorStroke color=”0xCECECE” weight=”1″/>
</s:stroke>
</s:Line>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”星期:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”date3″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”温度:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”temperature3″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”白天:” paddingTop=”4″/>
<s:Image id=”dayimg3″ width=”25″ height=”15″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”黑夜:” paddingTop=”4″/>
<s:Image id=”nightimg3″ width=”25″ height=”15″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”气候:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”weather3″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”风向:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”wind3″/>
</s:HGroup>
<s:Line width=”100%”>
<s:stroke>
<s:SolidColorStroke color=”0xCECECE” weight=”1″/>
</s:stroke>
</s:Line>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”星期:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”date4″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”温度:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”temperature4″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”白天:” paddingTop=”4″/>
<s:Image id=”dayimg4″ width=”25″ height=”15″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”黑夜:” paddingTop=”4″/>
<s:Image id=”nightimg4″ width=”25″ height=”15″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”气候:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”weather4″/>
</s:HGroup>
<s:HGroup horizontalAlign=”center” width=”100%”>
<s:Label  text=”风向:” paddingTop=”4″/>
<s:Label  text=”” paddingTop=”4″ id=”wind4″/>
</s:HGroup>
</s:VGroup>
<s:Label width=”100%”
paddingBottom=”0″
text=”地理地方: {mapCoordX.toFixed(4)},{mapCoordY.toFixed(4)}”/>
</s:VGroup>
</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"/&gt;
<esri:GraphicsLayer id=”myGraphicsLayer”/>
</esri:Map>
</s:HGroup>

      藏绿色背景的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"/&gt;
<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.add伊夫ntListener(Result伊芙nt.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{
myGraphicsLayer.clear();
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();
if(event.result.CityWeatherResponse.results){
   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];
亚洲必赢app在哪下载,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
myGraphicsLayer.clear();
queryTask.execute(query, new AsyncResponder(onResult, onFault));
function onResult(featureSet:FeatureSet, token:Object = null):void
{
if (featureSet.features.length == 0)
{
Alert.show(“地图上尚未寻找到相关数据一定”);
}
else
{
sfs.source = weather.dayPictureUrl[0];
var graphic:Graphic = new
Graphic(featureSet.features[0].geometry,sfs,null);
graphic.toolTip = “当前都会:”+weather.cityname+”\n”+”星期:” +
weather.date[0] + “\n” + “温度:” + weather.temperature[0]
+”\n”+”气候:”+weather.weather[0]+”\n”+”风向:”+weather.wind[0];
myGraphicsLayer.add(graphic);
myMap.centerAt(featureSet.features[0].geometry as MapPoint);
myMap.zoomIn();
}
}
function onFault(info:Object, token:Object = null):void
{
Alert.show(info.toString());
}
}
else{
myGraphicsLayer.clear();
hidepanel.visible = false;
Alert.show(“搜索不到都市有关的天气预告数据”);
}
}
//重临失利事件
private function httpSerFaultHandler(event:FaultEvent):void{
Alert.show(event.fault.message as String,”请求天气预告新闻战败提醒”);
}

      到那边,某个城市的天气预先报告音信查询也落实了。效果图:

亚洲必赢app在哪下载 2

 

 

      备注:

      源代码下载:http://download.csdn.net/detail/liguoweioo/8440727

      GIS技术交换QQ群:432512093

      GIS论坛:http://arcgis.c.ev123.com/vip_arcgis.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 亚洲必赢app官方下载 版权所有