基于Leaflet与Vue的台风风暴潮预报可视化系统组件化设计与实现-海洋预报

基于Leaflet与Vue的台风风暴潮预报可视化系统组件化设计与实现

单位：1. 国家海洋环境预报中心, 北京 100081;
2. 国家海洋环境预报中心自然资源部海洋灾害预报技术重点实验室, 北京 100081;
3. 国际商业机器(中国)有限公司, 北京 100027

分类号：P731.23

出版年·卷·期（页码）：2023·40·第五期（73-80）

摘要：

分析了海洋动力过程常用的可视化分析方法，并对台风风暴潮预报业务进行了开源WebGIS引擎的对比与选型。为了满足台风风暴潮预报可视化的多元化和轻量化需求，采用了Leaflet作为WebGIS框架引擎，基于组件化开发思想，阐述了采用Leaflet与Vue的组件化页面设计及相应实现方法。此方法可以描述台风风暴潮预报可视化系统的总体交互逻辑与可视化效果。

This paper analyzes the widely-used visualization methods for ocean dynamic processes, and compares open-source WebGIS engines for typhoon storm surge forecasting. In order to meet the diversified and lightweight requirements of typhoon storm surge visualization, Leaflet is chosen as the WebGIS framework engine.Based on the idea of component-based development, this paper explains the component-based page design and corresponding implementation methods using Leaflet and Vue, and describes the overall interactive logic and visualization effect of the typhoon storm surge visualization system.

参考文献：

[1] 李利洋, 张文静, 蒋国荣, 等. 基于GIS的海口地区风暴潮、浪数值预报系统设计[J]. 海洋预报, 2010, 27(3): 72-76. LI L Y, ZHANG W J, JIANG G R, et al. The design of storm surge and wave based on GIS forecast system in Haikou Area[J]. Marine Forecasts, 2010, 27(3): 72-76.
[2] 朱本璐. 福建省风暴潮预警辅助决策系统的业务化应用[J]. 海洋预报, 2010, 27(5): 16-19. ZHU B L. Application of the Fujian storm surge warning auxiliary decision system[J]. Marine Forecasts, 2010, 27(5): 16-19.
[3] 苏奋振, 吴文周, 平博, 等. 海洋地理信息系统研究进展[J]. 海洋通报, 2014, 33(4): 361-370. SU F Z, WU W Z, PING B, et al. Research progress of the marine geographic information system[J]. Marine Science Bulletin, 2014, 33(4): 361-370.
[4] 宋德瑞, 曹可, 张建丽, 等. 大数据视域下的海洋信息化建设构想[J]. 海洋开发与管理, 2017, 34(9): 50-53. SONG D R, CAO K, ZHANG J L, et al. The conception of marine information construction from the perspective of big data[J]. Ocean Development and Management, 2017, 34(9): 50-53.
[5] 孙强, 王世航, 鹿凤. 网络环境下海洋标量场数据三维可视化研究[J]. 现代电子技术, 2019, 42(8): 104-108. SUN Q, WANG S H, LU F. 3D visualization research of marine scalar field data under network environment[J]. Modern Electronics Technique, 2019, 42(8): 104-108.
[6] 解翠, 李明悝, 陈萍, 等. 大数据可视分析在海洋领域的应用[J]. 大数据, 2021, 7(2): 3-14. XIE C, LI M K, CHEN P, et al. Application of big data visual analysis in the marine field[J]. Big Data Research, 2021, 7(2): 3-14.
[7] 王少荣, 陈毅松, 汪国平. 数字海洋系统的向量场可视化[J]. 计算机辅助设计与图形学学报, 2016, 28(12): 2114-2119. WANG S R, CHEN Y S, WANG G P. Vector field visualization of digital ocean system[J]. Journal of Computer-Aided Design & Computer Graphics, 2016, 28(12): 2114-2119.
[8] 黄冬梅, 徐宸弋轩, 郑霞, 等. 面向海洋预报任务的大数据可视化系统研究[J]. 计算机工程与应用, 2019, 55(7): 87-94. HUANG D M, XU C Y X, ZHENG X, et al. Research on big data visualization system for marine forecast missions[J]. Computer Engineering and Applications, 2019, 55(7): 87-94.
[9] 宋丽丽. 基于B/S的海洋环境数据可视化与服务[J]. 海洋科学, 2016, 40(7): 124-131. SONG L L. Visualization and service of marine environmental data based on B/S[J]. Marine Sciences, 2016, 40(7): 124-131.
[10] PRESSMAN R S. Software engineering: a Practitioner’s approach [M]. 7th ed. New York: McGraw-Hill, 2010.
[11] 吴侃. 从微博前端重构看新形势下的Web前端开发[D]. 北京: 北京邮电大学, 2011. WU K. The front-end development of Web under the new situation is viewed from the front-end reconstruction of microblog[D]. Beijing: Beijing University of Posts and Telecommunications, 2011.
[12] 张玉娟, 郭东琳, 高松, 等. 基于多要素的物理海洋数据统计与可视化表达[J]. 海洋信息, 2016(4): 13-18. ZHANG Y J, GUO D L, GAO S, et al. Physical ocean data statistics and visual representation based on multiple factors[J]. Marine Information, 2016(4): 13-18.

服务与反馈：

【文章下载】【发表评论】【查看评论】【加入收藏】