Marine data grading and partitioning rendering method and device in low-bandwidth environment

Abstract

The invention provides an ocean data grading and partitioning rendering method and device in a low-bandwidth environment, and belongs to the technical field of ocean data processing. The method comprises the following steps: acquiring original ocean data from an external data source, processing the original ocean data into a map, slicing according to resolution and hierarchical relationship to obtain a tile map set of each hierarchy, determining a pulling hierarchy based on window zooming, pulling to a window, performing partition rendering processing, and finally mounting a picture for displaying. The method has the advantages that map slicing processing can adapt to a low-bandwidth environment, and rendering pressure, request data volume, data transmission pressure and bandwidth limitation influence on the vector map are reduced. The overall network communication traffic can be reduced, the problem of slow rendering of mass data drawing is solved, hierarchical and partitioned dynamic visual rendering is realized, the data processing and display efficiency is improved, the user experience is improved, and an efficient solution is provided for ocean data visualization.

Description

Technical Field

[0001] The present invention mainly relates to the technical field of ocean data processing, and in particular to a method and device for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment. Background Art

[0002] In today's era, the visualization of ocean data has become one of the most intuitive and effective ways to convey information to users. The vast ocean contains extremely rich and diverse data resources, from the physical parameters of the ocean, such as temperature, salinity, depth, current speed and direction, to the distribution of marine life, changes in marine meteorology, to data generated by various marine operations and navigation activities, etc., the amount of information is showing an explosive growth trend.

[0003] However, in the process of visualizing ocean data, there are many difficult problems. On the one hand, in the ocean navigation scenario, the satellite communication bandwidth relied on is extremely limited and the cost of use is high. As an important bridge for data transmission between the ocean and the land, the low bandwidth characteristics of satellite communication seriously restrict the fast and efficient transmission of data; on the other hand, the multi-source heterogeneous characteristics of ocean data and the high spatial resolution required for visual presentation of data will lead to an increase in network communication time, and will also cause serious page jams and memory load problems due to page reflow and resource loading blockage. Summary of the invention

[0004] The technical problem to be solved by the present invention is to provide a method and device for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment in view of the deficiencies of the prior art.

[0005] The technical solution of the present invention to solve the above technical problem is as follows: A method for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment comprises the following steps:

[0006] Obtaining raw ocean data from an external data source, naming the raw ocean data according to a set file naming format, obtaining the ocean data to be processed, and generating a map of the ocean data to be processed;

[0007] The map is sliced ​​according to the corresponding relationship between the resolution and different levels to obtain a map tile matrix corresponding to each level, and the tiles in the map tile matrix are converted into a picture format to obtain a tile atlas corresponding to each level;

[0008] Determine the level to be pulled based on the current map zoom size of the preset window, and pull the tile atlas corresponding to the determined level into the current window;

[0009] Performing partition rendering processing on the tile atlas pulled into the window to obtain a rendered tile atlas;

[0010] Mount the rendered images in the tile atlas to the specified page for display.

[0011] Another technical solution of the present invention to solve the above technical problem is as follows: A device for rendering ocean data in a hierarchical and partitioned manner in a low-bandwidth environment, comprising:

[0012] The data acquisition module is used to obtain raw ocean data from an external data source, name the raw ocean data according to a set file naming format, obtain the ocean data to be processed, and generate a map of the ocean data to be processed;

[0013] A slicing module is used to slice the map according to the corresponding relationship between the resolution and different levels to obtain a map tile matrix corresponding to each level, and convert the tiles in the map tile matrix into a picture format to obtain a tile atlas corresponding to each level;

[0014] A rendering processing module is used to determine the level to be pulled based on the current map zoom size of the preset window, and pull the tile atlas corresponding to the determined level into the current window;

[0015] Performing partition rendering processing on the tile atlas pulled into the window to obtain a rendered tile atlas;

[0016] Mount the rendered images in the tile atlas to the specified page for display.

[0017] Another technical solution of the present invention to solve the above-mentioned technical problem is as follows: A device for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment comprises a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the method for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment as described above is implemented.

[0018] Another technical solution of the present invention to solve the above technical problem is as follows: a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment as described above is implemented.

[0019] The beneficial effects of the present invention are as follows: map slicing processing is performed according to the relationship between resolution and hierarchy, which reduces rendering pressure for vector maps and further reduces the amount of requested data, thereby adapting to low-bandwidth environments, reducing data transmission pressure, and reducing the impact of satellite communication bandwidth limitations on ocean data visualization. It can reduce the amount of network communication data, effectively solve the problem of slow drawing and rendering due to massive data, and realize hierarchical and partitioned dynamic visualization rendering of ocean data in low-bandwidth environments, thereby improving data processing and display efficiency and improving user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 A flowchart of a method for rendering ocean data in hierarchical and partitioned manner provided by an embodiment of the present invention;

[0021] Figure 2 A schematic diagram of functional modules of a device for rendering ocean data in hierarchical and partitioned manner provided by an embodiment of the present invention;

[0022] Figure 3 The tile map organization form provided by the embodiment of the present invention;

[0023] Figure 4 A flowchart of JavaScript and WebGL data exchange for tile arrangement provided in an embodiment of the present invention;

[0024] Figure 5 A flow chart of data exchange between JavaScript and WebGL provided by an embodiment of the present invention;

[0025] Figure 6 A data exchange diagram showing the flow and exchange of data between modules in the process of hierarchical and partitioned tile rendering provided by an embodiment of the present invention;

[0026] Figure 7 A graph showing the relationship between a target zoom factor and a map zoom factor provided in an embodiment of the present invention;

[0027] Figure 8 The main flow chart of TextureCached managing texture objects provided by the embodiment of the present invention;

[0028] Fig. 9 The main flow chart of drawing tiles by the WebGLRender renderer provided in the embodiment of the present invention;

[0029] Fig.10 This is a rendering effect diagram of ocean data provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0030] The principles and features of the present invention are described below in conjunction with the accompanying drawings. The examples given are only used to explain the present invention and are not used to limit the scope of the present invention.

[0031] In view of the shortcomings of the prior art, the present invention dynamically visualizes and renders massive ocean data in a hierarchical and partitioned manner, which can reduce the amount of network communication data, which is very necessary for solving the problem of slow rendering caused by massive data.

[0032] Example 1: Figure 1 As shown, an embodiment of the present invention provides a method for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment, comprising the following steps:

[0033] Obtaining raw ocean data from an external data source, naming the raw ocean data according to a set file naming format, obtaining the ocean data to be processed, and generating a map of the ocean data to be processed;

[0034] The map is sliced ​​according to the corresponding relationship between the resolution and different levels to obtain a map tile matrix corresponding to each level, and the tiles in the map tile matrix are converted into a picture format to obtain a tile atlas corresponding to each level;

[0035] Determine the level to be pulled based on the current map zoom size of the preset window, and pull the tile atlas corresponding to the determined level into the current window;

[0036] Performing partition rendering processing on the tile atlas pulled into the window to obtain a rendered tile atlas;

[0037] Mount the rendered images in the tile atlas to the specified page for display.

[0038] The advantage of Example 1 is that map slicing processing is performed according to the relationship between resolution and hierarchy, which reduces rendering pressure for vector maps and further reduces the amount of requested data, thereby adapting to low-bandwidth environments, reducing data transmission pressure, and reducing the impact of satellite communication bandwidth limitations on ocean data visualization. It can reduce the amount of network communication data, effectively solve the problem of slow drawing and rendering due to massive data, and realize hierarchical and partitioned dynamic visualization rendering of ocean data in low-bandwidth environments, improve data processing and display efficiency, and improve user experience.

[0039] Embodiment 2: The following is a detailed introduction to the process of slicing the ocean data to be processed according to the corresponding relationship between resolution and different levels:

[0040] Map slicing is a solution that splits the entire map into grids with row and column numbers according to certain rules. For vector maps, the advantage is that only the elements within the corresponding grid can be drawn according to the required display range, thereby reducing rendering pressure. For raster maps, it can reduce the amount of data requested (or read) at one time, thereby more efficiently displaying the map in the area.

[0041] The tile map pyramid model is a multi-resolution hierarchical model based on map slices. From the bottom to the top of the tile pyramid, the resolution becomes lower and lower, but the geographical range represented remains unchanged (e.g. Figure 3 The map tiles of the corresponding level can be scheduled according to the display range, and the corresponding grid can be displayed according to the area, thereby further reducing the amount of data requested (read).

[0042] Each map tile matrix is ​​arranged as follows Figure 4 As shown, each map tile matrix has an approximate boundary parameter Boudingbox, and the precise boundary of this tile needs to be calculated through other parameters, which is caused by the difference in pixel ratio size under different level ratios.

[0043] It is necessary to define the parameters of the map tiles. The parameters of the map tiles include using the tile ratio as the scale denominator, defining the width and height of each map tile in pixels, defining the upper left corner coordinates of the map tile matrix, the width and height of the map tile matrix (that is, the number of tiles in the XY direction), and calculating the lower right corner coordinates of the map tile matrix based on the map tile parameters, specifically:

[0044] pixelSpan = scaleDenominator×0.28×10 -3 / metersPerUnit (crs);

[0045] tileSpanX=tileWidth×pixelSpan;

[0046] tileSpanY=tileHeight×pixelSpan;

[0047] tileMatrixMaxX=tileMatrixMinX+tileSpanX×matrixWidth;

[0048] tileMatrixMinY=tileMatrixMaxY-tileSpanY×matrixHeight;

[0049] Among them, pixelSpan is the span measurement value, tileSpanX and tileSpanY are the upper left corner coordinates of the map tile matrix, tileWidth and tileHeight are the width and height of each map tile, scaleDenominator is the scale denominator, tileMatrixMaxX and tileMatrixMinY are the lower right corner coordinates of the map tile matrix, matrixWidth and matrixHeight are the width and height of the map tile matrix, 0.28 is the standard size of pixels, and metersPerUnit(crs) is the actual distance corresponding to each unit.

[0050] The tile atlas pulled into the window is subjected to partition rendering processing to obtain a rendered tile atlas, specifically:

[0051] Constructing an ocean data rendering framework, and deploying the ocean data rendering framework in the window, wherein the ocean data rendering framework includes a ScaleLayer class, a WebGLRender class, a TextureCached class, and a WebGL rendering pipeline;

[0052] The ScaleLayer class determines multiple to-be-rendered images that need to be rendered in the tile map set pulled to the current window, and sorts all to-be-rendered images according to the distance between the tiles corresponding to the to-be-rendered images and the center of the map, decodes the tiles corresponding to each to-be-rendered image according to the sorting, obtains the image global variable, and performs position scaling calculation on the parent tile corresponding to each to-be-rendered image to obtain the current map scaling factor, calculates the coordinate data related to the parent tile according to the current map scaling factor, and passes the image global variable and coordinate data corresponding to each to-be-rendered image to the TextureCached class through the WebGLRender class;

[0053] The TextureCached class performs texture processing on the image data and the coordinate data corresponding to each picture to be rendered, respectively, to obtain a texture attribute variable corresponding to each picture to be rendered;

[0054] The WebGLRender class is connected to the WebGL rendering pipeline, and sends rendering configuration parameters, image global variables and texture attribute variables to the WebGL rendering pipeline;

[0055] The WebGL rendering pipeline draws on the pre-built canvas according to the rendering configuration parameters, image global variables and texture attribute variables, obtains the rendering tiles corresponding to the image to be rendered, and returns the starting position of the rendering tiles to the ScaleLayer class for display.

[0056] like Figure 6 As shown, Figure 6 The data flow and exchange between modules in the process of hierarchical partitioning and tile rendering of ocean data in a low-bandwidth environment are shown as follows:

[0057] 1. Data flow starts

[0058] External data acquisition and preliminary processing: The entire process starts with obtaining raw ocean data from external data sources, then naming and processing the ocean data to be processed according to the set format, and generating a map of it (this part is in Figure 6 The map is then sliced ​​according to the resolution and hierarchy to generate a map tile matrix, which is then converted into a tile atlas (this process is not described in detail in Figure 6Detailed presentation, but lays the foundation for subsequent data flow). The pull level is determined based on the current map zoom size of the preset window, and the tile atlas of the corresponding level is pulled to the current window.

[0059] 2. ScaleLayer class related operations and data transfer

[0060] Determine the images to be rendered and sort and decode: The ScaleLayer class determines the multiple images to be rendered in the tile map set pulled to the current window. It sorts all the images to be rendered according to the distance between the tiles corresponding to the images to be rendered and the center of the map, and then decodes the tiles corresponding to each image to be rendered according to the sorting to obtain the image global variable.

[0061] Parent tile calculation and data transfer: At the same time, the ScaleLayer class calculates the position scaling of the parent tile corresponding to each image to be rendered, obtains the current map scaling factor, and then calculates the coordinate data related to the parent tile (such as the parent tile coordinates and the coordinate offset within the parent tile, etc.) according to the current map scaling factor. After that, the ScaleLayer class passes the image global variables and coordinate data corresponding to each image to be rendered to the TextureCached class through the WebGLRender class.

[0062] 3. Data processing and transmission of TextureCached class

[0063] Texture processing operation: After the TextureCached class receives the data passed from the WebGLRender class, it performs texture processing on the image data and coordinate data corresponding to each image to be rendered. Specifically, it checks whether the key corresponding to the current tile is saved in its own contents texture list according to the image data corresponding to each image to be rendered, and performs corresponding processing according to different situations (key already exists or does not exist), such as calculating the actual texture coordinates based on the least recently used eviction strategy, and finally obtains the texture attribute variables corresponding to each image to be rendered.

[0064] Data is passed to the WebGLRender class: The TextureCached class passes the processed texture attribute variables back to the WebGLRender class.

[0065] 4. WebGLRender class interacts with the WebGL rendering pipeline and returns the final result

[0066] Data is passed to the WebGL rendering pipeline: The WebGLRender class is connected to the WebGL rendering pipeline and sends rendering configuration parameters (such as color scale, sentinel value, texture, texture boundary, etc.), image global variables received and passed from the ScaleLayer class, and texture attribute variables received from the TextureCached class to the WebGL rendering pipeline.

[0067] WebGL rendering pipeline drawing and result return: The WebGL rendering pipeline draws on the pre-built canvas based on these data, obtains the rendering tiles corresponding to the image to be rendered, and returns the starting position of the rendering tiles to the ScaleLayer class.

[0068] 5. Final display stage

[0069] Rendering tile display: After receiving the starting position of the rendered tile, the ScaleLayer class mounts the rendered image in the tile atlas to the specified page for display, completing the entire process of hierarchical and partitioned rendering of ocean data tiles and realizing the visualization of ocean data.

[0070] The advantage of Example 2 is that, through reasonable map slicing processing, the rendering pressure for vector maps can be reduced, and the amount of data requested (or read) at one time for raster maps can be reduced, the map within the area can be displayed more efficiently, and based on accurate map tile parameter calculation, the accuracy of tile matrix processing is ensured, providing a good foundation for subsequent rendering.

[0071] Embodiment 3: The following is a detailed description of the process of performing partition rendering processing on the tile atlas pulled into the window to obtain the rendered tile atlas:

[0072] First, construct an ocean data rendering framework, and deploy the ocean data rendering framework in the window, wherein the ocean data rendering framework includes a ScaleLayer class, a WebGLRender class, a TextureCached class, and a WebGL rendering pipeline;

[0073] Next, the ScaleLayer class determines multiple images to be rendered in the tile map set pulled to the current window, and sorts all the images to be rendered according to the distance between the tiles corresponding to the images to be rendered and the center of the map, decodes the tiles corresponding to each image to be rendered according to the sorting, obtains the image global variable, and performs position scaling calculation on the parent tile corresponding to each image to be rendered to obtain the current map scaling factor, calculates the coordinate data related to the parent tile according to the current map scaling factor, and passes the image global variable and coordinate data corresponding to each image to be rendered to the TextureCached class through the WebGLRender class;

[0074] The TextureCached class performs texture processing on the image data and the coordinate data corresponding to each picture to be rendered, respectively, to obtain a texture attribute variable corresponding to each picture to be rendered;

[0075] The WebGLRender class is connected to the WebGL rendering pipeline, and sends rendering configuration parameters, image global variables and texture attribute variables to the WebGL rendering pipeline;

[0076] The WebGL rendering pipeline draws on the pre-built canvas according to the rendering configuration parameters, image global variables and texture attribute variables, obtains the rendering tile corresponding to the image to be rendered, and returns the starting position (sourceX and sourceY) of the rendering tile to the ScaleLayer class for display.

[0077] The advantage of Example 3 is that the constructed ocean data rendering framework and the processing partitions work together to achieve an efficient partition rendering process, from determining the image to be rendered, decoding, calculating correlation coefficients and coordinate data, to texture processing, sending data to the rendering pipeline for drawing, and finally obtaining the rendered tiles and displaying them correctly, thereby improving the accuracy and efficiency of rendering and enabling high-quality visualization of ocean data.

[0078] Embodiment 4: This embodiment describes in detail the process of determining multiple to-be-rendered images to be rendered in the tile atlas pulled to the current window through the ScaleLayer class:

[0079] The parameters corresponding to the map boundary mapBounds and the window range windowField of the current map are obtained through the ScaleLayer class, and pictures that do not meet the map boundary mapBounds and the window range windowField parameter requirements are determined from the tile map set of the current window as multiple pictures to be rendered that need to be rendered.

[0080] The advantage of Example 4 is that the ScaleLayer class is used to accurately determine the image to be rendered based on the map boundary and window range parameters, thereby avoiding unnecessary rendering calculations, improving rendering targeting, optimizing rendering performance, and ensuring that the ocean data displayed in the window meets actual needs.

[0081] Embodiment 5: This embodiment introduces in detail the process of performing position scaling calculation on the parent tile corresponding to each image to be rendered, obtaining the current map scaling factor, and calculating the coordinate data related to the parent tile according to the current map scaling factor:

[0082] In this process, the parent tile coordinates and the coordinate offset within the parent tile are calculated according to the current map zoom factor. The parent tile coordinates are calculated as follows:

[0083] The position scaling calculation is performed on the parent tile corresponding to each image to be rendered to obtain the current map scaling factor. The scaling calculation formula group is:

[0084] zoomDifference=zoom-targetZ,

[0085] Calculate the parent tile coordinates according to the current map zoom factor:

[0086] parentX=x / 2 zoomDifference ,

[0087] parentY=y / 2 zoomDifference ;

[0088] Among them, zoom is the current map zoom factor, zoomDifference is the difference between the actual map and the parent tile zoom level, x and y are the slice coordinates, targetZ is the parent tile zoom level, parentX and parentY are the parent tile coordinates; these calculated parent tile coordinates will be used for subsequent operations such as determining where to obtain relevant data. The relationship between targetZ and the current map zoom factor is as follows Figure 7 shown.

[0089] The zoom difference value is obtained by the current map zoom factor and the parent tile zoom level, and the coordinate offset in each direction within the parent tile is calculated by the zoom difference value:

[0090] numTiles=2 zoom-targetZ ,

[0091] leftOffset=(x%numTiles) / numTiles*tileSize,

[0092] topOffset=(y%numTiles) / numTiles*tileSize,

[0093] rightOffset=(x%numTiles+1) / numTiles*tileSize,

[0094] bottomOffset=(y%numTiles+1) / numTiles*tileSize;

[0095] Among them, numTiles is the scaling difference value, tileSize is the preset tile size, usually 256, leftOffset is the offset of the left side relative to the entire tile layout, topOffset is the offset of the top relative to the entire tile layout, rightOffset is the offset of the right side relative to the entire tile layout, and bottomOffset is the offset of the bottom relative to the entire tile layout.

[0096] The advantage of Example 5 is that it accurately calculates the parent tile coordinates and the coordinate offset within the parent tile, provides accurate position information for subsequent texture processing and rendering, ensures accurate display of ocean data at different zoom levels, and makes the visualization of ocean data more accurate and continuous.

[0097] Embodiment 6: This embodiment introduces in detail the process of performing texture processing on the image data and the coordinate data corresponding to each picture to be rendered through the TextureCached class to obtain the texture attribute variables corresponding to each picture to be rendered:

[0098] The TextureCached class will check whether the available array (map cache) is empty (in fact, it checks whether the map cache is full). If it is empty, it will get the first inserted key and texture coordinates in the contents texture list, remove the earliest inserted and recently unused texture coordinates. Then, it will get the available position from the available array and associate the new texture coordinates with the key and store them in the cache.

[0099] Specifically, the TextureCached class checks whether the key corresponding to the current tile is saved in its own contents texture list according to the image data corresponding to each image to be rendered. If the key already exists, it means that the tile has been loaded, and then the coordinate data is texture processed according to the least recently used eviction strategy;

[0100] If the key already exists, it means that the tile has not been loaded, then check whether the mapping cache (i.e., the available array) is full. If it is full, get the contents texture list and remove the earliest inserted and recently unused texture coordinates to obtain an available position from the mapping cache, associate the new texture coordinates with the key and store them. If it is not full, directly obtain the available position from the mapping cache, associate the new texture coordinates with the key and store them.

[0101] like Figure 8As shown, in the above embodiment, the TextureCached class is responsible for managing and processing texture data in the entire map rendering process. When it receives the slice coordinates, coordinate offsets, and slice data from the WebGLRender class, it first performs a key check operation:

[0102] It will search the texture list (contents) maintained by itself to see if there is a key corresponding to the current tile. The key here is a string consisting of the coordinates xyz of the tile, which serves as a unique identifier for a specific tile. If the key is found in the texture list, it means that the corresponding tile has been loaded, and then it will be processed according to a specific strategy.

[0103] Specifically, it is divided into the processing flow of loaded tiles (when the key already exists) and the processing flow of unloaded tiles (when the contents texture list is not hit).

[0104] 1. Processing flow of loaded tiles (when key already exists):

[0105] Operation based on the least recently used eviction policy: When it is determined that the tile has been loaded (key exists), the TextureCached class will process it according to the least recently used eviction policy. The core idea of ​​this policy is to give priority to those texture data with the lowest frequency of recent use to optimize the utilization of cache space.

[0106] Get and update texture coordinates: First, it uses the existing key to get the texture coordinate value stored in the mapping. Then, according to the policy requirements, it deletes the mapping of the key and resets the key and the corresponding texture coordinates. The purpose of this series of operations is to update the state of the tile in the cache to make it conform to the management logic of the least recently used eviction policy.

[0107] Calculate the actual texture coordinates and return them: After completing the above texture coordinate update operation, you also need to calculate the actual texture coordinates based on the texture coordinates and the coordinate offsets (leftOffset, topOffset, rightOffset, bottomOffset) obtained from the ScaleLayer class, and return them to the WebGLRender renderer. The specific calculation method is as follows:

[0108] Get the texture coordinate value saved in the mapping through the key, delete the mapping of the key, reset the key and texture coordinates, and calculate the actual texture coordinates used through the coordinate offset:

[0109] LeftX=x+leftOffset / pixelsAcross,

[0110] TopY=y+topOffset / pixelsAcross,

[0111] RightX=x+rightOffset / pixelsAcross,

[0112] BottomY=y+bottomOffset / pixelsAcross;

[0113] Among them, LeftX, TopY, RightX and BottomY are texture coordinates respectively, pixelsAcross is the size value in pixels corresponding to one unit of texture value, leftOffset is the offset of the left side relative to the entire tile layout, topOffset is the offset of the top relative to the entire tile layout, rightOffset is the offset of the right side relative to the entire tile layout, and bottomOffset is the offset of the bottom relative to the entire tile layout.

[0114] It should be understood that LeftX=x+leftOffset / pixelsAcross: the coordinate value LeftX of the actual used texture on the left side in the horizontal direction is obtained by adding the original texture coordinate x to the horizontal coordinate offset leftOffset and dividing it by the size value pixelsAcross in pixels corresponding to 1 unit of the texture value.

[0115] TopY=y+topOffset / pixelsAcross: Similarly, add the original texture coordinate y to the vertical coordinate offset topOffset and divide it by pixelsAcross to obtain the vertical coordinate value TopY of the actual texture used.

[0116] RightX = x + rightOffset / pixelsAcross: Calculate the horizontal coordinate value RightX of the actual texture used on the right side by adding the original texture coordinate x plus another horizontal coordinate offset rightOffset divided by pixelsAcross.

[0117] BottomY=y+bottomOffset / pixelsAcross: Similarly, add the original texture coordinate y to another coordinate offset bottomOffset in the vertical direction and divide it by pixelsAcross to get the BottomY coordinate value of the actual texture in the vertical direction.

[0118] 2. Processing flow of unloaded tiles (when the contents texture list is not hit):

[0119] Check if the mapping cache is full: When the texture list contents is retrieved and the key corresponding to the current tile is not found, the TextureCached class will then check whether available is empty. Available here is essentially an array used to check whether the mapping cache is full. Its status reflects whether the cache has space to store new texture data.

[0120] Processing the earliest inserted and recently unused texture data: If available is empty, it means that the mapping cache is full, and space needs to be freed up to store new tile texture data. To this end, the TextureCached class obtains the first inserted key and texture coordinates in the contents texture list, and then removes the earliest inserted and recently unused texture coordinates. This step is equivalent to clearing out part of the cache space so that new texture data can be stored later.

[0121] Storing new texture data: After making room, pop an available position from the available array and associate the new texture coordinates with the key and store them in the cache. This completes the initial storage of the new tile texture data in the cache.

[0122] Update the texture object and return the texture coordinates: Finally, update the received image data to the texture object texture so that it contains the latest texture data content, and then return the new texture coordinates to the WebGLRender class for subsequent rendering and other related operations.

[0123] The advantages of Example 7 are reasonable texture processing mechanisms, such as determining the mapping cache status, associating and storing texture coordinates according to different situations, and calculating the actually used texture coordinates based on the least recently used eviction strategy, effectively managing texture resources, improving texture processing efficiency, reducing memory usage, ensuring effective use of texture data, and improving rendering effects.

[0124] Embodiment 8: This embodiment describes in detail the process of drawing on a pre-built canvas according to rendering configuration parameters, image global variables and texture attribute variables by the WebGL rendering pipeline to obtain rendering tiles corresponding to the image to be rendered:

[0125] The WebGL rendering pipeline defines a vertex shader and a fragment shader according to the rendering configuration parameters. The vertex shader performs a matrix transformation on the position coordinates of the vertex according to the image global variables, and sends the texture attribute variables to the fragment shader. The matrix transformation is position = transformMatrix*x, y, 0.0, 1.0), where transformMatrix is ​​a 4×4 matrix for storing transformation information, and position is a vector of vertex position coordinates;

[0126] The fragment shader samples the color value from the texture according to the defined texture boundary textureBound and the texture attribute variable, and checks whether the value of the alpha channel is less than a preset value (i.e., 0.1). If so, the value of the alpha channel is discarded, and linear interpolation is performed. The interpolated value is compared with the sentinel value and color scale in the texture attribute variable, and the final color output to the screen is obtained based on the comparison result.

[0127] Understandably, the WebGLRender renderer passes the rendering configuration parameters to the WebGL rendering pipeline to create a drawing function for drawing tiles with specified textures and color scaling. The incoming rendering configuration parameters mainly include global variables such as colorScale, sentinelValues, texture texture, texture boundary textureBound, and attribute variables such as texture coordinates textureCoord. In addition, we also define vertex shaders and fragment shaders. The custom vertex shader will pass the texture coordinates to the fragment shader and perform matrix transformation on the vertex position coordinates. Finally, the image will be rendered according to the transformed vertex position and texture coordinates. The calculation method of the matrix transformation is as follows (transformMatrix represents a 4x4 matrix used to store transformation information; position is a vector representing the vertex position coordinates):

[0128] position=transformMatrix*(x,y,0.0,1.0),

[0129] The fragment shader is also defined. In the fragment shader, according to the values ​​of texture coordinates textureCoord and texture boundary textureBound, the color value is sampled from the texture or a custom function is called to obtain the color value. At the same time, it is necessary to check whether the value of the alpha channel is less than 0.1. If so, the pixel is discarded. Next, the value of the red channel is linearly interpolated, and then the interpolated value is compared with the sentinel value and the color scale to obtain the final color output to the screen. In this process, the logic of the custom function used to obtain the color value is as follows:

[0130] First, multiply the texture coordinate uv by 1024.0 (1024 is the width and height pixel size of the texture image) and round it down to get the vc two-dimensional variable, which is used to represent the integer part of the texture coordinate, and then calculate the fractional part f of the texture coordinate. Next, use the values ​​of the four points sampled from the texture: the upper left corner tl, the upper right corner tr, the lower left corner bl, and the lower right corner br. If the alpha channel values ​​of these four points are all less than 0.1, the red opaque color value is returned. Otherwise, linear interpolation is performed on the four points, and the final color value is calculated based on the fractional part f of the texture coordinate.

[0131] The TextureCached class manages texture objects. It establishes a texture list structure cache to maintain textures. Each time a slice is drawn, the texture coordinates are calculated to update the cache and the texture.

[0132] Fig. 9 The main process of drawing tiles by WebGLRender is presented, such as Fig. 9 shown.

[0133] 1. Data Reception

[0134] Receive various data inputs: WebGLRender receives various data from other modules, including slice coordinates, coordinate offsets, slice data, as well as color labels, sentinel values, canvas size, canvas coordinates, texture coordinates, texture objects, etc. These data provide necessary parameters for subsequent drawing operations, among which slice-related data is used to determine the position and content of tiles, while color labels, sentinel values, etc. are related to color processing, canvas-related parameters define the area and range of drawing, and texture-related data involves the texture properties of tiles.

[0135] 2. Texture processing related operations

[0136] Interact with the TextureCached class to obtain texture coordinates: The WebGLRender renderer interacts with the TextureCached class during processing and uses the textureManager (which may be a component or module related to texture management) to obtain the texture coordinates corresponding to the tile. This step is the key to accurately drawing textures, ensuring that the tile can correctly apply the texture when rendering.

[0137] Update texture: After obtaining the texture coordinates, the WebGLRender renderer will update the texture according to the relevant data and integrate the new texture information into the texture object to ensure the accuracy and completeness of the texture data and provide the correct texture basis for subsequent drawing.

[0138] 3. Rendering pipeline related operations

[0139] Create drawing function: WebGLRender passes the received rendering configuration parameters (such as vertex shader and fragment shader definitions, etc.) to the WebGL rendering pipeline, which creates a drawing function for drawing tiles with specified textures and color scaling based on these parameters. The definition of vertex shader and fragment shader plays a key role in this process. They are responsible for matrix transformation of vertex position coordinates and sampling color values ​​from textures and performing related processing.

[0140] Drawing operation: Using the created drawing function, the WebGL rendering pipeline performs drawing operations on the pre-built canvas according to the passed parameters (including image global variables, texture attribute variables, etc.), accurately draws the texture and color onto the canvas, and finally obtains the rendering tiles corresponding to the image to be rendered.

[0141] 4. Results returned

[0142] Return the starting position of the image: After completing the drawing operation, the WebGL rendering pipeline returns the starting position of the rendered tile to the WebGLRender renderer. The WebGLRender renderer can perform subsequent operations based on this starting position, such as placing the rendered tile in the correct position, and finally realizing the visualization of the ocean data, and mounting the rendered tile atlas image to the specified page for display (this step is in Fig. 9 This is not detailed in , but is relevant to the entire rendering process).

[0143] Fig. 9 The main workflow of the WebGLRender renderer in the hierarchical and partitioned rendering of ocean data in a low-bandwidth environment is fully demonstrated, from data reception, texture processing, interaction with other modules to drawing using the rendering pipeline and result return. It reflects its core role in the entire rendering mechanism and is of great significance for achieving high-quality image rendering and ocean data visualization.

[0144] Based on the above structure, the front-end rendering mode design of ocean data is realized by combining the creation and inheritance of related WebGL classes. Figure 5 The data exchange process between JavaScript and WebGL during the hierarchical and partitioned rendering of ocean data in a low-bandwidth environment is shown as follows:

[0145] 1. Data transfer starts

[0146] From external data sources to JavaScript related processing: First, obtain the original ocean data from the external data source, generate the processed ocean data through naming processing, and further generate the map (this part is in Figure 6The process is not detailed in the previous section, but it is the starting point of the overall process). Then, the ocean data to be processed is sliced ​​according to the relationship between resolution and different levels to obtain a map tile matrix, which is converted into a tile atlas. The pull level is determined based on the current map zoom size of the preset window, and the corresponding tile atlas is pulled to the current window (this series of operations is in Figure 5 It is not elaborated in detail, but provides a basis for subsequent data transmission).

[0147] 2. Data transfer from JavaScript to WebGL

[0148] Rendering configuration parameter transfer: The WebGLRender renderer receives the rendering configuration from JavaScript, including vertex shader and fragment shader definitions, for subsequent creation of drawing functions.

[0149] Tile slice data related transmission: tile slice data, tile slice width and height, texture coordinates and other information are received at the same time. These data will participate in the subsequent rendering process.

[0150] Texture-related parameter passing: It also receives texture-related parameters such as colorScale color scale, sentinelValues ​​sentinel value, canvasSize canvas size, canvasCoordinates canvas coordinates, textureBounds texture coordinates, texture texture object, etc., to prepare for accurate drawing of texture and color.

[0151] 3. Internal processing of WebGLRender renderer and interaction with TextureCached class

[0152] Rendering pipeline operation: The WebGLRender renderer passes part of the received data (such as rendering configuration parameters, etc.) to the WebGL rendering pipeline to create a drawing function for drawing tiles with specified textures and color scaling.

[0153] Interacting with the TextureCached class: During the processing, the WebGLRender renderer interacts with the TextureCached class. For example, the TextureCached class checks whether the key corresponding to the current tile is saved in its own contents texture list based on the image data corresponding to each image to be rendered (this part is in Figure 5 The complete logic is not reflected in detail, but is relevant to the overall data exchange process).

[0154] 4. Return results after data processing

[0155] WebGL rendering pipeline drawing result return: After processing a series of data, the WebGL rendering pipeline returns the result of rendering tiles to the WebGLRender renderer, and the WebGLRender renderer then draws the texture and color onto its own canvas based on the passed in parameters.

[0156] Finally, the relevant data is returned: During the whole process, the data is processed layer by layer, and finally the rendered image is displayed by mounting the canvas element to complete the visualization of the ocean data (this part is in Figure 5 The specific implementation details are not elaborated in detail, but the ultimate goal of the data exchange process is reflected).

[0157] Figure 5 It comprehensively demonstrates the key data exchange process between JavaScript and WebGL from data preparation and transmission to final rendering and display, reflecting the flow and collaborative work of various parts of data at different stages, which helps to understand the core mechanism of hierarchical and partitioned rendering of the entire ocean data.

[0158] Finally, the scalar ocean data rendering is constructed. Scalar ocean data represents the rendering of ocean data in field form, mainly to display ocean scalar data such as sea surface temperature and chlorophyll concentration. For scalar ocean data, pull the corresponding slice image, decode the 32-bit slice data through the fragment shader of WebGL, color it according to the given color code, and draw it on the map in different areas. Finally, the ocean data rendering effect is as follows Fig.10 shown.

[0159] The advantage of Example 8 is that the WebGL rendering pipeline achieves high-quality image rendering by defining vertex shaders and fragment shaders, performing operations such as vertex position coordinate matrix transformation, texture sampling, and color value processing. It can accurately generate the color that is finally output to the screen based on the characteristics of the ocean data, making the visualization of the ocean data more realistic and clear, and improving the quality of the visualization effect.

[0160] In the above-mentioned multiple embodiments, a series of processing operations taken by the TextureCached class for different situations (tiles loaded and not loaded) after receiving relevant data are described in detail, including the management of texture coordinates, the use of cache space, and the interaction with the WebGLRender class, etc. These operations are all for more efficient processing and utilization of texture data in the map rendering process.

[0161] Example 9: Figure 2 As shown, the embodiment of the present invention also provides a device for rendering ocean data in a hierarchical and partitioned manner in a low-bandwidth environment, comprising:

[0162] The data acquisition module is used to obtain raw ocean data from an external data source, name the raw ocean data according to a set file naming format, obtain the ocean data to be processed, and generate a map of the ocean data to be processed;

[0163] A slicing module is used to slice the map according to the corresponding relationship between the resolution and different levels to obtain a map tile matrix corresponding to each level, and convert the tiles in the map tile matrix into a picture format to obtain a tile atlas corresponding to each level;

[0164] A rendering processing module is used to determine the level to be pulled based on the current map zoom size of the preset window, and pull the tile atlas corresponding to the determined level into the current window;

[0165] Performing partition rendering processing on the tile atlas pulled into the window to obtain a rendered tile atlas;

[0166] Mount the rendered images in the tile atlas to the specified page for display.

[0167] Embodiment 10: The embodiment of the present invention also provides a device for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the method for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment as described above is implemented.

[0168] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0169] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and units can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0170] In the several embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic, for example, the division of units is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed.

[0171] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the embodiments of the present invention.

[0172] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0173] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods of each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0174] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment, characterized in that: The steps include: Obtaining raw ocean data from an external data source, naming the raw ocean data according to a set file naming format, obtaining the ocean data to be processed, and generating a map of the ocean data to be processed; The map is sliced ​​according to the corresponding relationship between the resolution and different levels to obtain a map tile matrix corresponding to each level, and the tiles in the map tile matrix are converted into a picture format to obtain a tile atlas corresponding to each level; Determine the level to be pulled based on the current map zoom size of the preset window, and pull the tile atlas corresponding to the determined level into the current window; Performing partition rendering processing on the tile atlas pulled into the window to obtain a rendered tile atlas; Mount the rendered images in the tile atlas to the specified page for display.

2. The method for rendering ocean data by hierarchical partitioning according to claim 1, characterized in that: The ocean data to be processed is sliced ​​according to the corresponding relationship between resolution and different levels, specifically: The map tiles are parameterized, wherein the map tile parameters include using the tile ratio as the scale denominator, defining the width and height of each map tile in pixels, defining the upper left corner coordinates of the map tile matrix, the width and height of the map tile matrix, and calculating the lower right corner coordinates of the map tile matrix based on the map tile parameters, specifically: pixelSpan = scaleDenominator×0.28×10 -3 / metersPerUnit (crs); tileSpanX=tileWidth×pixelSpan; tileSpanY=tileHeight×pixelSpan; tileMatrixMaxX=tileMatrixMinX+tileSpanX×matrixWidth; tileMatrixMinY=tileMatrixMaxY-tileSpanY×matrixHeight; Among them, pixelSpan is the span measurement value, tileSpanX and tileSpanY are the upper left corner coordinates of the map tile matrix, tileWidth and tileHeight are the width and height of each map tile, scaleDenominator is the scale denominator, tileMatrixMaxX and tileMatrixMinY are the lower right corner coordinates of the map tile matrix, matrixWidth and matrixHeight are the width and height of the map tile matrix, 0.28 is the standard size of pixels, and metersPerUnit(crs) is the actual distance corresponding to each unit.

3. The method for rendering ocean data by hierarchical partitioning according to claim 1, characterized in that: The tile atlas pulled into the window is subjected to partition rendering processing to obtain a rendered tile atlas, specifically: Constructing an ocean data rendering framework, and deploying the ocean data rendering framework in the window, wherein the ocean data rendering framework includes a ScaleLayer class, a WebGLRender class, a TextureCached class, and a WebGL rendering pipeline; The ScaleLayer class determines multiple to-be-rendered images that need to be rendered in the tile map set pulled to the current window, and sorts all to-be-rendered images according to the distance between the tiles corresponding to the to-be-rendered images and the center of the map, decodes the tiles corresponding to each to-be-rendered image according to the sorting, obtains the image global variable, and performs position scaling calculation on the parent tile corresponding to each to-be-rendered image to obtain the current map scaling factor, calculates the coordinate data related to the parent tile according to the current map scaling factor, and passes the image global variable and coordinate data corresponding to each to-be-rendered image to the TextureCached class through the WebGLRender class; The TextureCached class performs texture processing on the image data and the coordinate data corresponding to each picture to be rendered, respectively, to obtain a texture attribute variable corresponding to each picture to be rendered; The WebGLRender class is connected to the WebGL rendering pipeline, and sends rendering configuration parameters, image global variables and texture attribute variables to the WebGL rendering pipeline; The WebGL rendering pipeline draws on the pre-built canvas according to the rendering configuration parameters, image global variables and texture attribute variables, obtains the rendering tiles corresponding to the image to be rendered, and returns the starting position of the rendering tiles to the ScaleLayer class for display.

4. The method for rendering ocean data by hierarchical partitioning according to claim 3, characterized in that: The ScaleLayer class is used to determine a plurality of to-be-rendered images that need to be rendered in the tile atlas pulled to the current window, specifically: The parameters corresponding to the map boundary mapBounds and the window range windowField of the current map are obtained through the ScaleLayer class, and pictures that do not meet the map boundary mapBounds and the window range windowField parameter requirements are determined from the tile map set of the current window as multiple pictures to be rendered that need to be rendered.

5. The method for rendering ocean data by hierarchical partitioning according to claim 3, characterized in that: The position scaling calculation is performed on the parent tile corresponding to each image to be rendered to obtain the current map scaling factor, and the coordinate data related to the parent tile is calculated according to the current map scaling factor, specifically: The position scaling calculation is performed on the parent tile corresponding to each image to be rendered to obtain the current map scaling factor. The scaling calculation formula group is: zoomDifference=zoom-targetZ, Calculate the parent tile coordinates according to the current map zoom factor: parentX=x / 2 zoomDifference , parentY=y / 2 zoomDifference ; Where zoom is the current map zoom factor, zoomDifference is the difference between the actual map and the parent tile zoom level, x and y are the slice coordinates, targetZ is the parent tile zoom level, parentX and parentY are the parent tile coordinates; The zoom difference value is obtained by the current map zoom factor and the parent tile zoom level, and the coordinate offset in each direction within the parent tile is calculated by the zoom difference value: numTiles=2 zoom-targetZ , leftOffset=(x%numTiles) / numTiles*tileSize, topOffset=(y%numTiles) / numTiles*tileSize, rightOffset=(x%numTiles+1) / numTiles*tileSize, bottomOffset=(y%numTiles+1) / numTiles*tileSize; Among them, numTiles is the scaling difference value, tileSize is the preset tile size, leftOffset is the offset of the left side relative to the entire tile layout, topOffset is the offset of the top relative to the entire tile layout, rightOffset is the offset of the right side relative to the entire tile layout, and bottomOffset is the offset of the bottom relative to the entire tile layout.

6. The method for rendering ocean data by hierarchical partitioning according to claim 5, characterized in that: The texture cached class is used to perform texture processing on the image data and the coordinate data corresponding to each image to be rendered, and the texture attribute variables corresponding to each image to be rendered are obtained, specifically: Through the TextureCached class, check whether the key corresponding to the current tile is saved in its own contents texture list according to the image data corresponding to each picture to be rendered. If the key already exists, it means that the tile has been loaded, and then texture processing is performed on the coordinate data according to the least recently used eviction strategy; If the key already exists, it means that the tile has not been loaded, then check whether the mapping cache is full. If it is full, get the contents texture list and remove the earliest inserted and recently unused texture coordinates to obtain an available position from the mapping cache, associate the new texture coordinates with the key and store them. If it is not full, directly obtain the available position from the mapping cache, associate the new texture coordinates with the key and store them.

7. The method for rendering ocean data by hierarchical partitioning according to claim 6, characterized in that: The texture processing of the coordinate data according to the least recently used eviction strategy is specifically as follows: Get the texture coordinate value saved in the mapping through the key, delete the mapping of the key, reset the key and texture coordinates, and calculate the actual texture coordinates used through the coordinate offset: LeftX=x+leftOffset / pixelsAcross, TopY=y+topOffset / pixelsAcross, RightX=x+rightOffset / pixelsAcross, BottomY=y+bottomOffset / pixelsAcross; Among them, LeftX, TopY, RightX and BottomY are texture coordinates respectively, pixelsAcross is the size value in pixels corresponding to one unit of texture value, leftOffset is the offset of the left side relative to the entire tile layout, topOffset is the offset of the top relative to the entire tile layout, rightOffset is the offset of the right side relative to the entire tile layout, and bottomOffset is the offset of the bottom relative to the entire tile layout.

8. The method for rendering ocean data by hierarchical partitioning according to claim 1, characterized in that: The WebGL rendering pipeline draws on the pre-built canvas according to the rendering configuration parameters, image global variables and texture attribute variables to obtain the rendering tiles corresponding to the image to be rendered, specifically: The WebGL rendering pipeline defines a vertex shader and a fragment shader according to rendering configuration parameters. The vertex shader performs matrix transformation on the position coordinates of the vertex according to the image global variables, and sends the texture attribute variables to the fragment shader. The matrix transformation is position=transformMatrix*x, y, 0.0, 1.0), where transformMatrix is ​​a 4×4 matrix for storing transformation information, and position is a vector of vertex position coordinates. The fragment shader samples the color value from the texture according to the defined texture boundary textureBound and the texture attribute variable, and checks whether the value of the alpha channel is less than a preset value. If so, the value of the alpha channel is discarded and linear interpolation is performed. The interpolated value is compared with the sentinel value and color scale in the texture attribute variable, and the final color output to the screen is obtained according to the comparison result.

9. A device for rendering ocean data in a hierarchical and partitioned manner in a low-bandwidth environment, characterized in that: include: The data acquisition module is used to obtain raw ocean data from an external data source, name the raw ocean data according to a set file naming format, obtain the ocean data to be processed, and generate a map of the ocean data to be processed; A slicing module is used to slice the map according to the corresponding relationship between the resolution and different levels to obtain a map tile matrix corresponding to each level, and convert the tiles in the map tile matrix into a picture format to obtain a tile atlas corresponding to each level; A rendering processing module is used to determine the level to be pulled based on the current map zoom size of the preset window, and pull the tile atlas corresponding to the determined level into the current window; Performing partition rendering processing on the tile atlas pulled into the window to obtain a rendered tile atlas; Mount the rendered images in the tile atlas to the specified page for display.

10. A device for rendering ocean data in a hierarchical and partitioned manner in a low-bandwidth environment, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the method for hierarchical and partitioned rendering of ocean data in a low-bandwidth environment as described in any one of claims 1 to 8 is implemented.

Images