Design And Implementation Of Ocean Data Visualization System Based On Vue Framework

With the continuous development of "Digital Earth" and "intelligent ocean",people’s demand for dynamic visualization of ocean information is increasing.Ocean data has the characteristics of large amount of data,multi-source and heterogeneous.The traditional ocean data visualization system is difficult to develop,high cost and poor effect.Most of the data can not show the internal relationship and law of the data.How to visualize ocean data efficiently and dynamically,and describe ocean phenomena and ocean material distribution accurately,is an important research topic.The traditional visualization platform based on C / S architecture and scientific computing simulation methods such as MATLAB have many disadvantages in information sharing,use cost,data format conversion and so on.It is particularly urgent to build a marine data visualization platform based on B / S architecture.This paper analyzes and compares the methods of marine data visualization,web development technology and database construction,and develops a marine data visualization system to meet the needs of customers.At the same time,it also verifies the feasibility and economy of the Web GIS development scheme.The work and achievements of this paper are as follows:(1)Combined with the characteristics of stable law of ocean energy and matter conversion,wide range,large volume and high dimension of ocean data,the visualization methods of ocean data are analyzed and compared.The sea surface pressure and wave height are visualized by area filling method of isoline method,the temperature and salinity are visualized by scanning filling method,and the wind field and flow field are visualized by particle system;Taking the visualization of flow field and temperature field as an example,the realization idea and process are described in detail.(2)The development technologies of system data layer,business logic layer and performance layer are analyzed and compared.Finally,My SQL storage system is used to manage business data,mongodb stores marine data in JSON format,Java,springboot,Tomcat and Geo Server develop business logic layer,and Vue,leaf,element UI and Eckart are used to complete rendering of performance layer.(3)Design and implementation of marine data visualization system.Analyze the ocean data structure and system background management data structure,design the corresponding data reading interface,and complete the construction of the system database;Detailed data layer,logic layer and presentation layer of the work and the relationship between each other;The system is divided into map basic function module,map dynamic editing module,background management module and ocean data visualization module.