地信网论坛»论坛 › 『软件技术应用』 › ARCGIS › arcgis for flex全国地图天气预报的具体实现过程解析

免费视频|新人指南|投诉删帖|广告合作|地信网APP下载

返回列表 发新帖
查看: 1759|回复: 0
收起左侧

[技术交流] arcgis for flex全国地图天气预报的具体实现过程解析

[复制链接]
sinna

45

主题

8272

铜板

17

好友

高级工程师

Rank: 9Rank: 9Rank: 9

积分
1122
QQ
发表于 2016-10-24 09:01 | 显示全部楼层 |阅读模式
系统架构是B/S,开发语言是flex，开发工具是myeclise或者flashbuild，通过调用百度提供的在线天气预报web api接口的方式来实现。
       采用地图是ArcGIS全国地图，开发接口为arcgis api for flex，但是程序可以拓展api 接口，可以采用其他GIS api，地图数据也可以更换其他地图数据，拓展性比较好。
       先谈谈主界面的布局，只是简单的设计了大概的布局，如下：
      
      首先是两行，第一行是标题；第二行再分为两列，第一列是用来天气预报查询以及显示查询的结果，第二列用来显示全国地图。
      贴上界面布局的代码：
  1.   <s:layout>
  2. <s:VerticalLayout gap="0"/>
  3. </s:layout>
  4. <s:BorderContainer width="100%" backgroundColor="#D7D7D7">
  5. <s:layout>
  6. <s:VerticalLayout paddingBottom="7"
  7. paddingLeft="10"
  8. paddingRight="10"
  9. paddingTop="7"/>
  10. </s:layout>
  11. <s:RichText width="100%">
  12.              flex for arcgis----天气预报专题
  13. </s:RichText>
  14. </s:BorderContainer>
  15. <s:HGroup width="100%" height="100%"
  16. paddingLeft="1"
  17. paddingTop="1">
  18. <s:Group width="30%" height="100%" >
  19. <s:Rect width="100%" height="100%">
  20. <s:stroke>
  21. <s:SolidColorStroke color="0xCECECE"/>
  22. </s:stroke>
  23. </s:Rect>
  24. <s:VGroup width="100%" height="100%" horizontalAlign="center">
  25. <s:HGroup horizontalAlign="center" width="100%" paddingTop="10">
  26. <s:Label  text="城市名称:" paddingTop="4"/>
  27. <s:TextInput id="txt_userName"  text="广州"/>
  28. </s:HGroup>
  29. <s:HGroup horizontalAlign="center" width="100%">
  30.    <s:Button  label="查询" id="btn_login"/>
  31. <s:Button  label="查询所有" click="all_clickHandler(event)"/>
  32. </s:HGroup>
  33. <s:Line width="100%">
  34. <s:stroke>
  35. <s:SolidColorStroke color="0xCECECE" weight="1"/>
  36. </s:stroke>
  37. </s:Line>
  38. <s:VGroup width="100%" height="100%" horizontalAlign="center" id="hidepanel" visible="false">
  39.   <s:HGroup horizontalAlign="center" width="100%">
  40.   <s:Label  text="星期:" paddingTop="4"/>
  41.   <s:Label  text="" paddingTop="4" id="date1"/>
  42.   </s:HGroup>
  43. <s:HGroup horizontalAlign="center" width="100%">
  44. <s:Label  text="温度:" paddingTop="4"/>
  45. <s:Label  text="" paddingTop="4" id="temperature1"/>
  46. </s:HGroup>
  47. <s:HGroup horizontalAlign="center" width="100%">
  48. <s:Label  text="白天:" paddingTop="4"/>
  49. <s:Image id="dayimg1" width="25" height="15"/>
  50. </s:HGroup>
  51. <s:HGroup horizontalAlign="center" width="100%">
  52. <s:Label  text="黑夜:" paddingTop="4"/>
  53. <s:Image id="nightimg1" width="25" height="15"/>
  54. </s:HGroup>
  55. <s:HGroup horizontalAlign="center" width="100%">
  56. <s:Label  text="气候:" paddingTop="4"/>
  57. <s:Label  text="" paddingTop="4" id="weather1"/>
  58. </s:HGroup>
  59. <s:HGroup horizontalAlign="center" width="100%">
  60. <s:Label  text="风向:" paddingTop="4"/>
  61. <s:Label  text="" paddingTop="4" id="wind1"/>
  62. </s:HGroup>
  63. <s:Line width="100%">
  64. <s:stroke>
  65. <s:SolidColorStroke color="0xCECECE" weight="1"/>
  66. </s:stroke>
  67. </s:Line>
  68. <s:HGroup horizontalAlign="center" width="100%">
  69. <s:Label  text="星期:" paddingTop="4"/>
  70. <s:Label  text="" paddingTop="4" id="date2"/>
  71. </s:HGroup>
  72. <s:HGroup horizontalAlign="center" width="100%">
  73. <s:Label  text="温度:" paddingTop="4"/>
  74. <s:Label  text="" paddingTop="4" id="temperature2"/>
  75. </s:HGroup>
  76. <s:HGroup horizontalAlign="center" width="100%">
  77. <s:Label  text="白天:" paddingTop="4"/>
  78. <s:Image id="dayimg2" width="25" height="15"/>
  79. </s:HGroup>
  80. <s:HGroup horizontalAlign="center" width="100%">
  81. <s:Label  text="黑夜:" paddingTop="4"/>
  82. <s:Image id="nightimg2" width="25" height="15"/>
  83. </s:HGroup>
  84. <s:HGroup horizontalAlign="center" width="100%">
  85. <s:Label  text="气候:" paddingTop="4"/>
  86. <s:Label  text="" paddingTop="4" id="weather2"/>
  87. </s:HGroup>
  88. <s:HGroup horizontalAlign="center" width="100%">
  89. <s:Label  text="风向:" paddingTop="4"/>
  90. <s:Label  text="" paddingTop="4" id="wind2"/>
  91. </s:HGroup>
  92. <s:Line width="100%">
  93. <s:stroke>
  94. <s:SolidColorStroke color="0xCECECE" weight="1"/>
  95. </s:stroke>
  96. </s:Line>
  97. <s:HGroup horizontalAlign="center" width="100%">
  98. <s:Label  text="星期:" paddingTop="4"/>
  99. <s:Label  text="" paddingTop="4" id="date3"/>
  100. </s:HGroup>
  101. <s:HGroup horizontalAlign="center" width="100%">
  102. <s:Label  text="温度:" paddingTop="4"/>
  103. <s:Label  text="" paddingTop="4" id="temperature3"/>
  104. </s:HGroup>
  105. <s:HGroup horizontalAlign="center" width="100%">
  106. <s:Label  text="白天:" paddingTop="4"/>
  107. <s:Image id="dayimg3" width="25" height="15"/>
  108. </s:HGroup>
  109. <s:HGroup horizontalAlign="center" width="100%">
  110. <s:Label  text="黑夜:" paddingTop="4"/>
  111. <s:Image id="nightimg3" width="25" height="15"/>
  112. </s:HGroup>
  113. <s:HGroup horizontalAlign="center" width="100%">
  114. <s:Label  text="气候:" paddingTop="4"/>
  115. <s:Label  text="" paddingTop="4" id="weather3"/>
  116. </s:HGroup>
  117. <s:HGroup horizontalAlign="center" width="100%">
  118. <s:Label  text="风向:" paddingTop="4"/>
  119. <s:Label  text="" paddingTop="4" id="wind3"/>
  120. </s:HGroup>
  121. <s:Line width="100%">
  122. <s:stroke>
  123. <s:SolidColorStroke color="0xCECECE" weight="1"/>
  124. </s:stroke>
  125. </s:Line>
  126. <s:HGroup horizontalAlign="center" width="100%">
  127. <s:Label  text="星期:" paddingTop="4"/>
  128. <s:Label  text="" paddingTop="4" id="date4"/>
  129. </s:HGroup>
  130. <s:HGroup horizontalAlign="center" width="100%">
  131. <s:Label  text="温度:" paddingTop="4"/>
  132. <s:Label  text="" paddingTop="4" id="temperature4"/>
  133. </s:HGroup>
  134. <s:HGroup horizontalAlign="center" width="100%">
  135. <s:Label  text="白天:" paddingTop="4"/>
  136. <s:Image id="dayimg4" width="25" height="15"/>
  137. </s:HGroup>
  138. <s:HGroup horizontalAlign="center" width="100%">
  139. <s:Label  text="黑夜:" paddingTop="4"/>
  140. <s:Image id="nightimg4" width="25" height="15"/>
  141. </s:HGroup>
  142. <s:HGroup horizontalAlign="center" width="100%">
  143. <s:Label  text="气候:" paddingTop="4"/>
  144. <s:Label  text="" paddingTop="4" id="weather4"/>
  145. </s:HGroup>
  146. <s:HGroup horizontalAlign="center" width="100%">
  147. <s:Label  text="风向:" paddingTop="4"/>
  148. <s:Label  text="" paddingTop="4" id="wind4"/>
  149. </s:HGroup>
  150. </s:VGroup>
  151. <s:Label width="100%"
  152. paddingBottom="0"
  153. text="地理位置: {mapCoordX.toFixed(4)},{mapCoordY.toFixed(4)}"/>
  154. </s:VGroup>
  155. </s:Group>
  156. <esri:Map id="myMap" wrapAround180="true">
  157. <esri:extent>
  158. <esri:Extent xmin="71.6184779133381" ymin="29.726061424023065" xmax="135.50700591988112" ymax="54.94834808582403">
  159. <esri:SpatialReference wkid="4326"/>
  160. </esri:Extent>
  161. </esri:extent>
  162. <esri:infoWindowContent>
  163. <s:TextArea id="myTextArea"
  164. width="250" height="75"/>
  165. </esri:infoWindowContent>
  166. <esri:ArcGISDynamicMapServiceLayer url="http://localhost:6080/arcgis/rest/services/weather/MapServer"/>
  167. <esri:GraphicsLayer id="myGraphicsLayer"/>
  168. </esri:Map>
  169. </s:HGroup>
复制代码
红色背景的url是地图发布的服务，调用显示全国地图。后台的核心实现：
  1. <fx:Declarations>
  2. <!-- 将非可视元素（例如服务、值对象）放在此处 -->
  3. <s:HTTPService id="httpSer" method="POST">
  4. </s:HTTPService>
  5. <esri:PictureMarkerSymbol id="sfs"/>
  6. <!-- <esri:PictureMarkerSymbol id="sfs1"/>-->
  7. <!-- Layer with US States -->
  8. <esri:QueryTask id="queryTask" url="http://localhost:6080/arcgis/rest/services/weather/MapServer/0"/>
  9. <esri:Query id="query"
  10. outSpatialReference="{myMap.spatialReference}"
  11. returnGeometry="true"
  12. text="{str}">
  13. <esri:outFields>
  14. <fx:String>Name</fx:String>
  15. <fx:String>X</fx:String>
  16. <fx:String>Y</fx:String>
  17. </esri:outFields>
  18. </esri:Query>
  19. </fx:Declarations>
复制代码
      httpSer是声明HTTPService，因为天气预报是调用在线的http形式来实现的；queryTask是用来query查询的条件设置的，作用是为了每个城市的天气预报图标定位在地图上显示，url是指定用哪个图层来进行query查询。
      程序运行时候显示的是全国城市的天气预报图标以及信息，所以在初始化时候定义并调用CityCodeDB.xml文件来获取所有的城市名称。
      public const xmlUrl:String = "CityCodeDB.xml";
  1. 初始化函数：

  3.       private function init():void{

  5. getallcityinfo();//获取所有的城市信息
  6. }

  8.        /*
  9. * 获取所有城市信息以及相关的天气预报信息
  10. */
  11. private function getallcityinfo():void{
  12. myGraphicsLayer.clear();
  13. //HTTPService，为了监听初始化时候加载所有的城市天气预报，从配置文件xml获取所有的城市信息
  14. var service:HTTPService = new HTTPService();  
  15. service.url = xmlUrl;  
  16. service.addEventListener(ResultEvent.RESULT, resultHandler);  
  17. service.send();
  18. }

  20.     private function resultHandler(event:ResultEvent):void{  
  21. citys = event.result.CityCode.City; //获取到所有的配置文件城市名称集合
  22. var service:HTTPService = new HTTPService();
  23. service.addEventListener(ResultEvent.RESULT, cityresultHandler);//为了监听具体的每个城市天气预报信息
  24.                 for(var i:int;i<citys.length;i++){
  25. str=citys[i].Name;
  26. var params:URLVariables = new URLVariables();
  27. params.name =encodeURIComponent(citys[i].Name); //编码
  28. service.url = "http://api.map.baidu.com/telematics/v3/weather?location="+ params.name+ "&ak=YknGmxIoPugT7YrNrG955YLS";//调用百度提供天气预报的api接口
  29. service.send();  
  30. }


  33. private function cityresultHandler(event:ResultEvent):void{  
  34. var weather:Weather = new Weather();//自定义的类，主要是定义跟天气预报信息接口对应的字段，比如温度等
  35. if(event.result.CityWeatherResponse.results){
  36. weather.cityname = event.result.CityWeatherResponse.results.currentCity;//当前的城市名称
  37. weather.date =event.result.CityWeatherResponse.results.weather_data.date; //星期
  38. weather.dayPictureUrl=event.result.CityWeatherResponse.results.weather_data.dayPictureUrl;//白天图标
  39. weather.nightPictureUrl=event.result.CityWeatherResponse.results.weather_data.nightPictureUrl;//黑夜图标
  40. weather.temperature=event.result.CityWeatherResponse.results.weather_data.temperature;//温度
  41. weather.weather=event.result.CityWeatherResponse.results.weather_data.weather;//气候
  42. weather.wind=event.result.CityWeatherResponse.results.weather_data.wind;//风向
  43. query.text = weather.cityname;//为了动态的更新query查询text条件
  44. queryTask.execute(query, new AsyncResponder(onResult, onFault));
  45. function onResult(featureSet:FeatureSet, token:Object = null):void
  46. {

  48. if (featureSet.features.length == 0)
  49. {
  50. Alert.show("地图上没有搜索到相关数据定位");
  51. }
  52. else
  53. {
  54. //动态的改变显示在地图上的图标以及graphic
  55. var sps:PictureMarkerSymbol = new PictureMarkerSymbol();
  56. sps.source = weather.dayPictureUrl[0];
  57. var graphic:Graphic = new Graphic(featureSet.features[0].geometry,sps,null);
  58. graphic.toolTip = "当前城市:"+weather.cityname+"\n"+"星期:" + weather.date[0] + "\n" + "温度:" + weather.temperature[0] +"\n"+"气候:"+weather.weather[0]+"\n"+"风向:"+weather.wind[0];
  59. myGraphicsLayer.add(graphic);

  61. }
  62. }
  63. function onFault(info:Object, token:Object = null):void
  64. {
  65. Alert.show(info.toString());
  66. }

  68. }
  69. else{
  70. myGraphicsLayer.clear();
  71. hidepanel.visible = false;
  72. Alert.show("搜索不到城市相关的天气预报数据");
  73. }
  74. }
复制代码
      到这里全国的城市天气预报信息以及图标都实现了。
      下面是查询某个城市的天气预报信息，首先在初始化函数init添加httpservice监听事件：
  1. //监听查询按钮单击事件
  2. btn_login.addEventListener(MouseEvent.CLICK,login);
  3. //加载HTTPService的返回监听，为了监听单个城市查询使用
  4. httpSer.addEventListener(ResultEvent.RESULT,httpSerResultHandler);
  5. httpSer.addEventListener(FaultEvent.FAULT,httpSerFaultHandler);

  7.        然后在查询按钮事件添加：

  9.         //查询天气预报
  10.         private function weather(event:MouseEvent):void{
  11. str = txtcity.text; //文本框输入城市名称值
  12. var params:URLVariables = new URLVariables(); //编码
  13. params.name =encodeURIComponent(txt_userName.text);
  14. httpSer.url = "http://api.map.baidu.com/telematics/v3/weather?location="+ params.name+ "&ak=YknGmxIoPugT7YrNrG955YLShttpSer.send();
  15. }

  17. //返回成功事件
  18. private function httpSerResultHandler(event:ResultEvent):void{
  19. var weather:Weather = new Weather();
  20. if(event.result.CityWeatherResponse.results){
  21.    hidepanel.visible = true;
  22. weather.cityname = event.result.CityWeatherResponse.results.currentCity;
  23. weather.date =event.result.CityWeatherResponse.results.weather_data.date;
  24. weather.dayPictureUrl=event.result.CityWeatherResponse.results.weather_data.dayPictureUrl;
  25. weather.nightPictureUrl=event.result.CityWeatherResponse.results.weather_data.nightPictureUrl;
  26. weather.temperature=event.result.CityWeatherResponse.results.weather_data.temperature;
  27. weather.weather=event.result.CityWeatherResponse.results.weather_data.weather;
  28. weather.wind=event.result.CityWeatherResponse.results.weather_data.wind;

  30. date1.text = weather.date[0]; //第一天天气预报详情
  31. temperature1.text = weather.temperature[0];
  32. weather1.text = weather.weather[0];
  33. wind1.text = weather.wind[0];
  34. dayimg1.source = weather.dayPictureUrl[0];
  35. nightimg1.source = weather.nightPictureUrl[0];
  36. date2.text = weather.date[1];//第二天天气预报详情
  37. temperature2.text = weather.temperature[1];
  38. weather2.text = weather.weather[1];
  39. wind2.text = weather.wind[1];
  40. dayimg2.source = weather.dayPictureUrl[1];
  41. nightimg2.source = weather.nightPictureUrl[1];
  42. date3.text = weather.date[2];//第三天天气预报详情
  43. temperature3.text = weather.temperature[2];
  44. weather3.text = weather.weather[2];
  45. wind3.text = weather.wind[2];
  46. dayimg3.source = weather.dayPictureUrl[2];
  47. nightimg3.source = weather.nightPictureUrl[2];
  48. date4.text = weather.date[3];//第四天天气预报详情
  49. temperature4.text = weather.temperature[3];
  50. weather4.text = weather.weather[3];
  51. wind4.text = weather.wind[3];
  52. dayimg4.source = weather.dayPictureUrl[3];
  53. nightimg4.source = weather.nightPictureUrl[3];
  54. // clear the graphics layer
  55. myGraphicsLayer.clear();
  56. queryTask.execute(query, new AsyncResponder(onResult, onFault));
  57. function onResult(featureSet:FeatureSet, token:Object = null):void
  58. {
  59. if (featureSet.features.length == 0)
  60. {
  61. Alert.show("地图上没有搜索到相关数据定位");
  62. }
  63. else
  64. {
  65. sfs.source = weather.dayPictureUrl[0];
  66. var graphic:Graphic = new Graphic(featureSet.features[0].geometry,sfs,null);
  67. graphic.toolTip = "当前城市:"+weather.cityname+"\n"+"星期:" + weather.date[0] + "\n" + "温度:" + weather.temperature[0] +"\n"+"气候:"+weather.weather[0]+"\n"+"风向:"+weather.wind[0];
  68. myGraphicsLayer.add(graphic);
  69. myMap.centerAt(featureSet.features[0].geometry as MapPoint);
  70. myMap.zoomIn();
  71. }
  72. }
  73. function onFault(info:Object, token:Object = null):void
  74. {
  75. Alert.show(info.toString());
  76. }
  77. }
  78. else{
  79. myGraphicsLayer.clear();
  80. hidepanel.visible = false;
  81. Alert.show("搜索不到城市相关的天气预报数据");
  82. }
  83. }
  84. //返回失败事件
  85. private function httpSerFaultHandler(event:FaultEvent):void{
  86. Alert.show(event.fault.message as String,"请求天气预报信息失败提示");
  87. }
复制代码
到这里，某个城市的天气预报信息查询也实现了。效果图：



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


天气预报, 全国地图

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

在线客服
手机版新人指南 地信论坛 ( 湘ICP备14003170号-5 土流集团有限公司 版权所有 )

免责声明广告合作     邮箱：42368948@qq.com    湘公网安备 43010302000511号

公众号

地信网APP
快速回复 返回顶部 返回列表