admin管理员组文章数量:1530870
2024年7月2日发(作者：)
设计创新
TechnologyInnovationandApplication
科技创新与应用
2021年14期
海洋预报移动客户端软件的设计与实现
*
於乐
1
，刘爱超
1
，钱程程
1
，于清溪
2
，于斐
3
（1.国家海洋局北海预报中心，山东青岛266061；2.国家海洋局北海信息中心，山东青岛266061；
3.中国水产科学研究院黄海水产研究所，山东青岛266700）
摘要：随着海洋预报技术和移动互联网的发展，人们对移动端海洋预报信息的需求越来越高，文章提出了海洋预报移动
客户端的设计方案，实现为智能移动用户提供准确、及时的海区、渔场和沿海城市等海洋预报和海洋灾害预警报信息。同时软
件中融合了GIS技术，使软件的操作界面更友好，人机互动更高效。该海洋预报APP能够提升海洋灾害警报的传播能力
，
为不
灾害预报信息的十分便捷高效的工具。
同的受众群体提供全面的海洋预警报信息，同时也是政府部门发布和传播海洋预报、
关键词：海洋预报；移动客户端
；
APP；GIS
中图分类号院P731.3文献标志码院A文章编号院2095-2945渊2021冤14-0102-05
perproposedadesignplanforthemarineforecastmobileclienttoprovideintelligent
mobileuserswithaccurateandtimelymarineforecastsandmarinedisasterpre-warninginformationforseaareasandcoastal
ametime,GIStechnologyisintegratedintothesoftware,whichgreatlyimprovestheefficiencyofthe
marineinformationtodifferentaudiences,andisalsoaveryconvenientandefficienttoolforgovernmentagenciestorelease
anddisseminatemarineforecastanddisasterforecastinformation.
Keywords:marineforecast;mobileclient;APP;GIS
Abstract:WiththedevelopmentofmarineforecastingtechnologyandmobileInternet,itisagrowingdemandformobile
ineforecastAPPcanimprovethedisseminationabilityofmarinedisasterwarnings,providecomprehensive
《
2019年中国海洋灾害（MiFSIS）研究应用
”
。开展了海洋预报信息化方面的理论据2020年4月30日发布的
公报》统计，各类海洋灾害共造成直接经济损失117.03
亿元。其中，风暴潮灾害损失116.38亿元；海浪灾害损失
0.34亿元，死亡（含失踪）22人。在如此大的环境下，国家
和人民对海洋防灾减灾服务的需求日趋增长，而及时提
供准确的海洋预警报数据是防灾减灾的重中之重
。
据2020年4月发布的第45次《中国互联网络发展
统计：
状况统计报告
》
截至2020年3月，我国手机网民规
模达到8.97亿，网民使用手机上报的比例为99.3%。
监测，
本着加强北海区海洋使用状况监视、提高海洋
信息管理科学化、规范化水平的目的，为了各级环境预报
Android系统、可扩展的综合海洋信息化移动服务平台。
1国内研究现状分析
部门能实时掌握海洋信息资源
，
就此设计一套基于iOS和
探索和技术攻关
，
研发了大规模、长时间的业务化应用的
海洋预报综合信息系统。国家海洋局南海预报中心从实
际工作出发，开发了一套以.NET为平台采用C#编程语
言和Oracle数据库
，
并结合了AJAX技术开发的产品
，
该
人机交互性高，
系统拓展性强、任务分工明确
、
是一套可
以提高工作效率和预报质量的海洋预报系统。
海洋预报系统在海洋模式分辨率和复杂性等方面都在
不断改善，并采用更准确的数据同化方案，提供近实时的全
球海洋预报产品
，
但准确、及时的海洋预报产品目前还停留
（
APP）在电脑屏幕上
，
海洋预报移动客户端少之又少
，
涉海
企业、渔民、游客等大众想要随时随地查询海洋预警报信息
是十分不方便的，因此本文提出了海洋预报移动客户端的
及时的海区、渔
设计方案
，
实现为智能移动用户提供准确
、
2系统设计与技术实现
场和沿海城市等海洋预报和海洋灾害预警报信息。
本文设计的海洋预报移动客户端分为数据服务端和
近些年来
，
国内应用新的技术和工具
，
一直在探索开
发海洋预报系统。2013年国家海洋环境预报中心自主研
发了我国第一个全球范围的大洋数值预报系统，预报时
效为7天。由国家海洋环境预报中心牵头
，
多单位共同承
担了海洋公益性科研专项“海洋预报综合信息系统
手机客户端展示查询两大部分
，其中数据服务
端在服务
客户端部署在
器端
，
完成数据的获取、存储、处理和发布。
*基金项目院国家自然科学基金青年基金渊编号院41906182冤曰北海分局海洋科技项目渊编号院2018B07冤
（
1989-）作者简介：於乐，女，学士，助理工程师，研究方向：海洋预报相关计算机软件开发与管理
。
-102-
2021年14期
TechnologyInnovationandApplication
科技创新与应用
设计创新
移动客户端上
，
支持Android和iOS操作系统，符合现在
市面上绝大多数手机系统，可以通过扫码或者在应用商
2.1架构选择
城下载更新
，
完成数据的调用与展示
。
软件兼容和拓
首先
，
我们对于多种框架的开发成本、
展能力等方面的对比，如表1所示。
最终系统的前端架构选择了uni-app框架
，
uni-app
是DCloud出品的新一代跨端框架
，是
目前跨端数最多的
框架之一
，
拓展能力强
，
封装了H5+，支持nvue，一套代码
可以同时生成iOS、Android两个版本，后期也只需要维护
uni-app使用HBuilderX进行开发，HBuilderX对于vue语
一套代码
，对
前端开发人员比较友好
，学
习成本比较低
；
使用
HBuilderX进行开发法等支持可以说是比较全面了
。
可以提高开发速度。同时我们选择了三层架构（见图1）的
设计理念将整个业务支撑起来
。三层结构并不是
.NET的
独门设计，也不是单一应用在数据库上的结构
，
它是一种
可以适应较多应用的架构设计理念
。
我们使用三层结构的
主要意义在于使项目结构更清楚，分工更明确，有利于后
期的维护和升级。可以降低层与层之间的依赖
，
这说明将
应用程序划分层次
，
会带来其执行速度上的一些损失。
开
发人员可以只关注整个结构中的某一层
，
从团队开发效率
角度上来讲可以有效地提高团队协作的默契。
2.2开发环境
前台：开发工具：HBuilderX前端开发工具
。
uni-app
图1三层架构
第二部分外部
等时效性较强的数据，随时发布随时更新
。
源预报模块
：台
风路径数据来源于台风数据库
，
天气预
报、卫星云图、天气图、雷达图通过多源采集程序将数据
采集入库
，
再进行处理和展示。台风数据时效性较强
，
检
测到新数据实时更新。其他数据会根据数据源及数据时
2.4后台设计
效进行定时更新
。
手机app和后台通过WebService进行数据交互
。
是开发框架之一
，
uni-app是使用开发所有前端应
用的框架，开发者使用一套代码即可生成到多个平台。
后台：开发工具：VisualStudio2015。VisualStudio
是一套基于组件的软件开发工具和其他技术
，
可用于构
建功能强大、性能出众的应用程序
。
2.3数据来源
海洋预报移动客户端软件数据源分为两个部分。第
WebService通过web的方式向外界提供接口库API，使
得外部程序和应用能够通过标准化的方法和结构进行友
好调用，为跨平台的数据交换和内部多业务的集成提供
了通用机制（见图2）。
“
联系我们
”
用户在使用过程中可以通过功能将意见
或建议进行反馈。用户直接把留言内容填入图3的输入
框内，另外需要填写联系人邮箱，以便于管理员进行信息
回复
，
点击发送之后
，
用户的留言会通过后台发送至管理
一部分常规预报模块
：
数据来源于北海预报中心的预报
警报
数据。常规预报数据每天根据设定的时间进行更新
。
表1软件开发成本/后续维护成本
框架
对比项
代码成本
学习成本
开发速度
拓展能力
维护代码成本
地图引用
显示策略
uni-app
一套代码可以同时生成iOS，Android。
对前端开发人员比较友好，学习成本较低。
使用HBuilderX进行开发可以提高开发速度。
拓展能力强
只需维护一套代码，代码较为简单。
内嵌web-view，可自动铺满整个页面，
更改内容时可灵活改变图层内容。
根据缩放等级显示或隐藏markers，
根据m进行缩放显示。
原生框架 Native App Hybrid App混合模式
一套代码可以同时生成iOS，Android。
对前端开发人员比较友好，学习成本较低。
开发速度中等
部分拓展
只需维护一套代码，代码较为繁琐。
引用map地图，调用Html页面，更改内容时
可灵活改变图层内容。
调用Html，对map地图进行缩放，缩放级别
影响图层显示效果。展示分辨率一般。
需要开发两套app
需要学习专业的开发知识，学习成
本较高
开发速度较慢，开发多套代码。
无法拓展
需要维护两套代码
引用map地图，更改内容时，需要
重新打包。
根据缩放等级显示或隐藏markers。
-103-
设计创新
TechnologyInnovationandApplication
科技创新与应用
2021年14期
图2数据交互
员邮箱。为保证软件运行的安全
，
系统对留言进行了字数
限制
，
每个用户每天最多可以发送5条留言
。
图3“联系我们
”功能
为了方便统计软件的使用情况
，
针对用户的下载量
和功能模块的访问量进行统计
（
见图4）。每次数据访问
都需要通过WebService服务，此数据就是通过对统计接
口
2.5
的
功
被访问
能模块
次数而得出的数据。
2.5.1
应用
启动
启
及
动
欢迎界
时第一次
面模
进
块
入的是启动页，由uni-app的
文件进行启动图的配置
，
根据框架的不同版
-104-
本上传启动图的方式不同
，
安卓手机根据不同的手机分辨
率配置不同尺寸的图片，由于iOS平台自定义storyboard
启动界面
，
iphone手机展示两种模式的分辨率
，
Xcode
辨率的
生
图
成
片
启
，
系
动
统
图
会
，
压缩
自动
上
根
传
据
。
设
@2x
备dpi
和
选择
@3x是
。
适
进
配
入启
不同分
使用
动页
的同时系统会判断网络是否畅通，如果在启动应用的过程
中网络断开或卡顿
，
页面中会弹出网络异常的弹窗
，
提示
网络未连接。如果服务器关闭
，
会提示服务器异常
。
网络正常的情况下，软件会自动跳转至欢迎页面
，
欢
迎页面穿满全屏，并添加“跳过并不再提示”功能，给用户
充分的选择。软件对欢迎页图片是否改变有监控
，
如果用
户选择了不再提示欢迎页
，
当后台欢迎页图片出现更新
时，欢迎页图片会自动显示
，
让用户能在第一时间了解软
件做出的更新。如果软件有更新，也会在第一时间提醒用
户更新
。
2.5.2
进
地
入
图
软件后首先
界面模块
uni-app
实现
，
使用
框架
对map的
展
内
限制
示的是
嵌展
较
示
多
地
。
，
map
这
图界面
（
里
地
使用
见图
图可
的
以
Html
5），
根据
技术
由于
不同
底图进行切换。预报要素选项一目了然
，
预报数据内容简
洁清晰
，
能够及时、准确、便捷、形象
、立体地展示北海区
沿海城市、渔场和海区的海洋预报数据。
2.5.3
由于
菜单
地
界
图
面
上
模
所
块
能展示的内容有限
，所
有的功能选项
都在菜单页展示
，
十个功能项均匀平铺整个屏幕
，
相互之
间上下左右的间隔距离相等（见图6）。菜单页有10大模
块
，
分别是
：
（1）海区预报
：
展示渤海、黄海北部、
中部未来
3天的
波高、波向
、涌向。
（2）预警报
：
显示最近一个月内发布的北海区海浪警
报、风暴潮警报和海冰警报，以Tab的形式进行选项切换
显示不同警报目录
。
（3）城市预报
：
根据软件定位
（
或人工选择
）
自动展示
所在城市
（北海
区沿海城市
）
未来3天的潮汐、
浪高和水
温数据。
（4）天气预报
：
根据软件定位
（
或人工选择
）
自动展示
所在城市
（
北海区沿海城市
）
的实时天气状况和未来5天
的天气预报。
（5）趋势预测：展示当前月份的海浪、风暴潮、海温等
要素的趋势预测
，
月底时展示的是次月数据。
（6）天气图
：
展示日本和韩国发布的预报天气图
，
使
用
，
实现多图播放或切换显
示不同时间段的预报数据。
（7）卫星云图
：
展示中国气象网发布的最近12小时
2021年14期
TechnologyInnovationandApplication
科技创新与应用
设计创新
图4访问量统计
图5首页地图界面
图6菜单页面
的卫星云图，展示策略同天气图。
（8）雷达图
：
展示中国气象网发布的最近6小时的华
北雷达拼图
，
展示策略同天气图
。
2.5.4设置模块
设置模块集成了推送设置提示
、欢迎页面、清理缓
存、联系我们、关于和检查更新功能
。
欢迎页：如果用户在关闭了打开软件显示欢迎页面
（
西太平洋）（9）台风路径
：
展示当前台风过程路径
，
功能
，
可以在这里重新开启
，
用户关闭软件再次进入时欢
和多源预测路径，也可根据年份和编号搜索台风路径。图
迎页会再次打开
。
例是以表格
发表评论