Network user oriented gnss velocity field product visualization and interactive analysis method and system
Patent Information
- Application Number
- CN202610716147.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2026-05-22
- Publication Date
- 2026-08-18
AI Technical Summary
[0008]为解决上述技术问题,本发明提出一种面向网络用户的GNSS速度场产品可视化、交互式分析方法及系统,其解决了现有技术中存在的图形化交互功能缺失、可视化呈现静态化、多源数据融合能力不足及本地部署受限等问题
[0024] This invention provides an interactive visualization method for GNSS velocity fields, supporting interactive selection and one-click projection, completely changing the cumbersome mode of relying on manually writing scripts to extract data in existing technologies. It employs an event-driven programming mechanism and front-end dynamic calculation and real-time rendering technology, which not only responds accurately to user input in real time but also avoids heavy back-end computational loads and tedious data preprocessing, significantly reducing the operational threshold and improving overall work efficiency.
Smart Images

Figure CN122593677A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of geophysics, specifically to a method and system for visualizing and interactively analyzing GNSS velocity field products for network users. Background Technology
[0002] Crustal deformation monitoring is a core method for studying geodynamic processes and assessing geological hazard risks. With the development of space geodesy technology, the Global Navigation Satellite System (GNSS), with its advantages of high precision, all-weather operation, and wide coverage, has become the main technical support for acquiring crustal deformation velocity vector data. High-resolution crustal movement velocity fields can be constructed by performing high-precision calculations on continuous and mobile GNSS observation data. This velocity field, as a core data support, is widely used for the quantitative analysis of crustal movement rates, strain rates, and fault activity characteristics, and further, by establishing deformation models to elucidate the intrinsic laws of plate tectonics. However, facing massive amounts of high-precision GNSS observation data, how to overcome the limitations of existing display formats and achieve more flexible and in-depth interactive analysis is the main challenge currently faced, specifically in the following aspects:
[0003] 1. Velocity vector displays are limited to static images or fixed-length symbols and cannot dynamically adapt to scaling and viewing angle, making it difficult for users to intuitively compare deformation differences in different areas.
[0004] 2. Existing technologies lack a graphical user interface, do not support extracting target region vectors by selecting with arbitrary polygonal bounding boxes, and lack a projection decomposition mechanism based on fault strike, making it difficult to efficiently analyze fault motion characteristics.
[0005] 3. Existing technologies make it difficult to seamlessly overlay and link heterogeneous data from multiple sources such as topography, faults, and strain rates in a single view, which severely restricts the efficiency of comprehensive judgment of geological structural background.
[0006] 4. Existing solutions are limited by local heavy software deployment and cannot achieve cross-platform lightweight access anytime.
[0007] Therefore, how to overcome the limitations of traditional technologies in terms of the flexibility of GNSS velocity field visualization, dynamic visualization, multi-source data fusion, and ease of deployment, and to build a highly interactive and lightweight analysis platform, has become a pressing technical challenge in the field of crustal deformation monitoring. Summary of the Invention
[0008] To address the aforementioned technical problems, this invention proposes a visualization and interactive analysis method and system for GNSS velocity field products for network users. This system solves the problems existing in the prior art, such as the lack of graphical interactive functions, static visualization presentation, insufficient multi-source data fusion capabilities, and limited local deployment.
[0009] To achieve the above objectives, this invention proposes a method for visualizing and interactively analyzing GNSS velocity field products for network users, which specifically includes the following steps:
[0010] (1) Initialize the runtime environment, load the geophysical dataset, parse it, and cache it;
[0011] (2) The user interaction interface is rendered through the interface layer, the user's operation events are captured in real time, and they are converted into an instruction stream and passed to the interaction control layer. The operation events include at least layer display control, display parameter adjustment, view zoom operation, and instructions to trigger the core analysis function.
[0012] (3) The instruction stream is parsed through the interactive control layer, the vector geometric data of the target area is extracted based on the graphics drawing module, and the GNSS velocity vector data located in the target area is filtered out. The vector geometric data and the filtered GNSS velocity vector data are exported to the core computing layer to start the computing process. At the same time, the view scaling operation and display parameter adjustment are responded to in real time, and the display level and visual symbols of the layer are dynamically adapted and controlled to achieve visual level optimization of multi-layer overlay.
[0013] (4) The core computing layer receives the vector geometric data and GNSS velocity vector data, and performs projection decomposition calculation on the GNSS velocity vector data based on the map projection algorithm and the error propagation law, thereby calculating the parallel component velocity, vertical component velocity and their corresponding uncertainty of each GNSS velocity vector data relative to the fault.
[0014] (5) The visualization layer receives the calculation results from the core computing layer, calls the map engine API to dynamically render the speed profile, and redraws the vector arrow symbols and layer stacking order according to the real-time status of the map view to form a visual feedback loop.
[0015] (6) The result output layer responds to the export instruction forwarded by the interactive control layer, obtains the latest calculation result from the core computing layer, converts it into a preset format file and triggers local download.
[0016] The present invention also includes a GNSS velocity field product visualization and interactive analysis system for network users, comprising: a data management layer, an interface layer, an interactive control layer, a core computing layer, a visualization presentation layer, and a result output layer.
[0017] The data management layer uses a global singleton pattern to construct a system-level state object for implementing memory-level data caching.
[0018] The interface layer is configured with web page interactive controls and an event listening module, which is used to receive user instructions and convert user operations into a standardized instruction stream, which is then transmitted to the interactive control layer in real time.
[0019] The interactive control layer captures geometric events drawn by the user on the front end to generate vector geometric data, extracts cached GNSS velocity vector data from the data management layer and filters out data within the target area, and encapsulates the vector geometric data and the filtered GNSS velocity vector data into a unified parameter object, thereby synchronously triggering the projection calculation task of the core computing layer.
[0020] The core computing layer is used to receive the parameter object, perform projection decomposition calculations, generate a structured result dataset, and send it to the visualization layer.
[0021] The visualization layer receives the structured result dataset from the core computing layer and responds to rendering commands from the interactive control layer. The visualization layer calls the map engine API to dynamically redraw vector symbols and update the layer stacking order based on the projection result dataset, thereby updating the map view in real time and forming a visual feedback loop.
[0022] The output layer is used to respond to the export instructions forwarded by the interactive control layer, obtain the computation results of the core computing layer, convert them into a preset data exchange format or encapsulate them into interactive visualization charts, and trigger the file download operation on the browser side.
[0023] Compared with the prior art, the beneficial effects of the present invention are as follows:
[0024] This invention provides an interactive visualization method for GNSS velocity fields, supporting interactive selection and one-click projection, completely changing the cumbersome mode of relying on manually writing scripts to extract data in existing technologies. It employs an event-driven programming mechanism and front-end dynamic calculation and real-time rendering technology, which not only responds accurately to user input in real time but also avoids heavy back-end computational loads and tedious data preprocessing, significantly reducing the operational threshold and improving overall work efficiency.
[0025] This invention combines a single image with multiple data integration technology, breaking down data silos; and through a dynamic vector adjustment mechanism, it achieves precise capture of millimeter-level minute deformations, solving the problem of detail loss caused by the fixed scale of traditional static charts. Furthermore, this invention supports rapid identification of fault movement types, shortening the analysis process to within minutes. These functions greatly improve the efficiency of comprehensive analysis, providing strong technical support for discovering the correlation between deformation and earthquakes.
[0026] This invention adopts a lightweight web-based architecture, which can be accessed anytime and anywhere without installing any local software. This effectively avoids the additional resource deployment costs and energy consumption brought by traditional heavy software, and greatly improves the universality and convenience of the system. Attached Figure Description
[0027] Figure 1 This is a schematic diagram of the fault line drawing of the present invention;
[0028] Figure 2 This is a schematic diagram of the cross-sectional area of the present invention;
[0029] Figure 3 This is a diagram of the interactive visualization main interface of the GNSS velocity field product of this invention;
[0030] Figure 4 This is a global visualization of the system in its initial loading state.
[0031] Figure 5 This invention provides multi-scale visualization effects at different map zoom levels. Figure 1 ;
[0032] Figure 6 This invention provides multi-scale visualization effects at different map zoom levels. Figure 2 ;
[0033] Figure 7 This invention provides multi-scale visualization effects at different map zoom levels. Figure 3 ;
[0034] Figure 8 This is an interactive scatter plot of the present invention;
[0035] Figure 9 This is a schematic diagram of the data export interface of the present invention;
[0036] Figure 10 This is a system overall principle block diagram of the present invention. Detailed Implementation
[0037] The present invention will be further described below with reference to the accompanying drawings and specific embodiments.
[0038] This invention proposes a method for visualizing and interactively analyzing GNSS velocity field products for network users. This method uses JavaScript to build a visualization and interactive platform on the browser side. Utilizing the collaborative work of the Leaflet.js map library and core computing modules, it accurately extracts arbitrary study areas through a dynamic interactive mechanism and achieves the analysis of fault motion characteristics. Specifically, it includes the following steps:
[0039] S1: System Initialization and Global Data Management
[0040] This invention is developed using JavaScript and deployed without a backend server using GitHub Pages. Upon startup, the front-end browser loads the HTML5 page and initializes the JavaScript runtime environment. The data management layer asynchronously retrieves a local geophysical dataset using the fetch API. This dataset includes GNSS velocity vectors (such as station names and eastward velocities). Northbound speed (and its error, covariance), earthquake focal mechanism solution, strain rate field and fault distribution.
[0041] To ensure efficient and consistent data access, this invention employs a JavaScript singleton pattern to construct a Global State Object. All parsed geophysical data is stored in the object's memory cache. The data management layer provides a unified data interface to all layers, and subsequent functional modules access the data directly through the object's getter methods, avoiding redundant network requests and enabling real-time data sharing between the "visualization layer," "core computing layer," and "results output layer."
[0042] S2: Dynamic Interaction and Arbitrary Region Vector Extraction
[0043] At the user interface layer, users interact with the system through HTML5 controls (checkboxes, dropdown menus, numeric input boxes, and buttons). The system uses JavaScript event listener mechanisms (such as addEventListener) to capture user action events (such as onclick and onchange) in real time and converts them into a command stream to be passed to the interaction control layer.
[0044] This mechanism allows users to flexibly control various system behaviors, including but not limited to: selecting which data layers to display (such as multiple sets of horizontal velocity vector fields, active faults, historical earthquake distribution, surface strain rate fields, focal mechanism solutions, etc.); adjusting display parameters (base map type, velocity vector arrow scaling, minimum magnitude threshold, strain rate color level upper limit, station name label on / off, etc.); triggering core analysis functions (fault reference system projection calculation and result export after range selection); and dynamically expanding / collapsed the control panel to optimize interface space utilization. This layer design, based on HTML5 standard controls and JavaScript event mechanisms, ensures that users can independently complete the entire process from complex multi-source geophysical field data filtering and visualization to quantitative analysis without writing any code.
[0045] The interactive control layer serves as the event hub and logical core of the system, establishing an efficient closed loop between user operations and background computation based on an event-driven mechanism.
[0046] In terms of spatial interaction, this layer relies on the L.Control.Draw module of Leaflet.js, allowing users to freely draw line segments (used to set the fault reference direction) and polygons (used to delineate the analysis range) by defining vertices through mouse clicks. Figure 1 and Figure 2 As shown, the system monitors the creation, editing, and deletion events of geometric objects in real time, captures their GeoJSON geometric data, and highlights them on the map in real time.
[0047] In terms of view presentation, this layer is responsible for maintaining the visual hierarchy of multiple overlay layers. It ensures that the layer last operated by the user is always on top by dynamically allocating z-index values, and at the same time calculates and adapts the symbol size in real time according to the map zoom level.
[0048] In addition, this layer also integrates data export and analysis scheduling functions. It can directly export the station data that meets the filtering conditions in the current view to a CSV file, and can also automatically collect the vector geometric data coordinates and the filtered velocity observation data within the polygon range when the analysis command is triggered, thereby starting the subsequent projection calculation process.
[0049] S3: Core Calculation of Fault Motion Features Based on Gaussian Projection
[0050] After the user draws a line segment on the map to define the fault direction, the system automatically triggers the core calculation layer. This layer first extracts the velocity vector and accuracy information of each station, and then performs the entire process including Gaussian projection, azimuth calculation, velocity decomposition, and error propagation. The specific steps are as follows:
[0051] 1. Velocity Vector Extraction: The interactive control layer transmits the user-drawn polygon geometry (GeoJSON format). The system first uses the `turf.booleanPointInPolygon` function from the `Turf.js` library to traverse all GNSS station point features loaded in memory, determining whether each station is located inside the polygon. It then extracts the complete attributes of stations that meet the criteria (station name, latitude and longitude, eastward velocity). Northbound speed Standard deviation , (and covariance cov), forming a temporary array and caching it.
[0052] 2. Fault Reference System Establishment: The longitude of the midpoint of the line segment is taken as the central meridian of the Gauss-Krüger Projection. Based on the WGS-84 ellipsoid parameters, the latitude and longitude of all extracted stations and the coordinates of the endpoints of the reference line segment are converted in batches to Gaussian plane rectangular coordinates (x,y). This operation eliminates the projection deformation error of large-scale spherical data in local fault analysis.
[0053] 3. Fault strike azimuth calculation: Calculate the azimuth of the fault strike based on the plane coordinates of the two endpoints of the reference line segment. (From due north clockwise, unit: radians).
[0054] 4. Perform velocity vector projection decomposition: Establish a local coordinate system with the fault strike as the Y-axis and the perpendicular to the fault as the X-axis. For each station's velocity vector ( , Perform a two-dimensional rotational transformation to decompose it into parallel fault components. With vertical fault components Its decomposition formula is:
[0055] ;
[0056] ;
[0057] in These are parallel fault components (positive values indicate that the strike-slip direction is consistent). This represents the vertical fault component (positive values indicate compression, and negative values indicate extension).
[0058] 5. Uncertainty propagation calculation
[0059] Based on the least squares error propagation law, and combined with the covariance matrix C of the original velocity components, the uncertainty of the projected components is calculated to ensure the scientific rigor of the analysis results.
[0060] Let the original covariance matrix be:
[0061] ;
[0062] in, This represents the variance of the eastward velocity component. This represents the variance of the northbound velocity component. Represents covariance;
[0063] The rotation matrix is:
[0064] ;
[0065] The projected covariance matrix is then... The uncertainties for the parallel and perpendicular components are respectively:
[0066] ;
[0067] ;
[0068] in, and The corresponding projected covariance matrices are respectively The diagonal elements in the matrix, with subscripts 11 and 22, refer to the first row and first column of the matrix and the second row and second column, respectively.
[0069] 6. Vertical distance calculation and result distribution
[0070] The system calculates the vertical distance from the projected coordinates of each station to the reference line segment, providing a foundation for subsequent profile drawing. After completing the above projection decomposition, the core calculation layer generates a model containing distances and components (parallel fault components). With vertical fault components ) and uncertainty (uncertainty of parallel fault components) and uncertainty of vertical fault components The structured dataset is passed to the visualization layer (for dynamic overlay rendering). The visualization layer acts as a data distribution hub, passing the structured dataset to the result output layer (for generating charts and exporting files), and feeding back the calculation results and status updates to the interactive control layer through a callback mechanism.
[0071] S4: Implementation and Presentation of Dynamic Visualization Functionality
[0072] The visualization layer is based on the Leaflet.js open-source map rendering engine, building a multi-source data overlay and display platform with a "single map" style. For example... Figure 3 The image shows the interactive visualization main interface for the GNSS velocity field product provided by this invention. This interface integrates a map display area, a layer control panel, and an interactive toolbar to showcase the overlay effect of geophysical data. After receiving rendering commands (such as z-index updates, symbol redrawing, and layer additions) from the data management layer and the core computing layer, this layer immediately calls the Leaflet.js API to update the map view, forming a visual feedback loop. Specifically, it supports the following core visualization technologies:
[0073] 1. Multiple base map switching: Supports dynamic switching between multiple base maps such as ArcGIS terrain rendering and OpenStreetMap standard street view.
[0074] 2. Visualization of active faults and earthquake events: Different line widths and colors are used to encode the nature of fault movement; earthquakes are represented by circular markers, the size of which is proportional to the square of the magnitude.
[0075] 3. Dynamic presentation of velocity vector field: Presented dynamically using custom arrow symbols (composed of Polyline and Polygon arrows), such as... Figure 4 As shown. The vector length is based on the formula. Real-time calculation, where scale is dynamically adjusted based on the map zoom level (e.g., scale=10 when zoom level > 10, otherwise scale=5), ensuring the arrow's adaptive length during map zooming, such as... Figure 5 , 6 As shown in Figure 7, the station name label supports conditional display.
[0076] 4. The surface strain rate field is rendered using a color gradient rectangular mesh with RGB linear mapping. Positive values show a red-green gradient, while negative values show a blue-green gradient.
[0077] 5. The beachball icon is generated using pure HTML5 Canvas. The grayscale distribution of its compression and tension zones is determined by the dot product of the node vector and the sliding vector. The icon size dynamically changes with the magnitude. The specific calculation steps are as follows:
[0078] (1) Input parameters and coordinate transformation: Input the fault strike angle str, dip angle dip, slip angle rake, and drawing resolution drawSize. Convert the angle to radians:
[0079] ;
[0080] (2) Calculate the unit vector: Calculate the unit normal vector n and the unit vector u of the sliding direction of the fault plane:
[0081] ;
[0082] ;
[0083] (3) Pixel traversal and spherical projection: Create an ImageData object on a canvas of drawSize×drawSize, and traverse the coordinates of each pixel. If the pixel satisfies (in Then calculate its corresponding spherical projection parameters:
[0084] ;
[0085] ;
[0086] ;
[0087] This yields the three-dimensional orientation vector of the pixel on a unit sphere:
[0088] ;
[0089] y ;
[0090] ;
[0091] (4) Gray-scale filling determination: Calculate the dot product of the direction vector, the normal vector, and the sliding vector:
[0092] ;
[0093] If the product is greater than 0, fill the pixel with dark gray; otherwise, fill it with white. After processing all pixels, write the ImageData to the canvas and draw a 2-pixel wide black border around the circumference, finally outputting the seismic source sphere icon data.
[0094] The analysis results are used to create interactive scatter plots using Plotly.js, such as... Figure 8 As shown. The figure includes error bars ( The system uses the distance between parallel and vertical faults as the horizontal axis and the velocity component as the vertical axis to visually display the velocity gradient changes on both sides of the fault.
[0095] All layers are organized using LayerGroup, supporting independent on / off switching, dynamic redrawing, and maintaining the correct visual layer order at all times. The system uses JavaScript's Canvas or SVG elements to draw velocity vectors, completely changing the existing static mode of fixed-length images. In terms of dynamic calculation logic, the system continuously listens for scaling events, and once triggered, executes the "data resampling → Canvas redrawing" process, with latency controlled within 100ms to ensure real-time performance. For specific visualization, the system calls the Leaflet.js API to dynamically overlay and draw parallel and vertical velocity vector arrows on the map.
[0096] S5: Output Layer and Data Export Mechanism
[0097] This invention achieves a complete closed loop from data loading, interactive filtering, core algorithm calculation (including Gaussian projection and error propagation) to visualization, enabling professional crustal deformation and fault movement characteristic analysis without relying on local software. After receiving the "export" command triggered by the user in the interface layer, the results output layer retrieves the latest results from the core calculation layer, generates the corresponding file, and triggers browser download, completing the local persistent storage of the data. Figure 9 As shown. Specifically, it supports the following three output formats:
[0098] 1. Export in JSON format: Outputs the coordinates of the polygon drawn by the user and the geometric information of the reference line segments;
[0099] 2. Export in CSV format: Outputs a table of projection analysis results for all stations within the selected range. Fields include station name, distance to fault, parallel component velocity, vertical component velocity, parallel component uncertainty, vertical component uncertainty, etc.
[0100] 3. Interactive graphic files: Parallel velocity profiles and vertical velocity profiles are generated using Plotly.js. The graphs include error bars and station labels and support interactive viewing.
[0101] S6: Internationalization Support and System Deployment
[0102] 1. Internationalization support is achieved.
[0103] The system front-end adopts a lightweight internationalization solution. By establishing a Chinese-English language pack dictionary and binding it to the user interface (UI) switch button event, when the user clicks to switch languages, the system triggers a global state update, re-rendering all interface text and labels to achieve dynamic language switching without page refresh.
[0104] 2. System deployment architecture and technical reproducibility:
[0105] This invention employs a lightweight, pure front-end system architecture (based on HTML, CSS, and JavaScript technology stacks), eliminating the need for a complex back-end server environment. Its project code and static resources can be directly hosted on various static website hosting platforms (GitHub Pages). Users do not need to install any dedicated client software or plugins; they only need to access the specified web address (URL) through a modern browser to load observation data and run the aforementioned fault projection analysis and visualization process. Furthermore, this technical solution is highly reproducible. Those skilled in the art, based on the technical solution disclosed in this application, can obtain the corresponding program code, load standard-format observation data in a local or server environment, and execute the corresponding script code to reproduce all the technical effects of the aforementioned functional modules.
[0106] This invention also proposes a system for visualizing and interactively analyzing GNSS velocity field products for network users, such as... Figure 10 As shown, the system adopts a layered architecture design, including: data management layer, interface layer, interaction control layer, core computing layer, visualization presentation layer and result output layer.
[0107] The data management layer uses a global singleton pattern to construct a system-level state object for implementing memory-level data caching.
[0108] The interface layer is configured with web page interactive controls and an event listening module, which is used to receive user instructions and convert user operations into a standardized instruction stream, which is then transmitted to the interactive control layer in real time.
[0109] The interactive control layer captures geometric events drawn by the user on the front end to generate vector geometric data, extracts cached GNSS velocity vector data from the data management layer and filters out data within the target area, and encapsulates the vector geometric data and the filtered GNSS velocity vector data into a unified parameter object, thereby synchronously triggering the projection calculation task of the core computing layer.
[0110] The core computing layer is used to receive the parameter object, perform projection decomposition calculations, generate a structured result dataset, and send it to the visualization layer.
[0111] The visualization layer receives the structured result dataset from the core computing layer and responds to rendering commands from the interactive control layer. The visualization layer calls the map engine API to dynamically redraw vector symbols and update the layer stacking order based on the projection result dataset, thereby updating the map view in real time and forming a visual feedback loop.
[0112] The output layer is used to respond to the export instructions forwarded by the interactive control layer, obtain the computation results of the core computing layer, convert them into a preset data exchange format or encapsulate them into interactive visualization charts, and trigger the file download operation on the browser side.
[0113] The system has clearly defined responsibilities at each layer. Through event-driven mechanisms, global singleton state management, and asynchronous callback strategies, it achieves loosely coupled communication between layers, ensuring efficient closed-loop data flow and control flow.
[0114] Other embodiments and alternatives
[0115] Those skilled in the art should understand that the above embodiments are merely preferred embodiments of the present invention and are not intended to limit the scope of protection of the present invention. Based on the core concept of the present invention, the following substitutions or extensions can be made:
[0116] Visualization component alternatives: Visualization layers are not limited to Leaflet.js; similar map engines such as OpenLayers.js can also be used. They also support map overlay and dynamic vector drawing, differing only in API calls (such as the addLayer method), but the underlying technology and implementation are the same.
[0117] Alternative projection methods: Projection calculations are not limited to Gaussian projection. Depending on the application scenario, Mercator projection can also be used. Its formula is adjusted to be based on spherical coordinate transformation. Although the accuracy is slightly lower at the continental scale, it is more suitable for macroscopic displays on a global scale.
[0118] Rendering technology alternatives: For rendering high-density vector data, WebGL (such as the Three.js library) can be used to replace Canvas for data loading and drawing, thereby further improving graphics processing performance.
[0119] Alternative System Architecture (Complete Replacement): This invention can also adopt the traditional architecture of "backend computing + frontend display". For example, the backend service can be built using the Python Flask framework, and the frontend can use React.js; the data is hosted in a cloud database (such as AWS S3), and the backend performs projection calculations and returns JSON data. Although this solution increases server costs, it can still achieve the dynamic display and analysis functions of this invention.
[0120] Application terminal replacement (complete replacement): This invention can also be implemented as a mobile application (App). For example, it can be developed using the React Native framework, supporting offline data caching; the interaction method is adapted to touch-draw polygons, and projection calculations are run on the local device, thereby enabling mobile research anytime, anywhere.
[0121] The above are merely preferred embodiments of the present invention and should not be considered as limiting the scope of the present invention. All equivalent variations and improvements made within the scope of the present invention should still fall within the patent coverage of the present invention.
Claims
1. A method for GNSS velocity field product visualization, interactive analysis for network users, characterized in that, Includes the following steps: S1: Initialize the runtime environment, load the geophysical dataset, parse it, and cache it; S2: Render the user interface through the interface layer, capture the user's operation events in real time, and convert them into an instruction stream to pass to the interaction control layer. The operation events include at least layer display control, display parameter adjustment, view zoom operation, and instructions to trigger core analysis functions. S3: The instruction stream is parsed through the interactive control layer, the vector geometric data of the target area is extracted based on the graphics drawing module, and the GNSS velocity vector data located in the target area is filtered out. The vector geometric data and the filtered GNSS velocity vector data are exported to the core computing layer to start the computing process. At the same time, it responds in real time to the view scaling operation and display parameter adjustment, dynamically adapts and controls the display level and visual symbols of the layers, so as to achieve visual level optimization of multi-layer overlay; S4: The core computing layer receives the vector geometric data and GNSS velocity vector data, and performs projection decomposition calculation on the GNSS velocity vector data based on the map projection algorithm and the error propagation law, thereby calculating the parallel component velocity, vertical component velocity and their corresponding uncertainty of each GNSS velocity vector data relative to the fault. S5: The visualization layer receives the calculation results from the core computing layer, calls the map engine API to dynamically render the speed profile, and redraws the vector arrow symbols and layer stacking order according to the real-time status of the map view to form a visual feedback loop. S6: The result output layer responds to the export instruction forwarded by the interaction control layer, obtains the latest calculation results from the core computing layer, converts them into a preset format file, and triggers local download.
2. The network user oriented GNSS velocity field product visualization, interactive analysis method according to claim 1, characterized in that, The geophysical dataset in S1 includes: GNSS velocity vector data, active fault geometry data, historical earthquake catalog data, fault slip rate data, surface strain rate distribution grid data, and earthquake focal mechanism solution data.
3. The network user oriented GNSS velocity field product visualization, interactive analysis method according to claim 1, characterized in that, The S3 step of extracting vector geometric data of the target area specifically includes: responding to mouse click or touch events, dynamically drawing polygons and line segments on the front end, and rendering the drawing trajectory in real time in the map view; automatically retrieving and extracting GNSS velocity vector data within the range based on the geometric range of the polygons and line segments, and encapsulating the geometric coordinates into a unified parameter object.
4. The method for visualizing and interactively analyzing GNSS velocity field products for network users according to claim 1, characterized in that, The projection decomposition calculation in S4 includes the following steps: (1) Read the velocity vectors of each GNSS in the target area from the system memory cache and obtain their eastward velocity. and northbound speed ; (2) Construct a local fault coordinate system based on the line segments and polygon geometric features drawn by the user in the interface layer; (3) Calculate the strike azimuth of the fault based on the fault reference system. ; (4) Establish a local coordinate system with the fault strike as the Y-axis and the perpendicular fault as the X-axis, and define the velocity vector for each station ( , Perform a two-dimensional rotational transformation to decompose it into parallel fault components. With vertical fault components Its decomposition formula is: ; ; in Indicates parallel fault components, Indicates the vertical fault component; (5) Based on the least squares error propagation law and the covariance matrix C of the original velocity components, calculate the uncertainty of the projected components. Let the original covariance matrix be: ; in, This represents the variance of the eastward velocity component. This represents the variance of the northbound velocity component. Represents covariance; The rotation matrix is: ; The projected covariance matrix is then... The uncertainties for the parallel and perpendicular components are respectively: ; ; in, and The corresponding projected covariance matrices are respectively The diagonal elements in the matrix, with subscripts 11 and 22, refer to the first row and first column of the matrix and the second row and second column, respectively. (6) Calculate the vertical distance from each station to the fault line, and send the structured result set containing projection components, uncertainty and distance information to the visualization layer and the result output layer.
5. The method for visualizing and interactively analyzing GNSS velocity field products for network users according to claim 1, characterized in that, The dynamic rendering of the velocity profile in S5 specifically includes: calling an interactive plotting library to draw an interactive scatter plot containing error bars and station labels, with the distance between parallel and vertical faults as the horizontal axis and the velocity components as the vertical axis.
6. The method for visualizing and interactively analyzing GNSS velocity field products for network users according to claim 1, characterized in that, The preset format files in S6 include JSON format, CSV format, and interactive graphic files.
7. A system applicable to the GNSS velocity field product visualization and interactive analysis method for network users as described in any one of claims 1-6, characterized in that, include: Data management layer, interface layer, interaction control layer, core computing layer, visualization layer, and result output layer; The data management layer uses a global singleton pattern to construct a system-level state object for implementing memory-level data caching. The interface layer is configured with web page interactive controls and an event listening module, which is used to receive user instructions and convert user operations into a standardized instruction stream, which is then transmitted to the interactive control layer in real time. The interactive control layer captures geometric events drawn by the user on the front end to generate vector geometric data, extracts cached GNSS velocity vector data from the data management layer and filters out data within the target area, and encapsulates the vector geometric data and the filtered GNSS velocity vector data into a unified parameter object, thereby synchronously triggering the projection calculation task of the core computing layer. The core computing layer is used to receive the parameter object, perform projection decomposition calculations, generate a structured result dataset, and send it to the visualization layer. The visualization layer receives the structured result dataset from the core computing layer and responds to rendering instructions from the interactive control layer. The visualization layer calls the map engine API to dynamically redraw vector symbols and update the layer stacking order based on the projection result dataset, thereby updating the map view in real time and forming a visual feedback loop. The output layer is used to respond to the export instructions forwarded by the interactive control layer, obtain the computation results of the core computing layer, convert them into a preset data exchange format or encapsulate them into interactive visualization charts, and trigger the file download operation on the browser side.
8. The GNSS velocity field product visualization and interactive analysis system for network users according to claim 7, characterized in that, The system is developed based on JavaScript full-stack technology and deployed on the GitHub Pages platform. It enables cross-platform access without the need to install a client through static web page hosting services.