Meteorological data visualization method and device, electronic equipment and storage medium

Abstract

The invention relates to the technical field of meteorological data visualization, in particular to a meteorological data visualization method and device, electronic equipment and a storage medium. According to the meteorological data visualization method and device, firstly, a lightweight multi-resolution data organization unit is established based on a spatial index, a server-side pre-rendering slice is replaced, the storage pressure is reduced, and the data updating flexibility is improved; secondly, a dynamic thread pool and a load balancing mechanism are adopted, data processing tasks are intelligently decomposed and executed in parallel, client computing resources are fully utilized, the processing efficiency is remarkably improved, then coordinate conversion, interpolation and graph drawing are completed in a working thread through an off-screen rendering engine, calculation and rendering decoupling is achieved, and the system performance is improved. And finally, an incremental updating mechanism and a dirty marking technology are introduced, only local redrawing is carried out on a change area, and a cache multiplexing mechanism is combined, so that global rendering overhead is effectively avoided, and real-time, smooth and high-interactivity visualization of mass meteorological data is realized at a Web end.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of meteorological data visualization, and in particular to a meteorological data visualization method and device, an electronic device, and a storage medium. BACKGROUND

[0002] Meteorological grid data is the core carrier in the field of meteorological data, and occupies a pivotal position in professional meteorological information systems due to its massive storage, high-frequency update, and multi-dimensional fusion. In the daily operation of Web-based meteorological information systems, efficient loading and accurate presentation of meteorological grid data is not only the core embodiment of the basic functions of the system, but also the key to providing real and reliable meteorological data support for system scenario construction. In related technical practices, Web-based meteorological information systems implement the loading and dynamic display of meteorological data in two main systems. One system relies on grid data processing and service. Specifically, the system first renders and slices the meteorological grid data to be loaded. Then, the sliced data is published through a background service. On the Web side, the system displays real-time meteorological data by calling the slicing service. The other system combines background services with front-end rendering to publish meteorological data as a whole grayscale image. On the Web side, the system uses a single canvas to render and display the whole grayscale image.

[0003] However, the display method of pre-slicing processing by the backend not only requires completing multi-dimensional data slicing (color-filled maps, numerical maps, contour lines, etc.) in advance, but also requires a time-consuming and exponentially growing amount of data for single-element slicing. Moreover, multiple tile data in different rendering forms need to be stored for the same spatial location, resulting in a decline in storage space utilization. When new elements are added or rendering parameters are adjusted, all associated slices need to be regenerated, and the system cannot be updated and displayed in a timely manner, nor can it respond to the demand for real-time updating of rendering parameters on the front end. The method of publishing a whole grayscale image by the backend and rendering by the front end using a single canvas requires the system to render the whole grayscale image. When the system performs operations such as dragging and zooming, it will perform global redrawing on the entire system, resulting in a high proportion of invalid rendering. This method requires a high-performance browser and may cause browser crashes in high-resolution scenarios.

[0004] Therefore, the existing technology cannot achieve a good balance between storage efficiency, rendering performance, and interactive real-time performance. SUMMARY

[0005] Therefore, the present application aims to provide a meteorological data visualization method and device, an electronic device, and a storage medium to improve the efficiency and real-time performance of meteorological data visualization.

[0006] In a first aspect, the embodiments of the present application provide a meteorological data visualization method, applied to a client, the client being in communication connection with a browser; the method comprises: obtaining original spatial data from a server, and establishing a set of multi-resolution spatial units associated with the original spatial data based on a spatial index, wherein each spatial unit has corresponding spatial range description information; in response to a view state change, determining a target unit set from the set of spatial units; decomposing and scheduling data processing tasks for the target unit set to a plurality of parallel execution threads; for each independent work thread, performing data interpolation, coordinate conversion and graphic rendering operations based on the grid unit corresponding to the allocated parallel subtask, to generate corresponding image slice data; delivering the image slice data generated by each work thread to the main thread for synthesis and display, and identifying and redrawing the area where the content has changed through an incremental update mechanism.

[0007] In combination with the first aspect, the step of establishing a set of multi-resolution spatial units associated with the original spatial data based on a spatial index comprises: parsing the metadata of the original spatial data to obtain the spatial reference information and coverage range corresponding to the original spatial data; constructing a multi-level grid structure covering the coverage range according to a preset projection rule and hierarchical strategy, wherein each level corresponds to a specified spatial resolution; for each grid unit in the multi-level grid structure, generating and storing the meta information of the grid unit, the meta information at least including the level to which the unit belongs, a unique identifier and its spatial coordinate boundary.

[0008] In combination with the first aspect, after the step of generating and storing the meta information of each grid unit in the multi-level grid structure, the method further comprises: establishing a cache pool associated with the multi-level grid structure to store the meta information of the grid unit and / or intermediate data and result data generated in subsequent processing.

[0009] In combination with the first aspect, in response to the view state change, the step of determining the target spatial range to be rendered in the current view based on the pre-established spatial index comprises: obtaining the viewport parameters of the current view, the viewport parameters at least including the center point coordinates, the zoom level and the view range; matching the spatial grid level corresponding to the detail level in the pre-established spatial index according to the zoom level; querying and filtering one or more spatial grids whose geographical range intersects or falls within the view range in the matched spatial grid level according to the view range; The one or more spatial grids screened out are determined as a target spatial range to be rendered.

[0010] In combination with the first aspect, the step of decomposing and scheduling the data processing task for the target unit set to a plurality of parallel computing threads comprises: According to the characteristics of each spatial unit in the target unit set, the overall data processing task is decoupled into independent sub-tasks corresponding to a single or multiple spatial units; A thread pool dynamically managing a plurality of computing threads is constructed and maintained, and the load state of each computing thread is monitored in real time; Based on the load state of each computing thread, the independent sub-tasks are scheduled and distributed to the computing threads with a load lower than a preset threshold for execution.

[0011] In combination with the first aspect, the step of performing data interpolation, coordinate conversion and graphic rendering operations based on the grid unit corresponding to the allocated parallel sub-task to generate corresponding image slice data comprises: An independent off-screen rendering buffer is created in the thread for the grid unit corresponding to the parallel sub-task; In the off-screen rendering buffer, the coordinates of the grid unit are converted from a first coordinate system to a second coordinate system, and interpolation calculation is performed on the original data corresponding to the converted coordinate position to obtain rendering data values; According to the preconfigured rendering rule, the rendering data values are used to perform graphic drawing in the off-screen rendering buffer to generate image slice data corresponding to the grid unit.

[0012] In combination with the first aspect, the step of passing the image slice data generated by each worker thread to the main thread for synthesis and display, and identifying and redrawing the area where the content has changed through an incremental update mechanism comprises: Receiving the completed image slice data transmitted by each worker thread; Splicing and fusing the received image slice data according to the spatial position relationship of the corresponding grid unit in the display buffer to form a complete visual view; Based on the state identifier maintained for each spatial unit, detecting the spatial unit whose state identifier indicates a change in the current rendering period; Only for the spatial unit whose state identifier indicates a change, updating the corresponding area in the display buffer.

[0013] In the second aspect, the embodiments of the present application provide a meteorological data visualization device, applied to a client, the client being in communication connection with a browser; the device comprises: The acquisition module is configured to acquire original spatial data from a server and establish a set of multi-resolution spatial units associated with the original spatial data based on a spatial index, wherein each spatial unit has corresponding spatial range description information; The determination module is configured to determine a target unit set from the set of spatial units in response to a view state change; The decomposition module is configured to decompose and schedule a data processing task for the target unit set to a plurality of parallel computing threads; The slicing module is configured to, for each independent work thread, perform data interpolation, coordinate conversion and graphic rendering operations based on the grid unit corresponding to the allocated parallel subtask to generate corresponding image slice data. The display module is configured to deliver the image slice data generated by each work thread to a main thread for synthesis and display, and identify and redraw the area where the content has changed through an incremental update mechanism.

[0014] In a third aspect, the present application provides an electronic device, comprising a memory and a processor, the memory is used to store a computer program, and the processor runs the computer program to make the electronic device execute the method described above.

[0015] In a fourth aspect, the present application provides a readable storage medium, which stores computer program instructions, and the computer program instructions are read and run by a processor to execute the method described above.

[0016] The embodiments of the present application have the following beneficial effects: firstly, the present application establishes a lightweight multi-resolution data organization unit based on a spatial index, which replaces the server-side pre-rendered slice, reduces the storage pressure and improves the data update flexibility, secondly, the dynamic thread pool and the load balancing mechanism are adopted to intelligently decompose and execute the data processing task in parallel, fully utilizes the client computing resources, significantly improves the processing efficiency, further, the coordinate conversion, interpolation and graphic rendering are completed in the work thread through the off-screen rendering engine, realizes the decoupling of calculation and rendering, guarantees the smoothness of the main thread interaction, finally, the incremental update mechanism and the dirty marking technology are introduced, only the changed area is locally redrawn, combined with the cache reuse mechanism, the global rendering overhead is effectively avoided, so that the real-time, smooth and high-interactive visualization of massive meteorological data is realized on the Web.

[0017] Other features and advantages of the present application will be set forth in the following description, and in part will become apparent to those skilled in the art from the description, or can be learned by practice of the present application. The objects and other advantages of the present application will be realized and achieved by the structure particularly pointed out in the description, claims and drawings.

[0018] In order to make the above objectives, characteristics and advantages of the present application more apparent, clear and easy to understand, the following preferred embodiments are specifically described below with reference to the accompanying drawings. BRIEF DESCRIPTION OF DRAWINGS

[0019] In order to more clearly illustrate the specific embodiments of the present application or the technical solutions in the prior art, the following will briefly introduce the drawings needed to be used in the specific embodiments or the prior art description. Obviously, the drawings described below are some embodiments of the present application, and other drawings can also be obtained by those skilled in the art without creative labor on the basis of these drawings.

[0020] Figure 1 A flowchart of a weather data visualization method provided by an embodiment of the present application is shown in the figure. Figure 2 A flowchart of a weather data visualization method provided by an embodiment of the present application is shown in the figure. Figure 3 A device schematic diagram of a weather data visualization method provided by an embodiment of the present application is shown in the figure. Figure 4 An electronic device structure schematic diagram provided by an embodiment of the present application is shown in the figure.

[0021] Reference signs: 10 - acquisition module, 20 - determination module, 30 - decomposition module, 40 - slicing module, 50 - display module; 130 - processor, 131 - memory, 132 - bus, 133 - communication interface. DETAILED DESCRIPTION

[0022] In order to make the objectives, technical solutions and advantages of the embodiments of the present application more apparent, the technical solutions of the present application will be described clearly and completely below with reference to the accompanying drawings. Obviously, the described embodiments are some embodiments of the present application, but not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor fall within the scope of protection of the present application.

[0023] In order to facilitate the understanding of the present embodiment, the technical terms designed in the present application will be briefly introduced below.

[0024] WebWorker is a browser multithreading API provided by HTML5, which allows independent JavaScript threads to run in the background and execute computationally intensive tasks in parallel with the main thread to avoid blocking user interface interactions.

[0025] Web Mercator coordinates are Cartesian coordinates in meters, so that the distance calculation, range intersection judgment, coordinate interpolation and other operations of the grid can directly use the plane geometry algorithm, and the calculation complexity is much lower than that of spherical geographic coordinates.

[0026] After introducing the technical terms involved in the present application, next, the application scenarios and design ideas of the embodiments of the present application are simply introduced.

[0027] Traditional weather data visualization relies on server-side pre-rendering slices or front-end global redrawing, resulting in large storage pressure, update lag, and interactive lag, which is difficult to meet the real-time and efficient front-end rendering requirements.

[0028] Therefore, the embodiments of the present application provide a weather data visualization method, device, electronic equipment and storage medium, to realize efficient, smooth and real-time visualization of weather data.

[0029] Embodiment 1 The present application provides a weather data visualization method, applied to a client, and the client is in communication connection with a browser. Figure 1 As shown in the figure, the method comprises: S110, obtaining original spatial data from a server, and establishing a multi-resolution spatial unit set associated with the original spatial data based on a spatial index, wherein each spatial unit has corresponding spatial range description information.

[0030] S120, in response to a view state change, determining a target unit set from the spatial unit set.

[0031] S130, decomposing and scheduling data processing tasks for the target unit set to a plurality of parallel execution threads.

[0032] S140, for each work thread independently, based on the grid unit corresponding to the allocated parallel subtask, performing data interpolation, coordinate conversion and graphic rendering operations to generate corresponding image slice data.

[0033] S150, passing the image slice data generated by each work thread to the main thread for synthesis and display, and identifying and redrawing the area where the content has changed through an incremental update mechanism.

[0034] The application realizes data lightweight organization by constructing a multi-resolution spatial unit set, replaces server-side pre-rendering to reduce storage pressure, dynamically decomposes tasks in response to view changes, and schedules to a scalable thread pool for parallel processing, optimizes computing resources, uses off-screen canvas in independent threads to complete data interpolation, coordinate conversion and graphic rendering, ensures smooth main thread flow, and finally realizes incremental update through the dirty flag mechanism, only redraws the changed area to avoid global rendering overhead. In this way, by comprehensively using spatial indexing, multi-thread scheduling, off-screen rendering and incremental update technology, the performance bottleneck and interaction lag problem in real-time visualization of massive meteorological data are effectively solved.

[0035] In combination with the first aspect, the step S110 of establishing a multi-resolution spatial unit set associated with the original spatial data based on the spatial index specifically includes: S111, parsing the metadata of the original spatial data to obtain the spatial reference information and coverage range corresponding to the original spatial data.

[0036] S112, constructing a multi-level grid structure covering the coverage range according to a preset projection rule and hierarchical strategy, wherein each level corresponds to a specified spatial resolution.

[0037] S113, for each grid cell in the multi-level grid structure, generating and storing the meta information of the grid cell, the meta information at least including the level to which the cell belongs, a unique identifier and its spatial coordinate boundary.

[0038] In step S110, the original meteorological grid data (such as a single gray-scale image) obtained by the client from the server through the meteorological real-time data service interface is not simple data, but is accompanied by a set of metadata describing its spatial and physical properties. These metadata are the key input for constructing the front-end visualization framework, specifically including: Data range: i.e. longitude and latitude boundaries (such as Min / Max Lon / Lat), which define the spatial coverage of the data.

[0039] Resolution: including spatial granularity (such as kilometers / pixel) and temporal granularity (such as forecast time), which determines the degree of detail of the data.

[0040] Rendering form: such as filled color map, grid value (numerical map), wind vector (vector map), etc., which indicates the expected visualization type of the data.

[0041] Data elements: such as temperature, precipitation, wind speed, etc., which identify the physical meaning of the data.

[0042] After receiving the original spatial data and metadata, the client interface first performs parsing and format conversion, and stores it in the front-end persistent storage (such as IndexedDB). The purpose of parsing is to convert the data provided by the server, which may have a specific format, into a uniform and efficient internal data structure for the front-end, in order to extract the coverage range and spatial reference information.

[0043] The spatial reference information refers to a set of metadata that describes the spatial coordinate system and its parameters used by the data. It defines how the coordinates of the data are mapped to the real earth surface, ensuring that data from different sources or different processing stages can be correctly overlaid, aligned and displayed. In the embodiments of the present application, the coordinate system is a projection coordinate system, and when the front-end performs grid division and display, it needs to convert geographic coordinates to plane coordinates. Web Mercator projection (EPSG:3857) is the key projection coordinate system. The spatial reference information will specify this conversion rule. Spatial reference information is the fundamental basis for the front-end to perform coordinate conversion. For example, converting the latitude and longitude coordinates (geographic coordinate system) obtained from the server to the plane pixel coordinates (screen coordinate system) required by the front-end Canvas drawing must be achieved through the projection rule (such as Web Mercator) defined in the spatial reference information. Without accurate spatial reference information, the data cannot be correctly rendered to the corresponding position on the map.

[0044] The coverage range refers to the specific area occupied by the original meteorological data in space, usually given in the form of boundary coordinates (including precision). In the present embodiment, the projection rule preset in step S112 adopts Web Mercator projection, which is a standard projection widely used in Web maps. Through this projection, the latitude and longitude coordinates of the earth's surface can be converted to plane X, Y coordinates, facilitating regular division and distance calculation on the screen with equal angles. The hierarchical strategy is to construct a regular multi-level grid pyramid. The bottom layer (low level) of the pyramid covers the entire data range, but the grid cell size is large and the resolution is low; as the level increases, the grid of each level is continuously subdivided, the grid cell size decreases and the spatial resolution increases, but the geographical range covered is the same (i.e. higher levels provide more detailed views). This multi-resolution grid system from coarse to fine perfectly matches the zoom operation (LOD, level of detail) of the map.

[0045] The client creates a set of rule grid pyramids from low to high, layer by layer, in the geographical range covered by the data according to the pre-set map projection rules (typically, Web Mercator projection applicable to Web maps) and hierarchical refinement strategies. The projection rules ensure that the geographical coordinates can be accurately converted into plane coordinates to adapt to screen display; the hierarchical strategy establishes multiple levels of detail, so that each level has a fixed spatial resolution (i.e. the actual distance on the ground represented by a pixel), and the high-level grid is subdivided more densely and has higher resolution to present more details, and the low-level grid is larger and has lower resolution for quick overview. The establishment of this structured grid system discretizes continuous space into a collection of independently addressable and processable units, laying a precise spatial indexing foundation for subsequent parallel task decomposition, on-demand loading, and multi-scale visualization.

[0046] Subsequently, in step S113, an accurate digital archive is constructed for each unit in the spatial grid pyramid, which is the cornerstone of efficient parallel visualization processing. Specifically, the system generates and persistently stores a set of key meta-information for each grid unit: the level is used to identify the unit's position in the multi-level detail structure, directly associated with the map zoom level; the unique identifier is usually generated by combining the level, row number and column number, serving as the global identity of the grid unit, supporting fast retrieval and task distribution; the spatial coordinate boundary precisely defines the geographical coverage of the unit, including two sets of boundary data of projection coordinates and latitude and longitude coordinates. These meta-information collectively constitute the core of the front-end spatial index, enabling the system to accurately perform key operations such as view matching, coordinate conversion, data clipping and image stitching. By establishing this complete grid meta-information system, the originally continuous geographical space is deconstructed into a collection of independently addressable and parallel processable discrete units, providing the necessary spatial framework and data support for subsequent dynamic task scheduling, multi-thread rendering and intelligent area updating, ultimately achieving stepless zooming and efficient rendering from macro overview to micro detail.

[0047] In combination with the first aspect, after step S113, the method further includes: S114, establishing a cache pool associated with the multi-level grid structure to store the meta-information of the grid units and / or intermediate data and result data generated by subsequent processing.

[0048] Step S114, on the basis of the spatial grid digital archive established in step S113, establishes a front-end intelligent cache pool associated with the depth of the multi-level grid structure, to achieve dynamic management of two types of data in the grid meta-information and subsequent processing pipeline: one is the basic spatial index information such as grid level, coordinate boundary, and the other is intermediate and result data including parsed data blocks, coordinate conversion intermediate results, and rendered image slices. The established front-end cache pool uses the least recently used principle to evict old data, maintains an ordered data queue to simulate the time access heat of all cache items, and performs the following precise operation logic: Hotness update when read hits: when the system needs a certain piece of data (such as a rendering slice of a specific grid) and successfully finds it in the cache, this read behavior will be immediately converted into a heat reinforcement signal - the data block will be moved to the front end of the cache queue and marked as "most recently used". This process not only completes data retrieval, but also dynamically maintains data priority, ensuring that high-frequency access resources are always in the fast access zone; Intelligent replacement when writing updates: when new data needs to be stored in the cache (such as a newly rendered image slice), the system performs layered decision-making: (1) Data already exists, update operation is performed, and the data is moved to the front end of the queue, synchronizing its content and heat; (2) Data does not exist and cache is not full: directly insert new data into the front end of the queue as a new "hot" resource; (3) Data does not exist and cache is full: trigger the eviction mechanism - automatically remove the data item at the tail end of the queue (i.e., the least recently accessed), and then insert the new data into the front end. This process is like an automated resource filter that continuously replaces "cold data" out of the limited memory space.

[0049] Therefore, this LRU cache pool is not a passive storage container, but a high-performance data service layer that can perceive interactions, predict needs, and dynamically optimize the static spatial grid established in step S113, facilitating front-end high-performance visualization.

[0050] It is worth mentioning that the above-mentioned LRU cache pool cooperates with the space index depth to dynamically calculate the accurate level and complete meta information description of all tiles to be rendered falling within the current viewport according to the map view state (i.e. the visual area defined by the projection range) generated by the current user interaction and the zoom level. This calculation process uses the pre-established grid pyramid meta information matrix for fast spatial relationship matching, which can instantly determine which specific spatial units need to participate in the rendering of the current frame. Subsequently, the system quickly locates and extracts the parsed meteorological data block in the corresponding spatial range from the meteorological data cache system like using accurate coordinate indexing by using the generated meta information of the tiles to be rendered (including its unique identifier, level and accurate geographic coordinate boundary). This design realizes the fast direct connection from visual interaction intention to raw data acquisition, avoids the performance overhead of traversing or querying the entire data set, ensures that even in the context of massive meteorological data, the system can lock the required data subset in real time and accurately according to the view change, provides stable, low-latency and high-quality data supply for the subsequent multi-threaded parallel rendering pipeline, thereby forming a key data bridge from dynamic interaction to efficient rendering.

[0051] In combination with the first aspect, step S120 comprises: S121, obtaining the viewport parameters of the current view, the viewport parameters at least including the center point coordinates, the zoom level and the view range.

[0052] Step S121 first obtains the core viewport parameters of the current view, which includes the center point coordinates defining the spatial position of the view, the zoom level determining the display detail level, and the actual view range (usually a geographic coordinate boundary rectangle) calculated by the map projection. These parameters together constitute the digital description of "what the user wants to see" and "how detailed to see", which are the original inputs driving all subsequent processing logic.

[0053] S122, according to the zoom level, matching the spatial grid level corresponding to the detail level in the pre-established space index.

[0054] Step S122 matches the level in the pre-established multi-resolution spatial grid index according to the obtained zoom level. Since the spatial index is a multi-level pyramid structure from overview to detail, the essence of this step is to map the continuous zoom value to the discrete grid level that best meets the current visual accuracy requirement. For example, high zoom level (zoomed-in view) corresponds to deep layers with higher subdivision and smaller grid cells in the pyramid to present details; low zoom level corresponds to shallow layers with larger grid cells for quick global display. This step ensures that the spatial resolution of the data used in subsequent processing is accurately aligned with the user's viewing needs.

[0055] S123, according to the view range, in the matched spatial grid level, query and filter one or more spatial grids whose geographical range intersects or falls within the view range.

[0056] Step S123 performs an efficient spatial range query in the matched specific spatial grid level. The system performs a fast spatial relationship calculation (such as intersection or inclusion judgment) between the geographical range of the current view and the pre-stored coordinate boundaries of all grid cells in this level, and filters out all grid cells whose geographical range intersects or falls within the current view. This is equivalent to quickly circling all tiles that fall within the lens frame on a grid map of a specified scale.

[0057] S124, determine the filtered one or more spatial grids as the target spatial range to be rendered.

[0058] Step S124 formally determines the one or more spatial grids filtered in the previous step as the target spatial range to be rendered. At this time, the abstract "view" concept is converted into a series of specific, independent, addressable spatial processing units (target grid set). This set accurately defines the entire geographical area that needs to be calculated and rendered for the synthesis of the current screen, providing a clear and unambiguous spatial partition list for the subsequent decomposition of macro rendering tasks into parallel executable micro tasks.

[0059] The entire S120 process essentially constructs an automatic decision-making chain of perception-mapping-filtering-determination, which ensures that the system's computing resources can be accurately deployed to the screen area that the user is really interested in within milliseconds, thereby achieving high performance and high responsiveness.

[0060] In combination with the first aspect, step S130 includes: S131, according to the characteristics of each spatial unit in the target unit set, decouple the overall data processing task into independent sub-tasks corresponding to a single or multiple spatial units.

[0061] In step S131, the macro data processing task is intelligently decoupled according to the characteristics of each spatial unit in the target unit set. This process strictly follows the calculation results of the front-end view visible area: the system generates independent processing sub-tasks for each spatial unit that falls within the visible range (corresponding to the sliced grid under the Web Mercator projection). Each sub-task carries complete grid meta information, including grid ID, data level, geographical coordinate range, resolution, and the meteorological elements and rendering type (such as temperature fill-in graph or wind vector graph) corresponding to the grid. This spatial grid-based task division method forms a multi-resolution task system from coarse to fine, so that the rendering request of massive meteorological data is converted into a large number of parallel executable standardized computing units.

[0062] S132, a thread pool capable of dynamically managing multiple computing threads is constructed and maintained, and the load status of each computing thread is monitored in real time.

[0063] In step S132, the system constructs and maintains a dynamically managed thread pool based on WebWorker technology. The thread pool has resource-aware elastic scheduling capability: by monitoring browser performance indicators and host resource status (such as CPU occupancy, memory usage) in real time, the system can dynamically adjust the number of active working threads to accurately adapt to the complexity of current data processing (including data volume and computing intensity). This mechanism ensures the dynamic balance between computing resource supply and actual load demand, avoiding resource idling or overload.

[0064] S133, based on the load status of each computing thread, the independent subtask is scheduled and distributed to the computing thread with load lower than the preset threshold.

[0065] In step S133, the system realizes intelligent distribution of subtasks through load balancing algorithm. The thread pool uses the least connection number algorithm to monitor the number of pending tasks of each working thread in real time, and always distributes newly arrived independent subtasks to the thread with the least number of connections and the lightest load. This dynamic load-aware scheduling strategy effectively solves the common load imbalance problem in multi-thread environment, i.e. some threads are overloaded and queued while others are idle. By ensuring that all working threads can operate efficiently, the system significantly improves the utilization of computing resources and overall processing performance.

[0066] It is worth emphasizing that the entire scheduling process is deeply coordinated with the data preprocessing link. When the subtask is assigned to a specific working thread, the thread will read the meteorological data block in the corresponding spatial range from the cache or server according to the grid element information attached to the task, and through techniques such as coordinate conversion, Canvas clipping and drawing (drawImage), it will accurately extract the meteorological data required by the grid. After standardization and encapsulation, all the latitude and longitude ranges, resolutions, value ranges (maximum and minimum values), rendering types (filling / color / wind feather / grid point), coordinate projection parameters (such as WGS84 to Web Mercator), and the latitude and longitude boundaries and resolution of the slice itself will be sent to the off-screen Canvas rendering engine for subsequent calculation. This complete link not only realizes the parallel decomposition and scheduling of computing tasks, but also reduces the amount of data transmission between threads (only necessary data blocks are transmitted instead of full data) and optimizes resource allocation, building a high-throughput, low-latency meteorological data parallel processing framework.

[0067] In combination with the first aspect, the step of performing data interpolation, coordinate conversion and graphic rendering operations based on the grid elements corresponding to the allocated parallel subtasks in step S140 to generate corresponding image slice data comprises: S141, creating an independent off-screen rendering buffer for the grid cell corresponding to the parallel subtask in the thread.

[0068] In step S141, an independent off-screen rendering buffer (Offscreen Canvas) is created for each grid cell corresponding to the parallel subtask. This buffer is initialized within the Web Worker thread. When the WebWorker thread receives a parallel subtask (corresponding to a specific grid cell), it first creates an OffscreenCanvas object with the same size as the grid cell in the memory space of the current worker thread as a dedicated rendering buffer. This operation is equivalent to allocating an independent, off-screen "digital canvas" for each grid. This canvas is completely isolated from the visible Canvas in the main thread of the browser, and its creation and destruction do not trigger any DOM operations or interface redrawing, thus achieving physical decoupling of the graphics rendering environment and the user interface thread. This buffer will be the only carrier for all subsequent coordinate conversion, data interpolation, and graphics rendering operations.

[0069] S142, in the off-screen rendering buffer, converting the coordinates of the grid cell from the first coordinate system to the second coordinate system, and performing interpolation calculation on the original data corresponding to the converted coordinate position to obtain the rendering data value.

[0070] After entering step S142, the system performs the calculation-intensive tasks of precise spatial coordinate conversion and data interpolation, coordinate conversion, and graphics rendering in the off-screen rendering buffer. By configuring the rendering type and rendering parameters of each meteorological element in advance, different rendering operations are automatically selected to generate related slice data. Specifically, first, each grid point (pixel position) in the grid cell is traversed. According to its row and column index and the plane coordinate range and resolution stored in the grid cell information, the precise coordinates of the point on the Web Mercator projection plane (EPSG:3857) are calculated. Then, through the projection inverse transformation algorithm (i.e., inverse conversion of Web Mercator coordinates to WGS84 geographic coordinates), the latitude and longitude coordinates corresponding to the grid point are obtained. The mapping from the first coordinate system (plane projection coordinates) to the second coordinate system (geographic coordinates, or further to screen coordinates) is completed. Then, for each grid point's latitude and longitude position, the bilinear interpolation algorithm is used to obtain the true value of the meteorological data at that position from the original meteorological grayscale data block (already in cache or memory). Specifically, the algorithm finds the four nearest neighbor pixel points surrounding the latitude and longitude position on the grayscale image, calculates the weighted average value according to the distance weight, and thus obtains continuous and smooth grid point data. This step ensures that even if the original data resolution and grid resolution are inconsistent, high-quality, anti-aliasing visualization images can be generated.

[0071] S143, according to the pre-configured rendering rules, using the data to be rendered in the off-screen rendering buffer graphics drawing, generating a corresponding image slice data with the grid cell.

[0072] In step S143, according to the meteorological element type and the rendering category specified in the grid cell task, the corresponding rendering rules and parameter set are automatically loaded from the pre-configuration library. For example, the temperature element fill-in chart rule contains a complete color scale mapping table, and the wind speed and direction element wind vector chart rule contains arrow style, length scaling formula and angle offset parameters.

[0073] For the fill-in chart: the data value of each grid point obtained by interpolation is mapped to the pre-defined gradient color scale to determine its RGBA color, and a continuous heat map is generated on the off-screen canvas through the filling algorithm.

[0074] For the wind vector chart: based on the vector data (such as U / V components) of each grid point, the size, direction and color of the arrow are calculated, and the path drawing API is called to draw the wind direction symbol at the corresponding coordinates.

[0075] For the grid point chart: the data value is formatted as text or drawn as a discrete dot, and is accurately marked at the grid point.

[0076] All the above rendering operations are completed in the Offscreen Canvas context to form an image slice data corresponding to the grid cell.

[0077] After all the drawing operations are completed, the getImageData() method of OffscreenCanvas is called to serialize and extract the pixel data (RGBA array) in the canvas to form a complete image slice data (ImageData) corresponding to the grid cell. After rendering, the system serializes the pixel data through the getImageData interface and inter-thread communication (postMessage) and returns it to the WebWorker thread to efficiently transfer it to the main thread. Only the final pixel information of the grid is included, and no intermediate calculation data or original meteorological data is included. The complete decoupling architecture of calculation in Worker, rendering in Offscreen and result return to the main thread is realized, and the efficient encapsulation of calculation task and rendering output is realized.

[0078] In combination with the first aspect, step S150 comprises: S151, receiving the completed image slice data transmitted by each worker thread.

[0079] At step S140, each WebWorker thread, after finishing the rendering of its assigned grid cell, feeds back the ImageData object (i.e. image slice data) serialized by the getImageData() interface to the main thread via the postMessage method. Meanwhile, the image slice data is directly written into the corresponding independent canvas of each grid cell and the rendering results are stored in the LRU cache.

[0080] First, the main thread listens to and receives these data packets. This process achieves complete decoupling of computation and rendering, ensuring the smoothness of the main thread, as all heavy data interpolation and graphics generation work has been done in the background thread.

[0081] S152, the received image slice data is spliced and fused in the display buffer according to the spatial position relationship of its corresponding grid cell, forming a complete visual view.

[0082] Subsequently, based on the grid cell information attached to each slice data (especially its precise plane coordinate boundary), the image pyramid-based progressive synthesis technique is used to accurately place these slice images into the corresponding spatial position of the browser display buffer (i.e. a main Canvas or layer composition system). Since the coordinate range of each grid is known in advance and there is no overlap, the splicing process can be efficiently and accurately completed, ultimately forming a complete and continuous visual map view. Figure 1

[0083] S153, based on the state identifier maintained for each spatial cell, detect the spatial cell whose state identifier indicates a change in the current rendering period.

[0084] In the S153 stage, a set of fine dirty flag (Dirty Flag) state identifiers are maintained to dynamically track the visualization state changes of each grid cell. Specifically, when the system detects that the original meteorological data of a specific grid cell has been updated, or its applied rendering parameters have been modified, the state identifier corresponding to this cell will be immediately set to "dirty". At the same time, when the user performs map dragging, zooming, and other interactive operations, the system will recalculate the grid that needs to be displayed or updated according to the current viewport range, and mark these affected cells as needing to be updated. This process ensures that the system can accurately identify the spatial area that needs to be reprocessed without traversing all the data.

[0085] S154, only for the spatial cell whose state identifier indicates a change, update the corresponding area in the display buffer.

[0086] ​For the grid cell marked as "dirty", the corresponding dirty flag is set to true, indicating that the area grid needs to be re-rendered, and it does not affect other areas. In the next rendering cycle, the system only performs partial redrawing on the changed part (the grid marked as "dirty"), thereby completely avoiding the performance overhead of full rendering while ensuring visual coherence. The system first queries the LRU slice cache system. If the cache already exists for the unit in the current state, the system directly reuses the image slice and updates it to the display buffer. If the cache is not hit, the system submits the unit as a new parallel subtask to the dynamic thread pool based on WebWorker to perform asynchronous re-rendering. In the rendering main thread, the system uses the image pyramid-based progressive synthesis technique to only update the newly generated or extracted image slice to the corresponding area in the display buffer according to the spatial coordinate boundary in the grid cell information, thereby realizing seamless splicing of multiple slice data. For the grid cell not marked as "dirty", the corresponding display area content remains unchanged, and the existing rendering result is directly used. Through this dirty flag driven partial redrawing mechanism, the system completely avoids the performance overhead of full canvas redrawing caused by local changes in the traditional scheme when data is updated or user interaction occurs, thereby ensuring visual coherence and data real-time while realizing a qualitative improvement in the performance of browser-side meteorological data visualization.

[0087] In combination Figure 2 As shown in the figure, after the process is started, spatial gridding and cache initialization are first performed on the client side: the system obtains the original meteorological grid data and its metadata from the server, constructs a multi-level grid pyramid index based on the preset projection rules and coverage range, and generates metadata including level, identifier and coordinate boundary for each grid cell. At the same time, an LRU cache system is established to store these metadata and subsequent rendering results. Next, the system calculates the visible area according to the projection range and zoom level of the current map view, and filters the target cell set from the grid index accordingly, thereby splitting the macro data processing task into independent parallel subtasks corresponding to each grid cell.

[0088] Subsequently, it is determined whether the target region needs to be updated and rendered - the system detects whether the data, rendering parameters or view state of each grid cell has changed through a dirty flag mechanism. If no update is needed, the existing slice data is directly extracted from the LRU cache to achieve instantaneous loading; if an update is needed, the corresponding grid is marked and submitted to the dynamically managed Web Worker thread pool. The thread pool uses a load balancing algorithm to distribute tasks to idle worker threads, each of which starts an off-screen Canvas rendering engine inside, sequentially performs data reading, bilinear interpolation, coordinate conversion and other computationally intensive operations, and generates image slices such as filled maps, grid maps or wind feather maps according to the pre-set rendering type, and finally transmits the pixel data back to the main thread through the getImageData interface.

[0089] According to the pre-configured rendering type, the corresponding drawing algorithm is called, specifically including: Filled map: map data values to a color scale to generate a continuous heat distribution map; Grid map: draw discrete numerical labels or symbols on grid points; Wind feather map: calculate and draw arrowhead vector symbols according to wind direction and wind speed vector data.

[0090] In the main thread, the display module receives image slices from each worker thread or cache, and accurately positions and seamlessly splices them according to the coordinate boundaries in their grid cell information to form a complete visual view. The entire process is based on the principle of incremental update, triggering recalculation and rendering only for areas where content has changed, while directly reusing the cache for the rest, thereby completely avoiding the performance bottleneck of global redrawing in traditional solutions, and achieving efficient, smooth and interactive visualization of meteorological data on the browser side. This process deeply integrates parallel computing, intelligent caching and incremental rendering technology, forming a full-link optimization solution from data organization, task scheduling, parallel computing to dynamic rendering.

[0091] In a second aspect, the embodiments of the present application also provide a meteorological data visualization device applied to a client, wherein the client is in communication connection with a browser. As shown in the Figure 3 The device includes an acquisition module 10, a determination module 20, a decomposition module 30, a slicing module 40 and a display module 50.

[0092] The acquisition module 10 is configured to acquire original spatial data from a server, and establish a multi-resolution spatial unit set associated with the original spatial data based on a spatial index, wherein each spatial unit has corresponding spatial range description information; The determination module 20 is configured to determine a target unit set from the spatial unit set in response to a change in the view state; The decomposition module 30 is configured to decompose and schedule data processing tasks for a target cell set to a plurality of parallel execution threads; The slicing module 40 is configured to perform data interpolation, coordinate conversion and graphics rendering operations based on the grid cells corresponding to the assigned parallel subtasks for each work thread independently, to generate corresponding image slice data; The display module 50 is configured to deliver the image slice data generated by each work thread to the main thread for synthesis and display, and to identify and redraw the areas where the content has changed through an incremental update mechanism.

[0093] In a third aspect, the embodiments of the present application provide an electronic device, which is combined with the method in the first aspect and / or the second aspect. Figure 4 As shown in the drawings, the electronic device includes a memory 131 and a processor 130, the memory 131 is configured to store a computer program, and the processor 130 is configured to run the computer program to enable the electronic device to perform the method described above.

[0094] Further, as shown in the drawings, the electronic device further includes a bus 132 and a communication interface 133, and the processor 130, the communication interface 133 and the memory 131 are connected through the bus 132. Figure 4

[0095] The memory 131 can include a high-speed random access memory (RAM) and can also include a non-volatile memory such as at least one disk memory. The communication between the system network element and at least one other network element is realized through at least one communication interface 133 (which can be wired or wireless), and the Internet, a wide area network, a local area network, a metropolitan area network, etc. can be used. The bus 132 can be an ISA bus, a PCI bus or an EISA bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For the convenience of representation, Figure 4 In the drawings, only one bidirectional arrow is used to represent the bus, but it does not mean that there is only one bus or only one type of bus.

[0096] ​The processor 130 can be an integrated circuit chip having a processing capability of signals. In the implementation process, each step of the above method can be completed by the integrated logic circuit of hardware in the processor 130 or the instruction in the form of software. The processor 130 described above can be a general processor, including a central processing unit (CPU), a network processor (NP), etc.; can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component. Each method, step and logic block disclosed in the embodiment of the present application can be implemented or executed. The general processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in combination with the embodiment of the present application can be directly embodied as a hardware decoding processor for execution, or executed by a combination of hardware and software modules in the decoding processor. The software module can be located in a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register or other mature storage medium in the art. The storage medium is located in the storage 131, and the processor 130 reads the information in the storage 131 and combines the hardware to complete the steps of the method of the above embodiment.

[0097] In a fourth aspect, the embodiment of the present application provides a readable storage medium, and the readable storage medium stores computer program instructions. When the computer program instructions are read and run by a processor, the above method is executed.

[0098] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described system and device can refer to the corresponding process in the foregoing method embodiment, which will not be described here.

[0099] In addition, in the description of the embodiment of the present application, unless otherwise explicitly specified and limited, the terms "mounting", "connecting", "connecting" should be understood in a broad sense, for example, can be fixedly connected, can also be detachably connected, or integrally connected; can be mechanically connected, can also be electrically connected; can be directly connected, can also be indirectly connected through an intermediate medium, can be the communication inside two elements. For those skilled in the art, the specific meaning of the above terms in the present application can be understood according to the specific circumstances.

[0100] If the functions are realized in the form of software function units and sold or used as independent products, they can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application or the parts of the present application that essentially contribute to the prior art or the parts of the technical solutions can be embodied in the form of software products. The computer software product is stored in a storage medium and includes a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in the various embodiments of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various media that can store program codes.

[0101] In the description of the present application, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer" and the like indicate the orientation or positional relationship based on the orientation or positional relationship shown in the drawings, and are only for the convenience of describing the present application and simplifying the description, and do not indicate or imply that the devices or elements referred to must have a particular orientation, be constructed and operated in a particular orientation, and therefore cannot be understood as limiting the present application. In addition, the terms "first", "second", "third" are only for the purpose of description, and cannot be understood as indicating or implying relative importance.

[0102] Finally, it should be noted that: the above embodiments are only specific embodiments of the present application, which are used to illustrate the technical solutions of the present application, and are not limited thereto, the protection scope of the present application is not limited thereto, although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art within the technical range disclosed by the present application can modify or easily think of changes to the technical solutions recorded in the foregoing embodiments, or make equivalent replacement to part of the technical features; and these modifications, changes or replacements do not make the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application, and should be covered within the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A method of visualizing meteorological data, characterized by, The application is applied to a client connected with a browser, and the method comprises the following steps: Obtaining original spatial data from a server, and establishing a set of multi-resolution spatial units associated with the original spatial data based on a spatial index, wherein each spatial unit has corresponding spatial range description information; In response to a view state change, determining a target unit set from the set of spatial units; Decomposing and scheduling data processing tasks for the target unit set to a plurality of parallel computing threads; For each independent work thread, performing data interpolation, coordinate conversion and graphic rendering operations based on the corresponding grid unit of the allocated parallel subtask to generate corresponding image slice data; Transferring the image slice data generated by each work thread to the main thread for synthesis and display, and identifying and redrawing the area where the content has changed through an incremental update mechanism.

2. The method of claim 1, wherein, The step of establishing a set of multi-resolution spatial units associated with the original spatial data based on a spatial index comprises: Parsing the metadata of the original spatial data to obtain the spatial reference information and coverage range corresponding to the original spatial data; According to the preset projection rule and hierarchical strategy, a multi-level grid structure covering the coverage range is constructed, wherein each level corresponds to a specified spatial resolution; For each grid unit in the multi-level grid structure, generate and store the meta information of the grid unit, the meta information at least includes the level, unique identifier and spatial coordinate boundary of the unit.

3. The method of claim 2, wherein, After the step of generating and storing the meta information of each grid unit in the multi-level grid structure, the method further comprises: Establishing a cache pool associated with the multi-level grid structure to store the meta information of the grid unit and / or intermediate data and result data generated by subsequent processing.

4. The method of claim 1, wherein, In response to a view state change, based on the pre-established spatial index, determining the target spatial range to be rendered within the current view, comprising: Obtaining the viewport parameters of the current view, the viewport parameters at least including the center point coordinate, the zoom level and the view range; According to the zoom level, match the spatial grid level of the corresponding detail level in the pre-established spatial index; According to the view range, query and filter one or more spatial grids whose geographical range intersects or falls within the view range in the matched spatial grid level; Determine the filtered one or more spatial grids as the target spatial range to be rendered.

5. The method of claim 1, wherein, The step of decomposing and scheduling data processing tasks for the target unit set to a plurality of parallel computing threads comprises: According to the characteristics of each spatial unit in the target unit set, decouple the overall data processing task into independent subtasks corresponding to a single or multiple spatial units; Construct and maintain a thread pool that can dynamically manage multiple computing threads, and monitor the load state of each computing thread in real time; Based on the load state of each computing thread, allocate and distribute the independent subtasks to the computing threads whose current load is lower than the preset threshold for execution.

6. The method of claim 1, wherein, The step of performing data interpolation, coordinate conversion and graphics rendering operation based on the grid cell corresponding to the allocated parallel subtask to generate corresponding image slice data comprises: creating an independent off-screen rendering buffer within a thread for the grid cell corresponding to the parallel subtask; converting the coordinates of the grid cell from a first coordinate system to a second coordinate system in the off-screen rendering buffer, and performing interpolation calculation on the original data corresponding to the converted coordinate position to obtain rendering data values; generating image slice data corresponding to the grid cell in the off-screen rendering buffer using the rendering data values according to the preconfigured rendering rule.

7. The method of claim 1, wherein, The step of delivering the image slice data generated by each work thread to the main thread for synthesis and display, and identifying and redrawing the area where the content has changed through the incremental update mechanism comprises: receiving the completed image slice data transmitted by each work thread; splicing and fusing each received image slice data in the display buffer according to the spatial position relationship of the corresponding grid cell to form a complete visual view; detecting the spatial cell whose state identifier indicates a change in the current rendering period based on the state identifier maintained for each spatial cell; updating only the corresponding area in the display buffer for the spatial cell whose state identifier indicates a change.

8. A weather data visualization apparatus, characterized by, The device comprises: an acquisition module configured to acquire original spatial data from a server and establish a multi-resolution spatial cell set associated with the original spatial data based on a spatial index, wherein each spatial cell has corresponding spatial range description information; a determination module configured to determine a target cell set from the spatial cell set in response to a view state change; a decomposition module configured to decompose and schedule data processing tasks for the target cell set to a plurality of parallel computing threads; a slicing module configured to perform data interpolation, coordinate conversion and graphics rendering operation based on the grid cell corresponding to the allocated parallel subtask for each work thread to generate corresponding image slice data; a display module configured to deliver the image slice data generated by each work thread to the main thread for synthesis and display, and identify and redraw the area where the content has changed through the incremental update mechanism.

9. An electronic device, comprising: The electronic device comprises a memory for storing a computer program and a processor for running the computer program to enable the electronic device to perform the method of any one of claims 1 to 7.

10. A storage medium, characterized by The storage medium stores computer program instructions, which are read and run by a processor to perform the method of any one of claims 1 to 7.

Images