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

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

采用地图是ArcGIS全国地图,开发接口为arcgis api for flex,但是程序可以拓展api 接口,可以采用其他GIS api,地图数据也可以更换其他地图数据,拓展性比较好。

先谈谈主界面的布局,只是简单的设计了大概的布局,如下:

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

贴上界面布局的代码:

<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:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="温度:" paddingTop="4"/></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:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="风向:" paddingTop="4"/></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:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="温度:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="白天:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="黑夜:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="气候:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="风向:" paddingTop="4"/></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:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="温度:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="白天:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="黑夜:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="气候:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="风向:" paddingTop="4"/></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:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="温度:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="白天:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="黑夜:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="气候:" paddingTop="4"/></s:HGroup><s:HGroup horizontalAlign="center" width="100%"><s:Label text="风向:" paddingTop="4"/></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=":6080/arcgis/rest/services/weather/MapServer"/><esri:GraphicsLayer id="myGraphicsLayer"/></esri:Map></s:HGroup>

红色背景的url是地图发布的服务,调用显示全国地图。后台的核心实现:

每当我看天的时候我就不喜欢再说话,每当我说话的时候我却敢看天。

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

相关文章:

你感兴趣的文章:

标签云: