海洋預(yù)報(bào)移動(dòng)客戶端軟件的設(shè)計(jì)與實(shí)現(xiàn)*

於 樂，劉愛超，錢程程，于清溪，于 斐

（1.國家海洋局北海預(yù)報(bào)中心，山東 青島266061；2.國家海洋局北海信息中心，山東 青島266061；3.中國水產(chǎn)科學(xué)研究院黃海水產(chǎn)研究所，山東 青島266700）

據(jù)2020年4月30日發(fā)布的《2019年中國海洋災(zāi)害公報(bào)》統(tǒng)計(jì)，各類海洋災(zāi)害共造成直接經(jīng)濟(jì)損失117.03億元。其中，風(fēng)暴潮災(zāi)害損失116.38億元；海浪災(zāi)害損失0.34億元，死亡（含失蹤）22人。在如此大的環(huán)境下，國家和人民對(duì)海洋防災(zāi)減災(zāi)服務(wù)的需求日趨增長，而及時(shí)提供準(zhǔn)確的海洋預(yù)警報(bào)數(shù)據(jù)是防災(zāi)減災(zāi)的重中之重。

據(jù)2020年4月發(fā)布的第45次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》統(tǒng)計(jì)：截至2020年3月，我國手機(jī)網(wǎng)民規(guī)模達(dá)到8.97億，網(wǎng)民使用手機(jī)上報(bào)的比例為99.3%。

本著加強(qiáng)北海區(qū)海洋使用狀況監(jiān)視、監(jiān)測(cè)，提高海洋信息管理科學(xué)化、規(guī)范化水平的目的，為了各級(jí)環(huán)境預(yù)報(bào)部門能實(shí)時(shí)掌握海洋信息資源，就此設(shè)計(jì)一套基于iOS和Android系統(tǒng)、可擴(kuò)展的綜合海洋信息化移動(dòng)服務(wù)平臺(tái)。

1 國內(nèi)研究現(xiàn)狀分析

近些年來，國內(nèi)應(yīng)用新的技術(shù)和工具，一直在探索開發(fā)海洋預(yù)報(bào)系統(tǒng)。2013年國家海洋環(huán)境預(yù)報(bào)中心自主研發(fā)了我國第一個(gè)全球范圍的大洋數(shù)值預(yù)報(bào)系統(tǒng)，預(yù)報(bào)時(shí)效為7天。由國家海洋環(huán)境預(yù)報(bào)中心牽頭，多單位共同承擔(dān)了海洋公益性科研專項(xiàng)“海洋預(yù)報(bào)綜合信息系統(tǒng)（MiFSIS）研究應(yīng)用”。開展了海洋預(yù)報(bào)信息化方面的理論探索和技術(shù)攻關(guān)，研發(fā)了大規(guī)模、長時(shí)間的業(yè)務(wù)化應(yīng)用的海洋預(yù)報(bào)綜合信息系統(tǒng)。國家海洋局南海預(yù)報(bào)中心從實(shí)際工作出發(fā)，開發(fā)了一套以.NET為平臺(tái)采用C#編程語言和Oracle數(shù)據(jù)庫，并結(jié)合了AJAX技術(shù)開發(fā)的產(chǎn)品，該系統(tǒng)拓展性強(qiáng)、任務(wù)分工明確、人機(jī)交互性高，是一套可以提高工作效率和預(yù)報(bào)質(zhì)量的海洋預(yù)報(bào)系統(tǒng)。

海洋預(yù)報(bào)系統(tǒng)在海洋模式分辨率和復(fù)雜性等方面都在不斷改善，并采用更準(zhǔn)確的數(shù)據(jù)同化方案，提供近實(shí)時(shí)的全球海洋預(yù)報(bào)產(chǎn)品，但準(zhǔn)確、及時(shí)的海洋預(yù)報(bào)產(chǎn)品目前還停留在電腦屏幕上，海洋預(yù)報(bào)移動(dòng)客戶端（APP）少之又少，涉海企業(yè)、漁民、游客等大眾想要隨時(shí)隨地查詢海洋預(yù)警報(bào)信息是十分不方便的，因此本文提出了海洋預(yù)報(bào)移動(dòng)客戶端的設(shè)計(jì)方案，實(shí)現(xiàn)為智能移動(dòng)用戶提供準(zhǔn)確、及時(shí)的海區(qū)、漁場(chǎng)和沿海城市等海洋預(yù)報(bào)和海洋災(zāi)害預(yù)警報(bào)信息。

2 系統(tǒng)設(shè)計(jì)與技術(shù)實(shí)現(xiàn)

本文設(shè)計(jì)的海洋預(yù)報(bào)移動(dòng)客戶端分為數(shù)據(jù)服務(wù)端和手機(jī)客戶端展示查詢兩大部分，其中數(shù)據(jù)服務(wù)端在服務(wù)器端，完成數(shù)據(jù)的獲取、存儲(chǔ)、處理和發(fā)布。客戶端部署在移動(dòng)客戶端上，支持Android和iOS操作系統(tǒng)，符合現(xiàn)在市面上絕大多數(shù)手機(jī)系統(tǒng)，可以通過掃碼或者在應(yīng)用商城下載更新，完成數(shù)據(jù)的調(diào)用與展示。

2.1 架構(gòu)選擇

首先，我們對(duì)于多種框架的開發(fā)成本、軟件兼容和拓展能力等方面的對(duì)比，如表1所示。

表1 軟件開發(fā)成本/后續(xù)維護(hù)成本

最終系統(tǒng)的前端架構(gòu)選擇了uni-app框架，uni-app是DCloud出品的新一代跨端框架，是目前跨端數(shù)最多的框架之一，拓展能力強(qiáng)，封裝了H5+，支持nvue，一套代碼可以同時(shí)生成iOS、Android兩個(gè)版本，后期也只需要維護(hù)一套代碼，對(duì)前端開發(fā)人員比較友好，學(xué)習(xí)成本比較低；uni-app使用HBuilderX進(jìn)行開發(fā)，HBuilderX對(duì)于vue語法等支持可以說是比較全面了。使用HBuilderX進(jìn)行開發(fā)可以提高開發(fā)速度。同時(shí)我們選擇了三層架構(gòu)（見圖1）的設(shè)計(jì)理念將整個(gè)業(yè)務(wù)支撐起來。三層結(jié)構(gòu)并不是.NET的獨(dú)門設(shè)計(jì)，也不是單一應(yīng)用在數(shù)據(jù)庫上的結(jié)構(gòu)，它是一種可以適應(yīng)較多應(yīng)用的架構(gòu)設(shè)計(jì)理念。我們使用三層結(jié)構(gòu)的主要意義在于使項(xiàng)目結(jié)構(gòu)更清楚，分工更明確，有利于后期的維護(hù)和升級(jí)?？梢越档蛯优c層之間的依賴，這說明將應(yīng)用程序劃分層次，會(huì)帶來其執(zhí)行速度上的一些損失。開發(fā)人員可以只關(guān)注整個(gè)結(jié)構(gòu)中的某一層，從團(tuán)隊(duì)開發(fā)效率角度上來講可以有效地提高團(tuán)隊(duì)協(xié)作的默契。

2.2 開發(fā)環(huán)境

前臺(tái)：開發(fā)工具：HBuilderX前端開發(fā)工具。uni-app是開發(fā)框架之一，uni-app是使用Vue.js開發(fā)所有前端應(yīng)用的框架，開發(fā)者使用一套代碼即可生成到多個(gè)平臺(tái)。

后臺(tái)：開發(fā)工具：Visual Studio 2015。Visual Studio是一套基于組件的軟件開發(fā)工具和其他技術(shù)，可用于構(gòu)建功能強(qiáng)大、性能出眾的應(yīng)用程序。

2.3 數(shù)據(jù)來源

海洋預(yù)報(bào)移動(dòng)客戶端軟件數(shù)據(jù)源分為兩個(gè)部分。第一部分常規(guī)預(yù)報(bào)模塊：數(shù)據(jù)來源于北海預(yù)報(bào)中心的預(yù)報(bào)數(shù)據(jù)。常規(guī)預(yù)報(bào)數(shù)據(jù)每天根據(jù)設(shè)定的時(shí)間進(jìn)行更新。警報(bào)等時(shí)效性較強(qiáng)的數(shù)據(jù)，隨時(shí)發(fā)布隨時(shí)更新。第二部分外部源預(yù)報(bào)模塊：臺(tái)風(fēng)路徑數(shù)據(jù)來源于臺(tái)風(fēng)數(shù)據(jù)庫，天氣預(yù)報(bào)、衛(wèi)星云圖、天氣圖、雷達(dá)圖通過多源采集程序?qū)?shù)據(jù)采集入庫，再進(jìn)行處理和展示。臺(tái)風(fēng)數(shù)據(jù)時(shí)效性較強(qiáng)，檢測(cè)到新數(shù)據(jù)實(shí)時(shí)更新。其他數(shù)據(jù)會(huì)根據(jù)數(shù)據(jù)源及數(shù)據(jù)時(shí)效進(jìn)行定時(shí)更新。

圖1 三層架構(gòu)

2.4 后臺(tái)設(shè)計(jì)

手機(jī)app和后臺(tái)通過WebService進(jìn)行數(shù)據(jù)交互。WebService通過web的方式向外界提供接口庫API，使得外部程序和應(yīng)用能夠通過標(biāo)準(zhǔn)化的方法和結(jié)構(gòu)進(jìn)行友好調(diào)用，為跨平臺(tái)的數(shù)據(jù)交換和內(nèi)部多業(yè)務(wù)的集成提供了通用機(jī)制（見圖2）。

用戶在使用過程中可以通過“聯(lián)系我們”功能將意見或建議進(jìn)行反饋。用戶直接把留言內(nèi)容填入圖3的輸入框內(nèi)，另外需要填寫聯(lián)系人郵箱，以便于管理員進(jìn)行信息回復(fù)，點(diǎn)擊發(fā)送之后，用戶的留言會(huì)通過后臺(tái)發(fā)送至管理員郵箱。為保證軟件運(yùn)行的安全，系統(tǒng)對(duì)留言進(jìn)行了字?jǐn)?shù)限制，每個(gè)用戶每天最多可以發(fā)送5條留言。

圖2 數(shù)據(jù)交互

圖3 “聯(lián)系我們”功能

為了方便統(tǒng)計(jì)軟件的使用情況，針對(duì)用戶的下載量和功能模塊的訪問量進(jìn)行統(tǒng)計(jì)（見圖4）。每次數(shù)據(jù)訪問都需要通過WebService服務(wù)，此數(shù)據(jù)就是通過對(duì)統(tǒng)計(jì)接口的被訪問次數(shù)而得出的數(shù)據(jù)。

2.5 功能模塊

2.5.1 啟動(dòng)及歡迎界面模塊

應(yīng)用啟動(dòng)時(shí)第一次進(jìn)入的是啟動(dòng)頁，由uni-app的manifest.json文件進(jìn)行啟動(dòng)圖的配置，根據(jù)框架的不同版本上傳啟動(dòng)圖的方式不同，安卓手機(jī)根據(jù)不同的手機(jī)分辨率配置不同尺寸的圖片，由于iOS平臺(tái)自定義storyboard啟動(dòng)界面，iphone手機(jī)展示兩種模式的分辨率，使用Xcode生成啟動(dòng)圖，壓縮上傳。@2x和@3x是適配不同分辨率的圖片，系統(tǒng)會(huì)自動(dòng)根據(jù)設(shè)備dpi選擇。進(jìn)入啟動(dòng)頁的同時(shí)系統(tǒng)會(huì)判斷網(wǎng)絡(luò)是否暢通，如果在啟動(dòng)應(yīng)用的過程中網(wǎng)絡(luò)斷開或卡頓，頁面中會(huì)彈出網(wǎng)絡(luò)異常的彈窗，提示網(wǎng)絡(luò)未連接。如果服務(wù)器關(guān)閉，會(huì)提示服務(wù)器異常。

網(wǎng)絡(luò)正常的情況下，軟件會(huì)自動(dòng)跳轉(zhuǎn)至歡迎頁面，歡迎頁面穿滿全屏，并添加“跳過并不再提示”功能，給用戶充分的選擇。軟件對(duì)歡迎頁圖片是否改變有監(jiān)控，如果用戶選擇了不再提示歡迎頁，當(dāng)后臺(tái)歡迎頁圖片出現(xiàn)更新時(shí)，歡迎頁圖片會(huì)自動(dòng)顯示，讓用戶能在第一時(shí)間了解軟件做出的更新。如果軟件有更新，也會(huì)在第一時(shí)間提醒用戶更新。

2.5.2 地圖界面模塊

進(jìn)入軟件后首先展示的是地圖界面（見圖5），由于uni-app框架對(duì)map的限制較多，這里使用的Html技術(shù)實(shí)現(xiàn)，使用內(nèi)嵌展示。map地圖可以根據(jù)不同底圖進(jìn)行切換。預(yù)報(bào)要素選項(xiàng)一目了然，預(yù)報(bào)數(shù)據(jù)內(nèi)容簡潔清晰，能夠及時(shí)、準(zhǔn)確、便捷、形象、立體地展示北海區(qū)沿海城市、漁場(chǎng)和海區(qū)的海洋預(yù)報(bào)數(shù)據(jù)。

2.5.3 菜單界面模塊

由于地圖上所能展示的內(nèi)容有限，所有的功能選項(xiàng)都在菜單頁展示，十個(gè)功能項(xiàng)均勻平鋪整個(gè)屏幕，相互之間上下左右的間隔距離相等（見圖6）。菜單頁有10大模塊，分別是：

（1）海區(qū)預(yù)報(bào)：展示渤海、黃海北部、中部未來3天的波高、波向、涌向。

（2）預(yù)警報(bào)：顯示最近一個(gè)月內(nèi)發(fā)布的北海區(qū)海浪警報(bào)、風(fēng)暴潮警報(bào)和海冰警報(bào)，以Tab的形式進(jìn)行選項(xiàng)切換顯示不同警報(bào)目錄。

（3）城市預(yù)報(bào)：根據(jù)軟件定位（或人工選擇）自動(dòng)展示所在城市（北海區(qū)沿海城市）未來3天的潮汐、浪高和水溫?cái)?shù)據(jù)。

（4）天氣預(yù)報(bào)：根據(jù)軟件定位（或人工選擇）自動(dòng)展示所在城市（北海區(qū)沿海城市）的實(shí)時(shí)天氣狀況和未來5天的天氣預(yù)報(bào)。

（5）趨勢(shì)預(yù)測(cè)：展示當(dāng)前月份的海浪、風(fēng)暴潮、海溫等要素的趨勢(shì)預(yù)測(cè)，月底時(shí)展示的是次月數(shù)據(jù)。

（6）天氣圖：展示日本和韓國發(fā)布的預(yù)報(bào)天氣圖，使用內(nèi)嵌圖片進(jìn)行切換，實(shí)現(xiàn)多圖播放或切換顯示不同時(shí)間段的預(yù)報(bào)數(shù)據(jù)。

（7）衛(wèi)星云圖：展示中國氣象網(wǎng)發(fā)布的最近12小時(shí)的衛(wèi)星云圖，展示策略同天氣圖。

圖4 訪問量統(tǒng)計(jì)

圖5 首頁地圖界面

圖6 菜單頁面

（8）雷達(dá)圖：展示中國氣象網(wǎng)發(fā)布的最近6小時(shí)的華北雷達(dá)拼圖，展示策略同天氣圖。

（9）臺(tái)風(fēng)路徑：展示當(dāng)前臺(tái)風(fēng)（西太平洋）過程路徑，和多源預(yù)測(cè)路徑，也可根據(jù)年份和編號(hào)搜索臺(tái)風(fēng)路徑。圖例是以表格

（10）漁場(chǎng)預(yù)報(bào)：展示北海區(qū)11個(gè)漁場(chǎng)未來3天的波高和浪向數(shù)據(jù)。

2.5.4 設(shè)置模塊

設(shè)置模塊集成了推送設(shè)置提示、歡迎頁面、清理緩存、聯(lián)系我們、關(guān)于和檢查更新功能。

歡迎頁：如果用戶在關(guān)閉了打開軟件顯示歡迎頁面功能，可以在這里重新開啟，用戶關(guān)閉軟件再次進(jìn)入時(shí)歡迎頁會(huì)再次打開。

緩存：緩存使用的是uni.setStorageSync同步存儲(chǔ)技術(shù)，存儲(chǔ)用戶瀏覽頁面生成的數(shù)據(jù)，用戶點(diǎn)擊清除緩存，會(huì)把部分緩存數(shù)據(jù)刪除。

聯(lián)系我們：用戶對(duì)于軟件有意見或者建議，可以通過這里提交給后臺(tái)，后臺(tái)會(huì)以表單的形式將用戶的留言信息反饋到管理員郵箱。

檢查更新：根據(jù)后臺(tái)返回的版本信息，判斷當(dāng)前應(yīng)用是否有新版本。用戶打開應(yīng)用時(shí)如果有新版本會(huì)提示用戶升級(jí)，用戶可以根據(jù)需要選擇。

3 關(guān)鍵問題解決

3.1 圖片類數(shù)據(jù)壓縮優(yōu)化

由于網(wǎng)絡(luò)采集的圖片比較大，在手機(jī)端展示的時(shí)候不僅會(huì)出現(xiàn)卡頓的現(xiàn)象，還會(huì)耗費(fèi)用戶的流量以及占用手機(jī)的內(nèi)存空間，從而造成用戶體驗(yàn)度下降。

雖然壓縮都是有損的，但我們可以通過減少quality的方式，比如100%的quality與80%的quality，用戶感觀上基本一樣，但是體積卻可以減少30%以上，比如6K的圖片，會(huì)到4K左右，整體平均速度得到有效提升。如表2所示。

表2 圖片數(shù)據(jù)對(duì)比

3.2 地理信息底圖層級(jí)選擇及加載速度優(yōu)化

根據(jù)縮放等級(jí)顯示或隱藏markers，圖層顯示的大小跟縮放等級(jí)相關(guān)，等級(jí)縮小到一定程度后，圖層分辨率就會(huì)縮小，出現(xiàn)圖層壓蓋等情況，縮放到最小隱藏圖層，等級(jí)越大，圖層就越小，圖層間的距離也會(huì)變大，根據(jù)map.getZoom進(jìn)行縮放顯示。

4 結(jié)束語

能夠及時(shí)、準(zhǔn)確、便捷、形象、立體地展示北海區(qū)近海海域海洋環(huán)境現(xiàn)狀和預(yù)報(bào)及警報(bào)信息是我們團(tuán)隊(duì)一致的工作目標(biāo)。海洋預(yù)報(bào)移動(dòng)客戶端可以隨時(shí)隨地獲取海洋環(huán)境信息資源，對(duì)于提高海洋決策指揮能力，最大限度地減輕可能造成的損失、保障人民生命財(cái)產(chǎn)安全，具有重要的意義。