基于Leaflet與Vue的臺風(fēng)風(fēng)暴潮預(yù)報可視化系統(tǒng)組件化設(shè)計與實現(xiàn)

劉思晗，李明杰*，肖林，徐騰，葉文琦

（1.國家海洋環(huán)境預(yù)報中心，北京 100081；2.國家海洋環(huán)境預(yù)報中心自然資源部海洋災(zāi)害預(yù)報技術(shù)重點實驗室，北京 100081；3.國際商業(yè)機(jī)器（中國）有限公司，北京 100027）

0 引言

風(fēng)暴潮災(zāi)害是我國最嚴(yán)重的海洋災(zāi)害。據(jù)統(tǒng)計，2021 年由風(fēng)暴潮造成的直接經(jīng)濟(jì)損失占海洋災(zāi)害總直接經(jīng)濟(jì)損失的80%（引自《2021 中國海洋災(zāi)害公報》），其中，臺風(fēng)引發(fā)的風(fēng)暴潮災(zāi)害對我國影響最為嚴(yán)重。我國的臺風(fēng)風(fēng)暴潮預(yù)警報有效減少了死亡人數(shù)及經(jīng)濟(jì)損失，對于臺風(fēng)風(fēng)暴潮的防災(zāi)減災(zāi)具有重要作用。

過去十余年的臺風(fēng)風(fēng)暴潮預(yù)報業(yè)務(wù)化系統(tǒng)常采用基于地理信息系統(tǒng)（Geographic Information System，GIS）的客戶端/服務(wù)端架構(gòu)技術(shù)路線或基于傳統(tǒng)網(wǎng)絡(luò)地理信息系統(tǒng)（WebGIS）的技術(shù)路線[1-2]。然而，該類系統(tǒng)往往不完全適合臺風(fēng)風(fēng)暴潮預(yù)報的業(yè)務(wù)特點，對預(yù)報產(chǎn)品的展現(xiàn)形式較為單一，無法滿足臺風(fēng)風(fēng)暴潮預(yù)報對多元數(shù)據(jù)的復(fù)雜、靈活、多態(tài)的展現(xiàn)形式的要求。此外，該類系統(tǒng)通常較為龐大，大量的功能設(shè)計對臺風(fēng)風(fēng)暴潮預(yù)報業(yè)務(wù)來說較為冗余，無法簡化功能重復(fù)的代碼，無法實現(xiàn)代碼的復(fù)用，且未采用前端面向?qū)ο笤O(shè)計模式（Object Oriented Programming，OOP）進(jìn)行開發(fā)。

本文基于目前主流的前端可視化技術(shù)方案，嘗試將前端框架Vue 與開源WebGIS 引擎Leaflet 相結(jié)合。基于Leaflet在WebGIS 領(lǐng)域展現(xiàn)形式靈活多樣且輕量化的特點，在前端系統(tǒng)設(shè)計中引入OOP 模式，探索圍繞Leaflet 框架進(jìn)行組件化設(shè)計的方案，建立基于WebGIS 與組件化技術(shù)的臺風(fēng)風(fēng)暴潮預(yù)報可視化系統(tǒng)（簡稱本系統(tǒng)）。

1 海洋可視化表達(dá)前端系統(tǒng)技術(shù)分析

本節(jié)列舉了海洋動力過程的常用可視化方法，并針對臺風(fēng)風(fēng)暴潮預(yù)報業(yè)務(wù)提出了可視化方案。由于臺風(fēng)風(fēng)暴潮預(yù)報常采用時空分析相關(guān)方法，海洋動力過程的可視化表述常引入WebGIS 作為技術(shù)支持，對常用的開源WebGIS 技術(shù)進(jìn)行了深入對比與分析，選取Leaflet 作為WebGIS 可視化引擎。分析了常用的組件化前端基礎(chǔ)框架，選取了Vue 基礎(chǔ)框架并引入了前端組件化設(shè)計方法。

1.1 海洋動力過程的常用可視化方法

海洋動力過程可視化是指使用圖表、圖像（包括視頻）和地圖等工具來形象地表示海洋物理過程。海洋數(shù)據(jù)的可視化不僅僅是針對海洋數(shù)據(jù)的視覺表現(xiàn)，也是一種重要的分析手段，可以用來完成可視化分析并獲取蘊含在海洋環(huán)境中的物理、生物和化學(xué)特性、規(guī)律以及不同尺度的關(guān)系。海洋數(shù)據(jù)可視化可以幫助人們理解海洋數(shù)據(jù)并更好地分析和解釋海洋現(xiàn)象[3]。

常見的多元海洋時空可視化分析是圍繞研究一個或多個海洋標(biāo)量（海浪、海溫、鹽度等）和矢量（海流等）的特征時空變化展開的。海洋數(shù)據(jù)可視化的常用方法包括：使用散點圖表示海洋參數(shù)隨著空間位置的變化情況；結(jié)合地圖表示海洋參數(shù)的空間分布情況；使用3D 圖像表示海洋參數(shù)的三維分布情況等[4]。常用的海洋數(shù)據(jù)可視化軟件包括ArcGIS、Ocean Data View、Skyline Globe、iOcean 中國數(shù)字海洋等軟件[5]。

海洋領(lǐng)域的可視化分析系統(tǒng)通常采用引入圖形學(xué)相關(guān)知識的科學(xué)可視化技術(shù)，對于常見的多元海洋時空數(shù)據(jù)的可視化表達(dá)，解翠等[6]提出了處理針對海洋氣象數(shù)據(jù)的可視化分析方案。對于向量場的可視化，王少榮等[7]提出了流線聚類、基于幾何的可視化、基于粒子的向量場可視化以及增強(qiáng)的基于紋理的向量場可視化方案。

1.2 臺風(fēng)風(fēng)暴潮預(yù)報可視化分析

臺風(fēng)風(fēng)暴潮預(yù)報可以使用多種方式來進(jìn)行可視化。一種方法是通過臺風(fēng)風(fēng)暴潮增水標(biāo)量場，以色階圖（見圖1）或者等值線（見圖2）的形式表示由于臺風(fēng)驅(qū)動的潮水高低差的變化引起的潮流現(xiàn)象，例如，臺風(fēng)引起的風(fēng)暴增水的高度可以用線性過渡的不同顏色來表示；另外還可以通過模擬動畫的形式來模擬臺風(fēng)風(fēng)暴潮的發(fā)展過程，例如，通過一組時序變化的2D 平面標(biāo)量場填色動畫來展示整個臺風(fēng)過程中風(fēng)暴增水的變化趨勢。

圖1 加載最大風(fēng)暴增水柵格圖層示意圖Fig.1 Schematic diagram of loading maximum storm surge raster layer

臺風(fēng)風(fēng)暴潮引起的海表面高度異常變化是主要可視化要素之一。由于臺風(fēng)移動軌跡與對應(yīng)的風(fēng)暴增水場存在時空相關(guān)性，對于此類時序數(shù)據(jù)可采用時間序列圖層即根據(jù)時間進(jìn)行疊加的方式展示該要素的變化趨勢；對于多維度的海洋時空數(shù)據(jù)可加入空間性數(shù)據(jù)篩選[8]、數(shù)據(jù)特征選擇劃分以實現(xiàn)屬性向數(shù)據(jù)降維等功能[9]。本系統(tǒng)需要通過對臺風(fēng)風(fēng)暴潮的可視化，幫助理解臺風(fēng)風(fēng)暴潮這種自然現(xiàn)象的本質(zhì)，并更好地預(yù)測和應(yīng)對臺風(fēng)風(fēng)暴潮帶來的影響。

1.3 WebGIS引擎選型分析

本系統(tǒng)采用B/S 架構(gòu)，對于風(fēng)暴潮預(yù)報場景引入符合當(dāng)前業(yè)務(wù)需要的WebGIS 引擎。目前較為主流的開源地圖引擎主要有Leaflet、OpenLayers、Mapbox-GL與Cesium。

Leaflet、OpenLayers 和Cesium 都是用于在網(wǎng)頁中制作地圖應(yīng)用的開源JavaScript 庫。它們可以幫助開發(fā)者快速地構(gòu)建出豐富的地圖應(yīng)用，并且都具有很多功能強(qiáng)大的插件可供選擇。Leaflet 是一個輕量級的地圖庫，適用于構(gòu)建移動設(shè)備上的地圖應(yīng)用；OpenLayers 是一個功能強(qiáng)大的地圖庫，適用于構(gòu)建各種類型的地圖應(yīng)用；Cesium 是一個用于構(gòu)建三維地圖應(yīng)用的開源JavaScript 庫。各框架功能對比見表1。

表1 主流開源地圖引擎功能對比Tab.1 Comparison of major open source map engines

本系統(tǒng)應(yīng)用于臺風(fēng)風(fēng)暴潮預(yù)報業(yè)務(wù)可視化領(lǐng)域，為非強(qiáng)GIS 應(yīng)用，沒有對標(biāo)量/矢量圖層進(jìn)行實時編輯修改的需要，因此舍棄了適用于強(qiáng)GIS 功能的OpenLayers；考慮到實際預(yù)報業(yè)務(wù)流程對效率有較高要求，故舍棄了Cesium 與Mapbox-GL；由于中間產(chǎn)品大部分為矢量化數(shù)據(jù)，需采用2D 作為展現(xiàn)形式且要求系統(tǒng)輕量化，因此最終采用Leaflet 作為WebGIS引擎。

1.4 前端基礎(chǔ)框架選型對比

目前前端開發(fā)采用的基礎(chǔ)性框架主要有Jquery、AngularJS、React 和Vue。Jquery 最初作為JavaScript 的一個擴(kuò)展庫使用，可提供前端常用的、針對元素操作的簡便寫法的工具包，隨著前端頁面復(fù)雜度的逐漸提升，單純使用Jquery 已不能滿足復(fù)雜頁面的開發(fā)需求。為了解決這一問題，整合了TypeScript 的Angular 框架逐漸流行起來。由于AngularJS 具有一定的復(fù)雜性，且代碼體量是React與Vue 的幾倍，在移動設(shè)備上會造成加載時間較長和某些性能問題，在國內(nèi)的普及遠(yuǎn)不如Vue 與React，2021—2022 年Vue 與React 均為中國主流的前端框架（見圖3）。Vue 與React 均為組件化框架，其中Vue 是基于數(shù)據(jù)雙向綁定的前端MVVM（Model-View-ViewModel）框架，可以實現(xiàn)基于數(shù)據(jù)驅(qū)動的開發(fā)模式編寫前端應(yīng)用，提供基于虛擬文檔對象模型（Document Object Model，DOM）的頁面渲染方法，Vue 在頁面渲染過程中跟蹤組件的依賴關(guān)系，當(dāng)有某一個組件發(fā)生變化時不需要重新渲染整個組件樹。Vue 為國內(nèi)開發(fā)與維護(hù)，本系統(tǒng)根據(jù)自主可控性原則基于WebGIS 需求最終選取Vue 作為前端基礎(chǔ)性框架。

圖3 2021—2022年國內(nèi)3大主流框架的流行趨勢圖（引自百度）Fig.3 Trends for the searching amount of three major frameworks from 2021 to 2022（cited from Baidu）

2 面向臺風(fēng)風(fēng)暴潮預(yù)報的可視化系統(tǒng)設(shè)計及實現(xiàn)

2.1 前端系統(tǒng)總體設(shè)計

本系統(tǒng)引入Vue 作為主體框架，使用Leaflet 作為WebGIS 引擎，實現(xiàn)了對多維海洋環(huán)境要素的動態(tài)展示及交互式操作。

Vue 對于傳統(tǒng)的前端技術(shù)可以減少對頁面DOM 的操作，并可通過雙向數(shù)據(jù)綁定使數(shù)據(jù)流與事件之間的關(guān)聯(lián)更為清晰。由于Vue本身是基于組件化的設(shè)計理念，可以使其單一組件具有獨立的邏輯功能，只修改對應(yīng)的組件即可實現(xiàn)不同的功能需求，且不影響整體頁面的使用。

本系統(tǒng)基于Vue 組件化的設(shè)計理念，將公共模塊切分為各個模塊，通過在主頁面中組合使不同模塊具備各種業(yè)務(wù)邏輯功能；在各個模塊間通過父組件向子組件傳值、子組件調(diào)用父組件中事件方式的傳值以及使用全局Vue應(yīng)用程序的狀態(tài)管理模式和庫（Vuex）實現(xiàn)頁面通信，并進(jìn)行組件間的數(shù)據(jù)流動。系統(tǒng)采取MVVM 設(shè)計模式，其核心是提供對視圖（View）和視圖模型（ViewModel）的雙向數(shù)據(jù)綁定，這使得ViewModel 的狀態(tài)改變可以自動傳遞給View，實現(xiàn)數(shù)據(jù)的雙向綁定。各主要模塊分類為各個業(yè)務(wù)組件，實現(xiàn)了前端組件化的設(shè)計模式，提高了系統(tǒng)的可復(fù)用性及開發(fā)效率。

本系統(tǒng)引入TypeScript 構(gòu)建工具，在前端開發(fā)JavaScript 應(yīng)用程序時引入靜態(tài)檢查和代碼重構(gòu)。通過引入類型推斷讓JavaScript 代碼具有靜態(tài)驗證的功能，在定義軟件組件接口時可提供較為健壯的代碼檢查功能。

2.2 Leaflet與Vue的融合技術(shù)

傳統(tǒng)的WebGIS 平臺在設(shè)計之初只是為了滿足前后臺交互的接口規(guī)范，開發(fā)人員只需要正確的調(diào)用對應(yīng)的接口、確保提交數(shù)據(jù)的正確性即可，并未對整體系統(tǒng)引入工程化的開發(fā)規(guī)范。隨著實際業(yè)務(wù)的逐漸豐富，所需要的功能也逐漸增多，這種傳統(tǒng)的開發(fā)模式的劣勢逐漸體現(xiàn)。

在傳統(tǒng)的WebGIS 平臺，Leaflet 被更多地作為實現(xiàn)各類地圖標(biāo)繪的功能庫。該種模式基于傳統(tǒng)前端設(shè)計理念，將功能復(fù)雜的頁面按照邏輯獨立拆分為多個頁面，并通過路由設(shè)置將不同業(yè)務(wù)拆分為不同頁面；以面向過程的編寫規(guī)范進(jìn)行編寫，不符合ES6規(guī)范約束；易造成代碼高度耦合等問題，局部代碼的修改可能會對整體頁面功能產(chǎn)生致命影響，同時也不符合前端工程化的發(fā)展趨勢。

本系統(tǒng)引入了組件化開發(fā)框架Vue 并使用了TypeScript，使前端開發(fā)設(shè)計采用后端開發(fā)語言中常用的OOP 模式。在系統(tǒng)設(shè)計時根據(jù)Vue 框架的技術(shù)特點（組件化及模塊化）引入了關(guān)注點分離、模塊化特性、信息屏蔽以及功能獨立等設(shè)計理念[10-11]。

本系統(tǒng)在Vue 框架的基礎(chǔ)上引入了基于Vue封裝的Leaflet 的開源框架Vue2Leaflet，以Vue 的形式封裝了Leaflet 的大部分功能。對基礎(chǔ)Map 進(jìn)行了封裝，又對Leaflet 常用的幾種要素Circle、Polygon、Polyline、Rectangle、Tiles、Markers 與Grouping 等進(jìn)行了封裝。

本文針對臺風(fēng)風(fēng)暴潮預(yù)報業(yè)務(wù)所需的預(yù)報場產(chǎn)品，通過TypeScript 以O(shè)OP 方式封裝了部分臺風(fēng)風(fēng)暴潮業(yè)務(wù)相關(guān)類代碼：柵格圖層交互類（Raster）、等值面/線（Isosurface）交互類、臺風(fēng)路徑交互類（TyphoneGroupPath）、潮位站icon 類（StationIcon）、其他Marker 等類（Markers）。這些代碼實現(xiàn)了根據(jù)預(yù)報產(chǎn)品的范圍（最大值、最小值）基于Canvas繪制線性色階圖[12]、基于Canvas 繪制等值面圖層渲染、基于集合預(yù)報的臺風(fēng)路徑圖層和潮位站icon 圖層加載以及臺風(fēng)風(fēng)暴潮相關(guān)業(yè)務(wù)的功能實現(xiàn)。

本系統(tǒng)摒棄了傳統(tǒng)的WebGIS 系統(tǒng)按照業(yè)務(wù)邏輯以不同頁面的形式進(jìn)行拆分的設(shè)計方式，采用以可封裝組件的形式拆分，并借助Vue 將不同的組件按需在統(tǒng)一頁面進(jìn)行組裝（以Components的形式進(jìn)行動態(tài)引入）。此種方式可以將不同的子組件以面向?qū)ο蟮男问竭M(jìn)行封裝（引入了基于類風(fēng)格的Vue擴(kuò)展組件Vue-Class-Component 等），可實現(xiàn)重復(fù)功能的代碼簡化，減少了代碼的復(fù)寫，從架構(gòu)上對代碼進(jìn)行了縱向分層；每個組件都可以獨立于其他組件運行，從而提高代碼的可維護(hù)性、可讀性和可復(fù)用性。

2.3 基于組件化和模塊化的頁面設(shè)計及實現(xiàn)

基于Vue 框架的技術(shù)特點（組件化及模塊化），以臺風(fēng)風(fēng)暴潮預(yù)報系統(tǒng)交互主頁面為例，通過嵌套路由（Vue Router）將頁面容器（Content）中下部分拆分為多個子頁面組件（見圖4）。Router-View 是Vue中Vue Router的組成部分，用來實現(xiàn)路由視圖，即將一塊組件通過動態(tài)或嵌套路由的形式來展現(xiàn)不同的嵌套顯示頁面。各個組件的功能摘要及從屬關(guān)系見表2。

表2 主要組件從屬及功能摘要表Tab.2 List of major component dependencies and functions

圖4 頁面各個組件示意圖Fig.4 Schematic diagram of each component on page

以創(chuàng)建風(fēng)暴潮計算案例并加載對應(yīng)預(yù)報產(chǎn)品業(yè)務(wù)為例，針對臺風(fēng)風(fēng)暴潮業(yè)務(wù)中需要實時獲取臺風(fēng)路徑信息，設(shè)計實現(xiàn)了獲取指定臺風(fēng)的最新臺風(fēng)路徑功能，并在頁面通過CreateCaseForm（見表2 中編號19）組件加載，可編輯臺風(fēng)的路徑（經(jīng)緯度）與氣象信息（氣壓）并在地圖中以不同顏色的圖標(biāo)（Icon）予以顯示；并提供了模型計算所需的其他參數(shù)（集合預(yù)報成員數(shù)量、大風(fēng)半徑增減值等）。在提交作業(yè)后可通過CoverageSearchForm（見表2 中編號17）組件進(jìn)行歷史作業(yè)的查詢。對臺風(fēng)所在位置與各類風(fēng)暴潮預(yù)報產(chǎn)品的關(guān)聯(lián)，采用了全局的時間欄組件TimeBar（見表2中編號5），可通過移入并點選指定時間，加載對應(yīng)的風(fēng)暴潮預(yù)報產(chǎn)品的柵格圖層或等值面圖層，并加載該時刻可能影響的潮位站及增水情況（見表2 中編號12 的TabContent 組件和編號13的StationChartsView組件）。

2.4 性能分析

為了對前端頁面的性能進(jìn)行評估，本文使用了Lighthouse 性能分析工具，并在Chrome 瀏覽器中運行該工具。采用3 個指標(biāo)進(jìn)行評估，即FCP（First Contentful Paint）指首次繪制任何文本、圖像、非空白Canvas 或SVG 的 時 間 點；DCL（Dom Content Loaded）指HTML 加 載 完 成 事 件；LCP（Largest Contentful Paint）指衡量標(biāo)準(zhǔn)視口內(nèi)可見的最大內(nèi)容元素的渲染時間。從表3 的性能分析中可以看出，綜合以上性能指標(biāo)，本系統(tǒng)在加載體量較大的矢量圖層并做較為復(fù)雜的渲染處理時仍能保持較快的響應(yīng)時間，交互體驗較好。

表3 性能分析Tab.3 Performance analysis summary table

本文使用Webpack 工具對模塊進(jìn)行打包，生成的打包文件大小為12.584 MB，頁面邏輯部分打包大小為302.011 KB。本文還使用了webpackbundle-analyzer 包分析器來查看打包后的前端工程（見圖5）。

圖5 包分析報告圖Fig.5 Package analysis report diagram

3 結(jié)語

本文針對海洋多元數(shù)據(jù)可視化在臺風(fēng)風(fēng)暴潮預(yù)報領(lǐng)域的應(yīng)用，分析了傳統(tǒng)預(yù)報可視化系統(tǒng)的不足，并將基于WebGIS 的可視化分析方法應(yīng)用到風(fēng)暴潮的多元時空數(shù)據(jù)分析中。

本文梳理了目前基于數(shù)值預(yù)報的可視化系統(tǒng)現(xiàn)狀，對比了目前主流的WebGIS 引擎與前端框架，并整合加入了其他前端技術(shù)，提供了基于Leaflet 與Vue的具體技術(shù)與實現(xiàn)思路。

本文設(shè)計的系統(tǒng)在實際業(yè)務(wù)應(yīng)用中改善了執(zhí)行效率，為風(fēng)暴潮的可視化分析提供了較好支撐，實現(xiàn)了對風(fēng)暴潮多元數(shù)據(jù)的合理表述，并為預(yù)報部門做出預(yù)報決策提供了科學(xué)的支撐，具有實際應(yīng)用價值。本文已經(jīng)將本系統(tǒng)部分核心代碼開源，可為同類可視化系統(tǒng)提供參考依據(jù)。