海洋预报移动客户端软件的设计与实现

设计创新TechnologyInnovationandApplication科技创新与应用2021年14期海洋预报移动客户端软件的设计与实现*於乐1，刘爱超1，钱程程1，于清溪2，于斐3（1.国家海洋局北海预报中心，山东青岛266061；2.国家海洋局北海信息中心，山东青岛266061；3.中国水产科学研究院黄海水产研究所，山东青岛266700）摘要：随着海洋预报技术和移动互联网的发展，人们对移动端海洋预报信息的需求越来越高，文章提出了海洋预报移动客户端的设计方案，实现为智能移动用户提供准确、及时的海区、渔场和沿海城市等海洋预报和海洋灾害预警报信息。同时软件中融合了GIS技术，使软件的操作界面更友好，人机互动更高效。该海洋预报APP能够提升海洋灾害警报的传播能力，为不灾害预报信息的十分便捷高效的工具。同的受众群体提供全面的海洋预警报信息，同时也是政府部门发布和传播海洋预报、关键词：海洋预报；移动客户端；APP；GIS中图分类号院P731.3文献标志码院A文章编号院2095-2945渊2021冤perproposedadesignplanforthemarineforecastmobileclienttoprovideintelligentmobileuserswithaccurateandtimelymarineforecastsandmarametime,GIStechnologyisintegratedintothesoftware,whichgreatlyimprovestheefficiencyofthemarineinformationtodifferentaudiences,andisalsoaveryconvenientandefficienttoolforgovernmentagenciestoreds:marineforecast;mobileclient;APP;GISAbstract:WiththedevelopmentofmarineforecastingtechnologyandmobileInternet,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这图界面（里地使用见图图可的以Html5），根据技术由于不同底图进行切换。预报要素选项一目了然，预报数据内容简洁清晰，能够及时、准确、便捷、形象、立体地展示北海区沿海城市、渔场和海区的海洋预报数据。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）台风路径：展示当前台风过程路径，功能，可以在这里重新开启，用户关闭软件再次进入时欢和多源预测路径，也可根据年份和编号搜索台风路径。图迎页会再次打开。例是以表格

设计创新TechnologyInnovationandApplication科技创新与应用2021年14期联系我们：用户对于软件有意见或者建议，可以通过这里提交给后台，后台会以表单的形式将用户的留言信息反馈到管理员邮箱。检查更新：根据后台返回的版本信息，判断当前应用是否有新版本。用户打开应用时如果有新版本会提示用户升级，用户可以根据需要选择。33.1关键问题解决图由于网络片类数据采压缩集的优图化片比较大，在手机端展示的时候不仅会出现卡顿的现象，还会耗费用户的流量以及占用手机的内存空间，从而造成用户体验度下降。虽然压缩都是有损的，但我们可以通过减少quality的方式，比如100%的quality与80%的quality，用户感观上基本一样，但是体积却可以减少30%以上，比如6K的。如表2图所片，示会。到4K左右，整体平均速度得到有效提升表2图片数据对比 压缩前 压缩后

图片数量 24张 24张

图片大小 300k/张 200k/张

加载时间 1.5s 0.5s

3.2地

根理据信息缩放底等图层级显级示选择或隐藏及加markers载速度，优图层化显示的大小跟缩放等级相关，等级缩小到一定程度后，图层分辨率就会缩小，出现图层压盖等情况，缩放到最小隐藏图层，等级越大，图层就越小，图层变大，根据m4结束语进行缩放显示。间的距离也会能够及时、准确、便捷、形象、立体地展示北海区近海海域海洋环境现状和预报及警报信息是我们团队一致的工作目标。海洋预报移动客户端可以随时随地获取海洋-106-环境信息资源，对于提高海洋决策指挥能力，最大限度地减轻可能造成的损失、保障人民生命财产安全，具有重要的意义。参考文献院[1][2]中中华国人互联网民共和络国自然资源部信息中心.第46.2019次中年国中互联网国海洋灾害络发展公状况统报[Z].2020.[R].2020.计报告[3]MARTINfutureMJ，BALMASEDAM，BERTINOL，Operationalofdata[4]OliveiraOpen-AccessAOceanographyassimilationinoperationaloceanography[J].Journalandof，AppRodrigues，forSharingM2015，Rogeiro，8（sup1）CoastalJ：，astSInformation：AnManagementfortionaland[5]M，SpringerRecreation[C]//InternationalHarrison，ChamMJ，，2019ConferenceonComputa原Pacanowski：[6]仉天宇toMOM4[J].，王斌.海洋预报，，2004etal.（5A）：cal果管理与研究，2019（4）：52-53.综合信息系统（MiFSIS）研究应用[J].科技成[7]生气象论坛王晓春.区文域集海洋预报及，2014.应用[C]//第六届海峡论坛2014年两岸民[8]基卢扬于《海洋预报，黎鑫，石岭琳》近十年.我国文献海洋预报技术发展计量分析[J].海洋前科学沿热点前沿，与2018趋势，研究5（2）-：48-56.[9][D].孙造诣.手机App用户[10]杭州心理需求结构及其跨场景需求稳定性探究脑知识许溜溜：浙江大与技术，.基于学2020HBuilder，2019.，16（10快速）：74-75.开发移动端APP的设计与实现[J].电2010.[11]孙云潭.中国海洋灾害应急管理研究[D].青岛：中国海洋大学，[12]和对龚茂策[J].珣海洋，戴文开娟发，与管理陈靓瑜，，2019等.海洋，36（防10灾）：减8-11.灾信息共享的现状、问题北京[13]冯思：北京成交.基通大于智能移动学，2014.平台的“我的海洋预报台”的设计与实现[D].

本文标签： 数据 海洋 预报 展示 用户