基于HTML5的云南气象APP系统设计与实现

第45卷第1期2221年2月中低纬山地气象MU

-

Uw

Latitude

Mountain

MeteoroloypVol.

45

No.

1Fed,2221文章编号：2299

-5389（2221）01

-0082

-05基于HTML5的云南气象APP系统设计与实现杨俊萍，张忠勇,符世钢（云南省气象信息中心，云南昆明650234）扌商要：为了能够实时为各政府部门提供个性化、可视化的天气趋势服务和预警灾情信息，提出建设手机APP系统。

采用MVC架构，使用HTML5技术的多种新特性和跨平台特点构建系统。首先根据业务需求设计出整体功能框架;然后分析

该框架中数据的来源、功能模块设计、客户端的展示;最后总结出系统使用HTML5技术的适合性、运行以来的应用效果以及

下一步系统的完善优化,力求更好更快地提供权威性的天气信息。关键词：HTML5;

APP

；云南气象中图分类号:TP317文献标识码：BDesifn

and

Implementation

of

Yunnan

Metecralogicsd

APP

Platform

Based

on

HTML5YANG

Junning,

ZHANG

Zhonyyony,

FU

SSigang(Yunnan

Meteorological

Infonnation

Center,

Kunming

650032,

China)Abstract:

Nn

orker

to

proviPe

personaUzeX

and

visualized

weather

trend

service

and

disaster

warning

111)^31100

for

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

WcUi/Oovc.

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

betterabthodtaUve

weather

worit:

HTML5

；

APP

；

Yunnan

mOomlogy2引言随着气象信息化发展的推进,将地面气象观测

资料、雷达和卫星等监测数据、数值预报、格点预报

平台的项目建设。随着手机越来越智能化，网速的加快，功能的

强大，各式各样的APP客户端随之而生，数量繁多,

类型不一。云南省气象局主动顺应科技发展规律,

合理使用新技术，在成本最小化的同时把气象信息

数据进行分析制作出各类服务产品,为气象服务提

供方向性、决策性的指导。气象预报、气象预警、气

以人们熟知的多元化服务产品呈现在移动终端。

象灾情信息的共享为各部门领导决策是否响应应

急响应启动决定一环［］。为实现气象与环保、水

利、消防、地震等部门合作，解决气象信息的共享

性、及时性、全面性。云南省启动了智慧气象支撑

我们本着这个理念,借助“互联网+平台”，设计并

研发了云南气象APP系统。利用APP第一时间向

用户发布气象信息［］。各部门领导均能准确无误

随时随地接收到信息，不会因时间或空间的变化而收稿日期：2220 -

21

-22第一作者简介:杨俊萍（276—），女，硕士，畐y高，主要从事软件开发和资料存储工作,E

-mPOp_pU_m8789@Piyun.

com。

资助项目：云南省气象局项目（TQ221727）：云南气象资讯（决策版）APP系统。•

8°

•

Vol.

05

No.

1杨俊萍，等:基于HTML5的云南气象APP系统设计与实现。的综合观测系统⑶。云南省地面观测网已经建成

445个国家地

1云南气象APP的需求分析搭建云南气象APP系统，以图文并茂、0

昜

的表现形式实时为

气站,664个国家级区域站5

0555个高空探空站、2部风个省级区域站2个GPS/MET水汽站、3个大气本

站。高空观测网

提供随时间发生、发廓

、1个三维闪电站、0部）

。同时及演变过程的天气

。可以

用图片动画或地理信息系统，迅速发布最新气象信息。可以

明2213年建设了气象风云4A,祥云风云三号卫

星接收站。气象信

能力在

提升⑷，文本、图表、列表或图像

大地丰富了气象

气象服务

，极观测业务体系在不断完善。

标准格式的现形式。将系统的业务需功能需求。体设计思路,台站一省级一中国局

时。由CMACAST

传输，处理2

服务中转换为

功能需求如表3实现

程不

。使得资料更多样化、更全面、更及

按照系统建设的需求，整个业务有个清晰的规

划,再结合APP系统的特点，整

什么，提供

下发全国观测

2

气象局加

后的

智能如系统功能框架图1从图中明确看出信息从哪

些用户。建

为网

，汇

省级CIMISS服务器。模式系统，比如：GRAPES软自主研发的天气

功能清晰、实用

、性能强的云南气象APP系统。、智能网

、Micaps4l

，对多尺度气象2气象APP数据来源随着气象探测

地理信息按时间、空间分布规律

的增加，全国建

地基、组织为不同的

准化专业预报、0

分析

多种多类的标放到省级文件服务器J］。空

相结合、、

全、布局基本合理表9系统功能需求现式表格、实况分布图图片滚动云南为

的预报趋势图气象图标地理信息站点标记+文

述地理信息站点标记+文

述环状图折线图地理信息站点标记+文字描述+文Tab.

3System

fu/ctio/

requiremert

table功能实况预报预警灾情环境综合现的内容温度、降水卫星、雷达南未来3

d的定位城市的天气预报县、州（市）、省级具体空气质量指数AQI变环境空气质量指数分布告、0资料源CIMISS服务器文件服务器文

服务器CIMISS服务器APP数据库APP数据库Oracle数据库Oracle

（库Oracle数据库APP

库云南气象APP系统（文件服务器、HTTP请求W--------（APP数据库］后台管理系统:客户端；:用户：JSON和

数组

—>—云南移动客户端APPI;气象局:

；省政府；

；应急办;WEB管理!

3S©T

；DOCJPG

—>—!环術■

:水利厅：

!……'图1系统功能框架Fig.

1

System

fu/cPoo

frame

diayram・81

•

中低纬山地气象2021年2月MU

-

Uw

Latitude

Mountain

Meteoroloyp45

18系统技术架构手机APP系统采用典型的MVC

(

Model

-

View

-ContmVer模型一

速;交互体

。在实况模块显示N小时降水,计好而不再发生变多次访问或调用

的。④使用API调用地图信息。无需安装额外的插

一

器)框架。将M和V的代码分离,就是在Controller里

Model的赋

Vow】6。在开发中，服务器只

计算和，仅依

里就加载

器本身就可从网上获取。鼠标划到里，灵活地缩放

地图。还采传送，而不

则请

收

元素进行任何

，并负

，客户用嵌入LBS

(基于位置的服务Location

Based

Semice)

功能，借助APP的外

的展示。这样操测试［］。服务位方式(如GPS)获取手机显示

进行代码分离，各司其责，互不用户的位置信

位当地的7U天气

。涉，松散耦合，更容

器

发、维

4.4应用程序编程接口技术①

高德地图

API

(

Application

Programming

Inter-face)是一套JavaPcdpt语言开发的

用Java语言开发3

用Dclond平台的HBuilder快应用的开发工具，使用HtwU

+

Java

地

用编ScUpt

+

CSS3语言，生成Android安卓和INS苹果两

程，在网站或

中构建功能丰富、8

'生个系统的客户端版本。系统架构如图2o强的地

用程序。调用并加载

地图，设置默4关键技术实现4.

3

HTML5技术选择的中心点、显示模式、边界函

的

下调用定位功能,将坐标格式转

Canvas

；

。在允许好I、的气象站

位到地图位置后3

气象信息以

加到地图上3

①HTML5

+

Javagcnpl

+

CSS3

语言开发对

An-

UrVd、IOS系

地图的

支持，只

次开发就能进入所有旋转、缩放级别而自适应，不

以

位置。用户可器进行分发,不需要为了适应不同

器而多次开发。系统的地理位置上的气象服务产品，极大地②

气象数据统一服务接口(

MUSIO

:

Meteomlogi-富

气象

现的

式。cul

Unified

Semice

Intedace

Community)技术。MU­维护与保障服务体系SIN

:

省

的

(CIMISS),面向气象业务

，提供全

威的

标准、丰富的

访服务。CIMISS问服务

用编程接口

(APS),为国、省、地、县各级用系统提供唯

管理的所有资料，均

访问

提供服务，目前包括:地面资料23种、高空资料21种、海洋资料

4种、辐射资料3种、农气资料22种、数值模式39

种、大气成分2种、雷达资料10种、卫星资料

159种、服务产品17种、台站信息等［］。图2系统架构Fig.

3

System

architecture4.3实现APP中的特效技术①表格显示结构化气象

的特色:JQuem是②

利用HTML5

Wed

Storage

API技术可以将数本机的只

进行

JavaScdpt

的一■个函数库。Ajax

(

Asypchronons

Java

器(ROM)中,把气象(session

SWrape),像客户Scdpt

and

XML)是JavaPcdpt的一个应用方向，负责

级别的本地

译用户界面及与服务器之间的

异

式按需取

［］。Ajax以取量，无；JavaPcdpt异步的

库，关闭APP(或标

)后

就

.。，减

的

在;把地理位置的空间数

。JQuem插

式显示温度和降水资料3

Ajax结合以表

据永久性的本地

的3

(Ucal

Storage)，数据是永远不在客户端本地，再次打开时立访问服务器端的

JSON(

JavaScdpt

Object

Notation)数

即恢复，大大减轻服务器的压力。空间

使

，不断地

的表

，内容

组显示给用户。特点1为表格用二进

，有效降低文件大小，减少网络上传，特点2为把表头的列的

量。标题

进行

按钮，点击不同列标题，相应列的内容会，再次点击

③

利用HTML5开发APP,数据传输快,实现迅，而不需

加•

82

•

Vol.

05

No.

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.

3

Data

acquisitio”

Cow

chart5.9后台管理系统后台简单易用。如图4所示

业务功能划分

了4个管理模块以及多个子功能模块。从业务逻辑

上分析，注册用

录

份后，根据各自级别的记录信息进行增加、删除、修改、查

。信息的内容

、气候公报、预警、预报。信

式

文字。后台管理模块

、安全、稳定。图4后台管理功能图Fig. 4

Bacayround

manayemert

fu/ctio/

chart5.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

•

中低纬山地气象2021年2月MU

-

Uw

Latitude

Mountain

MOeorologp“ii申b禅ai令45

“II中B禅两® «

e«%K>1昆明市区降水二

©云南msu公务腿)三

0云南气期(公务版)凤

ItRi二

昆硝帀▼©云南气级(公务版)地厲奂富山洪奂*17日16时至18日16时降水量f

0

Li环境空nffilffiSi

(AQI)分fliR站点BLUS京it”藏目洽料,责阳如dl白施自冷堆”PMioOse西nwfsn

Effigy云南arr叙局环境保沪厅联合发布A0i51tQ»图5页面显示Fig-

5

Page

displap4.6级地震;2013年汛期中的短时强降水、雷暴、大

[4]于江，张爱玲，马英洁，等.气象信息服务特点及规范管理方法

J].资源与环境科学，251,3：268

-267.风、2

洪、地质

气带来的不利

，引发多地的林大；202年5月1日大

[8]..我国公共气象服务现状、问题及对策[].青海气象,201,

8(121)

：8

-10.[4]

火；2019年2月9日大理州大理市

镇发生的森、农业气象旬導预发布引起唐伟，周勇，董昊，等.促进气象领域人工智能应用的几点思考

J].气象软科学,251,3：35 -363林

，云南省气象局及时发布云南省森林火气象等级

、地

题天气

[5]

姜曲王茹琳,王闫利，等.基于Android的自驾天气手机应用的

，云南省气象台发布大风、暴雨、大雾、3

，特有的权威性的云南省气象信

设计与实现[].气象科技,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

-10593J]何文春，徐拥军，王琦等.CIMISS气象数据统一服务接口简介

关单位及时、负责、积极地组织好防 及灾区气象服务。下

将

信

从全

信息发布库功能,[EB/OL].

(2217

-

04

-

1

).

http：//17.

1.

64.

154/cmaSaxs/

业务平台中提取，取消后台

在此

APPj

homo/jumpPayc.

action

?

payeNamc

-

semiceandsuppodWtoPayc

-

上

信息进行分

显示。

-sas

- xsrm

-

8.J]王光营，耿国华，周明全，等.AJAX技术在WOGIS上的应用

J].计算机技术与发展,007,7(6)

：39

-423家改革发展的

需要，下

3

民对生活的新所在位置实打算开放用户，提供给所有公众用手机，能够准确

[17]李建，郑

，邓创，等3

网的浙江台风信息发布系统研发与应用[]•气象科技,2617,25(4)

：254

-260.J1杨俊萍，张广通・OpehMediaVaul)存储方案在智能网格预报业

时的贴近应用需求的气象信息3

加全面、更加准确、更加及时、更加体贴的气象

服务口2。务中的应用J].中低纬山地气象,2713,20(5)

：53

-61.[14]吕终亮，白新萍，薛峰•基于WEBGIS的气象服务产品制作系统

J].应用气象学报,2213,22(1)

：122

-1273[1]杨有林，陈

参考文献[1

]阮水根，李津，韩淑云.气象预警信息效用评估指标及其经济价

值评估研究[J].气象软科学,2213,3:31

-53.，王建林，等•宁夏智能化综合气象业务服务共享管理平台

J].气象,2213,24(7)

：961

-967.J4]

丁圣，李刚•通用机场气象服务手机APP的设计与实现[C]//

中国气象学会.中国气象学会第33届年会论文集,22133・84

•