国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡

?

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

2023-11-10 06:35:50劉思晗李明杰肖林徐騰葉文琦
海洋預(yù)報(bào) 2023年5期
關(guān)鍵詞:風(fēng)暴潮臺(tái)風(fēng)頁(yè)面

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

(1.國(guó)家海洋環(huán)境預(yù)報(bào)中心,北京 100081;2.國(guó)家海洋環(huán)境預(yù)報(bào)中心自然資源部海洋災(zāi)害預(yù)報(bào)技術(shù)重點(diǎn)實(shí)驗(yàn)室,北京 100081;3.國(guó)際商業(yè)機(jī)器(中國(guó))有限公司,北京 100027)

0 引言

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

過(guò)去十余年的臺(tái)風(fēng)風(fēng)暴潮預(yù)報(bào)業(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)往往不完全適合臺(tái)風(fēng)風(fēng)暴潮預(yù)報(bào)的業(yè)務(wù)特點(diǎn),對(duì)預(yù)報(bào)產(chǎn)品的展現(xiàn)形式較為單一,無(wú)法滿足臺(tái)風(fēng)風(fēng)暴潮預(yù)報(bào)對(duì)多元數(shù)據(jù)的復(fù)雜、靈活、多態(tài)的展現(xiàn)形式的要求。此外,該類系統(tǒng)通常較為龐大,大量的功能設(shè)計(jì)對(duì)臺(tái)風(fēng)風(fēng)暴潮預(yù)報(bào)業(yè)務(wù)來(lái)說(shuō)較為冗余,無(wú)法簡(jiǎn)化功能重復(fù)的代碼,無(wú)法實(shí)現(xiàn)代碼的復(fù)用,且未采用前端面向?qū)ο笤O(shè)計(jì)模式(Object Oriented Programming,OOP)進(jìn)行開發(fā)。

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

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

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

1.1 海洋動(dòng)力過(guò)程的常用可視化方法

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

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

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

1.2 臺(tái)風(fēng)風(fēng)暴潮預(yù)報(bào)可視化分析

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

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

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

1.3 WebGIS引擎選型分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖4 頁(yè)面各個(gè)組件示意圖Fig.4 Schematic diagram of each component on page

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

2.4 性能分析

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

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

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

圖5 包分析報(bào)告圖Fig.5 Package analysis report diagram

3 結(jié)語(yǔ)

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

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

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

猜你喜歡
風(fēng)暴潮臺(tái)風(fēng)頁(yè)面
臺(tái)風(fēng)過(guò)韓
刷新生活的頁(yè)面
2012年“蘇拉”和“達(dá)維”雙臺(tái)風(fēng)影響的近海風(fēng)暴潮過(guò)程
防范未來(lái)風(fēng)暴潮災(zāi)害的綠色海堤藍(lán)圖
科學(xué)(2020年4期)2020-11-26 08:27:00
臺(tái)風(fēng)來(lái)了
小讀者(2020年4期)2020-06-16 03:33:46
基于多變量LSTM神經(jīng)網(wǎng)絡(luò)模型的風(fēng)暴潮臨近預(yù)報(bào)
臺(tái)風(fēng)愛(ài)搗亂
臺(tái)風(fēng)來(lái)時(shí)怎樣應(yīng)對(duì)
廣東省風(fēng)暴潮時(shí)空分布特征及重點(diǎn)城市風(fēng)暴潮風(fēng)險(xiǎn)研究
同一Word文檔 縱橫頁(yè)面并存
柘荣县| 仲巴县| 旺苍县| 电白县| 灵丘县| 新邵县| 武宁县| 资阳市| 特克斯县| 金塔县| 临海市| 阆中市| 西青区| 土默特左旗| 凤冈县| 洛浦县| 金山区| 甘孜| 呈贡县| 洛宁县| 翁牛特旗| 丰城市| 三都| 阆中市| 开封市| 鲜城| 廉江市| 拜泉县| 千阳县| 连江县| 尼木县| 临安市| 乐业县| 兴海县| 沽源县| 平原县| 宜良县| 疏勒县| 商洛市| 柳州市| 衡山县|