中低纬山地气象
MU-Uw Latitude Mountain Meteoroloyp Vol.45No.1 Fed,2221
第45卷第1期
2221年2月
文章编号：2299-5389（2221）01-0082-05
基于HTML5的云南气象APP系统设计与实现
杨俊萍，张忠勇，符世钢
（云南省气象信息中心，云南昆明650234）
扌商要：为了能够实时为各政府部门提供个性化、可视化的天气趋势服务和预警灾情信息，提出建设手机APP系统。采用MVC架构，使用HTML5技术的多种新特性和跨平台特点构建系统。首先根据业务需求设计出整体功能框架；然后分析该框架中数据的来源、功能模块设计、客户端的展示；最后总结出系统使用HTML5技术的适合性、运行以来的应用效果以及下一步系统的完善优化，力求更好更快地提供权威性的天气信息。
关键词：HTML5;APP；云南气象
中图分类号:TP317文献标识码：B
Desifn and Implementation of Yunnan Metecralogicsd
APP Platform Based on HTML5
YANG Junning,ZHANG Zhonyyony,FU SSigang
(Yunnan Meteorological Infonnation Center,Kunming650032,China)
Abstract:Nn orker to proviPe personaUzeX and visualized weather trend service and disaster warning 111)^31100for povemmext Uexanmexts in real lime,the oWbUshmot of modile pPone APP system is pmposO. The system adopts MVC architecture and uses mpy new features and cross-platWrm features of HTML W c U i/O ovc.FOstly,the pper designs the whole fanctWnP Oamework according to the busUos requirements. Then,it analyses the data source,function module design and client Uisplay.FUPly,it summanzes the suitability of the system using HTML Wchnology and the next step of system optimization and stove to proviPe better abthodtaUve weather infonnation.
Key worit:HTML5；APP；Yunnan mOomlogy
2引言
随着气象信息化发展的推进，将地面气象观测资料、雷达和卫星等监测数据、数值预报、格点预报数据进行分析制作出各类服务产品，为气象服务提供方向性、决策性的指导。气象预报、气象预警、气象灾情信息的共享为各部门领导决策是否响应应急响应启动决定一环［］。为实现气象与环保、水利、消防、地震等部门合作，解决气象信息的共享性、及时性、全面性。云南省启动了智慧气象支撑平台的项目建设。
随着手机越来越智能化，网速的加快，功能的强大，各式各样的APP客户端随之而生，数量繁多，类型不一。云南省气象局主动顺应科技发展规律，合理使用新技术，在成本最小化的同时把气象信息以人们熟知的多元化服务产品呈现在移动终端。我们本着这个理念，借助“互联网+平台”，设计并研发了云南气象APP系统。利用APP第一时间向用户发布气象信息［］。各部门领导均能准确无误随时随地接收到信息，不会因时间或空间的变化而
收稿日期：2220-21-22
第一作者简介：杨俊萍（276—），女，硕士，畐y高，主要从事软件开发和资料存储工作,E-mPOp_pU_m8789@Piyun。资助项目：云南省气象局项目（TQ221727）：云南气象资讯（决策版）APP系统。
•8°•
Vol.05No.1杨俊萍，等：基于HTML5的云南气象APP系统设计与实现
。
1云南气象APP的需求分析
搭建云南气象APP系统，以图文并茂、0昜的表现形式实时为提供随时间发生、发及演变过程的天气。可以用图片动画或地理信息系统，迅速发布最新气象信息。可以文本、图表、列表或图像气象服务，极大地丰富了气象现形式。将系统的业务需转换为功能需求如表3实现功能需求。
按照系统建设的需求，整个业务有个清晰的规划，再结合APP系统的特点，整体设计思路，如系统功能框架图1从图中明确看出信息从哪
什么，提供些用户。建为功能清晰、实用、性能强的云南气象APP系统。
2气象APP数据来源
随着气象探测的增加，全国建地基、空相结合、、全、布局基本合理的综合观测系统⑶。云南省地面
观测网已经建成445个国家地气站,664个国家级区域站5055个省级区域站2个GPS/MET水汽站、3个大气本站。高空观测网5个高空探空站、2部风廓、1个三维闪电站、0部）。同时明2213年建设了气象风云4A，祥云风云三号卫星接收站。气象信能力在提升⑷，观测业务体系在不断完善。标准格式的台站一省级一中国局传输，处理2服务程不。使得资料更多样化、更全面、更及时。由CMACAST下发全国观测中气象局加后的2智能网，汇省级CIMISS服务器。
自主研发的天气模式系统，比如：GRAPES软、智能网、Micaps4l，对多尺度气象
地理信息按时间、空间分布规律组织为不同的分析多种多类的标准化专业预报、0放到省级文件服务器J］。
表9系统功能需求
Tab.3System fu/ctio/requiremert table
功能现的内容现式资料源
实况温度、降水表格、实况分布图CIMISS服务器卫星、雷达图片滚动文件服务器预报南未来3d的云南为的预报趋势图文服务器定位城市的天气预报气象图标CIMISS服务器预警县、州（市）、省级地理信息站点标记+文述APP数据库灾情具体地理信息站点标记+文述APP数据库环境空气质量指数环状图Or
acle数据库AQI变折线图Oracle（库环境空气质量指数分布地理信息站点标记+文字描述Oracle数据库综合告、0+文APP库
（文件服务器、HTTP
请求
W--------
（APP数据库］
WEB管理后
台
管
理
系
统
JSON
和
数组
—
—>
DOC
JPG
——>
云南气象APP系统
云
南
移
动
客
户
端
APP
图1系统功能框架
Fig.1System fu/cPoo frame diayram
：客户端；
：用户：
I
；
气象局:
；省政府；
；应急办;
!3S©T；
!环術■
：水利厅：
!…
…'
・81
•
中低纬山地气象
MU-Uw Latitude Mountain Meteoroloyp
2021年2月451
8系统技术架构
手机APP系统采用典型的MVC(Model-View -ContmVer模型一一器)框架。将M和V 的代码分离，就是在Controller里Model的
赋Vow】6。在开发中，服务器只计算和传送，而不元素进行任何，客户则请收，并负的展示。这样操显示进行代码分离，各司其责，互不涉，松散耦合，更容发、维测试［］。服务器用Java语言开发3用Dclond平台的HBuilder快应用的开发工具，使用HtwU+Java ScUpt+CSS3语言，生成Android安卓和INS苹果两个系统的客户端版本。系统架构如图2o
4关键技术实现
4.3HTML5技术选择
①HTML5+Javagcnpl+CSS3语言开发对An-UrVd、IOS系支持，只次开发就能进入所有器进行分发，不需要为了适应不同系统的
器而多次开发。
维
护
与
保
障
服
务
体
系
图2系统架构
Fig.3System architecture
②利用HTML5Wed Storage API技术可以将数
本机的只器(ROM)中，把气象
进行级别的本地(session SWrape)，像客户的库，关闭APP(或标)后就.。
在；把地理位置的空间数据永久性的本地(Ucal Storage)，数据是永远不的3在客户端本地，再次打开时立即恢复，大大减轻服务器的压力。空间使用二进，有效降低文件大小，减少网络上传的量。
③利用HTML5开发APP，数据传输快，实现迅
•82•速；交互体。在实况模块显示N小时降水，多次访问或调用计好而不再发生变的。
④使用API调用地图信息。无需安装额外的插
，仅依器本身就可从网上获取。鼠标划到里就加载里，灵活地缩放地图。还采用嵌入LBS(基于位置的服务Location Based Semice)功能，借助APP的外位方式(如GPS)获取手机用户的位置信位当地的7U天气。
4.4应用程序编程接口技术
①高德地图API(Application Programming Inter-face)是一套JavaPcdpt语言开发的地用编程，在网站或中构建功能丰富、8'生强的地用程序。调用并加载地图，设置默的中心点、显示模式、边界函。在允许的下调用定位功能，将坐标格式转好的气象站位到地图位置后3气象信息以Canvas；加到地图上3地图的I、旋转、缩放级别而自适应，不位置。用户可以地理位置上的气象服务产品，极大地富气象现的式。
②气象数据统一服务接口(MUSIO:Meteomlogi-cul Unified Semice Intedace Community)技术。MUSIN：省的(CIMISS)，面向气象业务，提供全标准、丰富的访问服务用编程接口(APS)，为国、省、地、县各级用系统提供唯威的服务。CIMISS 管理的所有资料，均访问提供服务，目前包括：地面资料23种、高空资料21种、海洋资料4种、辐射资料3种、农气资料22种、数值模式39种、大气成分2种、雷达资料10种、卫星资料159种、服务产品17种、台站信息等［］。
4.3实现APP中的特效技术
①表格显示结构化气象的特:JQuem是JavaScdpt的一■个函数库。Ajax(Asypchronons Java Scdpt and XML)是JavaPcdpt的一个应用方向，负责译用户界面及与服务器之间的［］。Ajax以异式按需取，减的取量，无
。JQuem插Ajax结合以表；式显示温度和降水资料3JavaPcdpt异步访问服务器端的JSON(JavaScdpt Object Notation)数，不断地组显示给用户。特点1为表格的表，内容，特点2为把表头的列标题按钮，点击不同列标题，相应列的内容会进行，再次点击，而不需
加
Vol.05No.1杨俊萍，等：基于HTML5的云南气象APP系统设计与实现
载整个网页，只列的内容进行。
②特效显示卫星的特：基于JQuerg和CSS3（Cascading Style Sheet3层叠样式表）的插件。这的设计自：放最近1时次的一系列卫星图片或，图片在换的时候带的特效，现了从静的变化。另外配明使外框呈现3D的效果，显立体大气。
③显示天气指数的特:HTML5利用Canvas画布组，就JavaScPpt 本，效果好速，不需要dash插现。的时加特效，然后传的比例参组2力卩，动
，并且带滑地连果。
④环形图显示环境指数的特：1chaSjs是一款基于HTML5的图形库插件。加载并引入IchaSjs中所需的js文件即可，不依赖任何其他库。构成代码量少，完全独立的轻量级JS组件。使用纯JavaS-cdpt语言，按照污染等级多例划分，利用HTML5的Canvas标签绘制带有不同颜的2D，然后绑定API取出的指数JSON格式中心，最后加入JavaScPpt效果，组成简单、直观、动态的 果。
5功能模块设计实现
5.1数据采集系统
FTP、接口或JDBC方式是从不同的服务器中收集气象。的接收频次进行多次定时。从文件服务器取出，同时对文校标准，整规的APP标准格式并实时同APP服务器中，提供调用［0］。从库中的力卩生成地服务器、列表、需的JSON式
，等待。流程框图如图3。
图3数据采集流程框图
Fig.3Data acquisitio”Cow chart 5.9后台管理系统
后台简单易用。如图4所示业务功能划分了4个管理模块以及多个子功能模块。从业务逻辑上分析，注册用录份后，根据各自级别的记录信息进行增加、删除、修改、查
。信息的内容、气候公报、预警、预报。信式文字。后台管理模块、安全、稳定。
图4后台管理功能图
Fig.4Bacayround manayemert fu/ctio/chart
5.3数据库设计
后台管系库，的多功能都像库管理系统，采用了规的设计、结构较简单、数据关系明确、执行效率高的MYSQL数据库。为用户分配一个角，再为角分配，在该角下面建立账号。同时为主库表建立DES算法的DAC访问控
，防止库工具对关键记录进行非改2安全。
5.9前端展现模块
界示是利用HtmlC相关的Wef：进行实现的。内容表现形式具有多样。根各类资料的特性，设计出个的显示方式，并速。现如5。
6总结
南气象APP系统在2017年2月开发完成并投入运行，其中进行了3次大的升级。该系统适合Android和IOS系统手机的显示；增强态性，采用视觉等多种手地表达空间现象；页面结构，界面风格简单明了，所有功能一2系；便；系统维减到最小；系，能：量的并发访问。
201年（月4日临沧市永德县发生的4.6级地震；2213年8月1日玉溪市通海县发生的5.2级地震；2218年12日22时市县发生的
•83
•
中低纬山地气象
MU - Uw Latitude Mountain MOeorologp
2021年2月
45
1
17日16时至18日16时降水量
京it ”藏目洽料,
BLUS
责阳
如dl 白施自冷堆”
云南arr 叙局环境保沪厅联合发布
e 西n wfsn
Effigy
环境空nffilffiSi (AQI)分fli
站点
f 0 Li
昆明市区降水
二 ©云南msu 公务腿)
“ii 申b 禅ai 令
“II 中B 禅两
® « e«%K>
山洪奂*
地厲奂富R
昆硝帀凤 I tRi
Os
A0i51tQ»
三 0云南气期(公务版)
二
©云南气级(公务版)
图5页面显示
Fig- 5 Page displap
4.6级地震;2013年汛期中的短时强降水、雷暴、大
风、2 气带来的不利 ，引发多地的
洪、地质
；202年5月1日大
林大
火；2019年2月9日大理州大理市 镇发生的森林 ，云南省气象局及时发布云南省森林火
气象等级 、地 题天气
、农业气象旬
，云南省气象台发布大风、暴雨、大雾、3 導预，特有的权威性的云南省气象信
发布引起
予足够的关 ，以便广大众和
关单位及时、负责、积极地组织好防 及灾
区气象服务。
下 将 信 从全
信息发布
业务平台中提取，取消后台
APPj
库功能,
在此
上 信息进行分 显示。 -
家改革发展的 民对生活的新
需要，下
打算开放用户，提供给所有公众用3
手机，能够准确
所在位置实
时的贴近应用需求的气象信息3
加全面、更加准确、更加及时、更加体贴的气象
服务口2。
参考文献
[1 ]阮水根，李津，韩淑云.气象预警信息效用评估指标及其经济价
值评估研究[J].气象软科学,2213,3:31 -53.
[4]于江，张爱玲，马英洁，等.气象信息服务特点及规范管理方法
J].资源与环境科学，251,3：268 -267.
[8]..我国公共气象服务现状、问题及对策[].青海气象,201,
8(121) ：8 -10.
[4]
唐伟，周勇，董昊，等.促进气象领域人工智能应用的几点思考
J].气象软科学,251,3：35 -363
手机上可以打html与css的app[5] 姜曲王茹琳，王闫利，等.基于Android 的自驾天气手机应用的
设计与实现[].气象科技,201,46(3) ：396 -5123
[6] 星球小霸王 3 mec 和 mvvm 的区别[EB/OL ]. (201 -07 -31).
https ：//^\\^. jiansdu. com/p /bU aabl ffaS68.
J] $书存，程文杰，等.安徽省农业气象服务手机APP 平台设计与
应用[J].气象科技,4213,46(5) ：1055 -10593
J]何文春，徐拥军，王琦等.CIMISS 气象数据统一服务接口简介
[EB/OL]. (2217 - 04 - 1 ). http ：//17. 1. 64. 154/cmaSaxs/
homo/jumpPayc . action ? payeNamc - semiceandsuppodWtoPayc -
sas - xsrm - 8.
J]王光营，耿国华，周明全，等.AJAX 技术在WOGIS 上的应用
J].计算机技术与发展,007,7(6) ：39 -423
[17]李建，郑 ，邓创，等3 网的浙江台风信息发布
系统研发与应用[]•气象科技,2617,25(4) ：254 -260.
J 1杨俊萍，张广通・OpehMediaVaul)存储方案在智能网格预报业
务中的应用J].中低纬山地气象,2713,20(5) ：53 -61.
[14]吕终亮，白新萍，薛峰•基于WEBGIS 的气象服务产品制作系统
J].应用气象学报,2213,22(1) ：122 -1273
[1]杨有林，陈
，王建林，等•宁夏智能化综合气象业务服务共
享管理平台 J].气象,2213,24(7) ：961 -967.
J 4] 丁圣，李刚•通用机场气象服务手机APP 的设计与实现[C ]//
中国气象学会.中国气象学会第33届年会论文集,22133
・84 •
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论