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+"\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];
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,"请求天气预报信息失败提示");
}

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

备注：

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

GIS技术交流QQ群：432512093

时间： 2024-10-11 04:26:03

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

arcgis for flex或silverlight全国地图天气预报的实现

系统架构是B/S,目前有两个不同的版本,1.开发语言是C#.silverlight,开发平台是.NET:2.开发语言是java.flex,开发平台是myeclise. 采用地图是ArcGIS全国地图,开发接口为arcgis api for silverlight或者flex,但是程序可以拓展api 接口,可以采用其他GIS api,地图数据也可以更换其他地图数据,拓展性比较好. 备注:更多的精彩内容请关注本人的淘宝店http://shop116521643.taobao.com

arcgis for flex api version3.7 教程：8.创建地图

地图概述: arcgis for flex api提供了大量的方法来实现地图操作和交互.首先,地图(map)支持添加各种类型的图层或服务.图层数据来源可以是arcgis server.Bing maps.graphics layers等.此外还有可以使用网络公开的其他服务像arcgis.com或自建的.网络地图服务有相似的一面,都通过一定的方法支持各种类型的图层 ,任务和数据(数据可以扩展,例如可以是.csv和.gpx文件作为一个组合).下面我们将对此做详细讨论. 创建地图并设置显示范围和空间参

Arcgis flex 切片地图麻点

在arcgis server中发布地图切片完成后,有时候在访问地图的时候会出现很多麻点, 其实是你切片的时候没有注意到一些选项.... 默认的切片是PNG8,说到这可能就明白了吧,png8的色彩范围:256索引色 所以自然是不够的(业务图层可能会有更丰富的色彩. 因此要解决这个问题就直接改切片格式:PNG32(足够了,160万色),或更高(代价是图片更大,加载相对来说要慢一点).

“ArcGIS数据应用和地图打印输出

中国科学院计算技术研究所教育中心 关于开展“ArcGIS数据应用和地图打印输出” 培训班的通知 各相关单位: 随着信息化.网络化.数字化向纵深发展,互联网与空间地理信息系统相互交织,数字地球.“智慧地球”逐步从理念转为应用.新的形势下,地理信息成为国家创新体系和信息化建设的重要组成部分,要突出加强基础地理信息系统建设,加快形成数字中国地理空间框架,加快信息化体系建设,切实提高地理信息系统对现代化建设的服务能力.为此,中国科学院计算技术研究所教育中心(http://ec.ict.ac.cn)特举办

arcgis for flex 学习笔记（一）

初步认识 地图由图层.要素.样式等组成.地图上有N个图层,图层上有N个要素,每个要素可以存放点.线.面等,每个要素可以设置样式,如果显示图片.或文字均可以先创建一个mxml组件,然后设置到要素上. 面和线都是由点组成的. 添加点 1.首先初始化图层,GraphicsLayer. 2.获取坐标点,MapPoint. 3.创建要素,Graphic. 4.设置样式 Symbol. 5.添加要素至Layer,即是第一步创建的图层. 添加线 在添加点的基础上多了一个步骤. 获取到多个点,可以实例化一个线对

ArcGIS For Flex学习之Layers---控制图层的显示与否（利用DataGrid）

这个例子演示的是通过右侧DataGrid中的复选框来控制相应图层的可见性,由于ArcGISDynamicMapServiceLayer的defaultVisibility属性在地图发布时均为可见(true),所以开始时复选框均为选中状态,注意一下几点:(1)DataGrid的数据源为图层的LayerInfos(其中包括defaultVisibility.layerId.name等,可以用作某些控件的dataField属性):(2)复选框的select以及click属性:(3)复选框在选中状态时,

百度 Google 全国 地图 火星坐标 产生原因（记录）

1.偏移的起因:天朝测绘局以国家安全为理由,用法律的形式对所有在天朝发行的地图类产品加了强制性规范,要求所有地图类产品都必须使用国家测绘局的一种加偏移的算法,对地图的真实坐标进行加偏移处理,之后才可能通过审批准许上市.因此,天朝的所有官方及商用地图的坐标都是偏移的,这种偏移属于非线性的,偏移量在300至500米不等,偏移方向也不定.这种加过偏移的地图坐标就是所谓"火星坐标".2.GPS接收机本身接收卫星的信号,计算出本机所在位置的经纬度,在没有做特别处理的时候,这个经纬度是正确的.但是

ArcGIS Server 关于切片地图服务

1 什么是切片地图服务? 切片地图服务又叫缓存地图服务,地图缓存使地图和图像服务更快运行的一种非常有效的方法.创建地图缓存时,服务器会在若干个不同的比例级别上绘制整个地图并存储地图图像的副本.然后,服务器可在某人请求使用地图时分发这些图像,对于服务器来说,每次请求使用地图时,返回缓存的图像 要不绘制地图快得多. 注:此图片的意思是,将同一幅地图安装不同比例进行切片,得到相应的地图切片. 2 切片地图服务的优点和缺点 优点 由于切片地图服务中的图片不需要服务器实时生成,本身存放在服务器的硬盘上,所

OpenLayers调用arcgis server发布的地图服务

有两种方式可以调用arcgis server发布的地图服务,一种是rest,一种是wms. 地图的投影为900913,arcgis server为10.0版本,地图服务的空间参考为3857. 与Google Map相对应的ArcGis投影文件: 众所周知,Google Map的投影参考为"WGS 84 Web墨卡托",定义为 EPSG:900913 或者 EPSG:3857 (EPSG:3785).与此相对应的ArcGis的投影坐标系名称为:WGS 1984 Web Mercator.