• arcgis for flex全国地图天气预报的具体实现过程解析


           系统架构是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: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"/>
    <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"/>
    <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+" "+"星期:" + weather.date[0] + " " + "温度:" + weather.temperature[0] +" "+"气候:"+weather.weather[0]+" "+"风向:"+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];
    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+" "+"星期:" + weather.date[0] + " " + "温度:" + weather.temperature[0] +" "+"气候:"+weather.weather[0]+" "+"风向:"+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,"请求天气预报信息失败提示");
    }

          到这里,某个城市的天气预报信息查询也实现了。效果图:

          备注:

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

          GIS技术交流QQ群:432512093

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

  • 相关阅读:
    poj 2479
    纯CSS实现小圆点和三角形图案
    HDOJ1084 What Is Your Grade?
    4星|《一世富贵》:穿越到宋朝去抢了狄青、范仲淹的风头
    世界不是平的,发达国家在本地生产越来越合算。观点宏大,证据薄弱:3星|《后全球化时代》
    饥饿疗法是目前唯一确信能够延缓衰老的办法:4星|《三联生活周刊》2018年3期
    4星|《重塑》:消费者的信息能力是一个重要的经济变量。新颖的、有见地的国人原创经济理论
    3星|《高情商谈判》:谈判中控制情绪非常重要
    中间商赚差价让世界更美好:3.5星|《中间人经济》
    3.5星|《新零售的未来》:中美两国零售业的现状的分析和未来的展望
  • 原文地址:https://www.cnblogs.com/giserhome/p/4286898.html
Copyright © 2020-2023  润新知