Vector data cutting and rendering method based on four-dimensional expansion
Through the vector data cropping and rendering method based on four to extended, the problem of edge overlap or gaps in traditional technology is solved, and the map is clear, beautiful and efficient rendering is achieved.
Patent Information
- Application Number
- CN202411850498.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-16
- Publication Date
- 2025-04-11
AI Technical Summary
After the traditional vector data slicing technology re-stitches and rendering tiles, edge overlap or gaps are left in the edges, affecting the overall effect of the map display.
The vector data cropping and rendering method based on four to extension is adopted. By outsourcing the vector data, rectangle simplification, single pixels are discarded, and the reproduction of polygonal or line elements is carried out when necessary, to ensure the redundancy of data. Then, adjust the latitude and longitude offset of the edge-completion processing area according to the map level and range displayed on the front end.
It effectively solves the problem of edge display abnormalities, ensures the clarity and aesthetics of the map, reduces network transmission pressure and accelerates front-end rendering.
Smart Images
Figure CN119810352A_ABST
Abstract
Description
Technical Field
[0001] The invention relates to the technical field of geographic information systems, and in particular to a vector data cutting and rendering method based on four-to-four extension. Background Art
[0002] WebGIS generally adopts B / S (Browser / Server) system architecture, with the browser as the communication bridge between users and map services. When users browse vector maps with browsers, if all data within the spatial range of the vector map is returned to the front end, it will lead to problems such as long response time or even browser crash, which seriously affects the user's interactive experience.
[0003] Vector slicing technology divides vector data into grid blocks, and basically realizes the real-time display requirements of vector maps by breaking the whole into parts. In order to ensure that the front-end visualization area based on Canvas technology can correctly render the vector map, the original data is cut based on the characteristics of front-end rendering to ensure the efficiency and completeness of data front-end rendering.
[0004] With the continuous growth of basic map data, vector network maps will find it difficult to clearly express vector data, especially when the map is zoomed out, problems such as graphic overlap and overlap are prone to occur. In the construction of the national forest "one map" launched in 2010, the number of forest boundary spots alone reached more than 60 million. The huge amount of map data will seriously affect the transmission and drawing speed of network maps, and in serious cases will cause the map client to crash. It can be seen that the construction of vector network maps must solve two problems. One is how to realize the multi-scale display of vector network maps to ensure the clarity and beauty of the map when zooming and displaying, and the other is how to obtain vector data on demand to reduce the pressure of network transmission and accelerate the rendering of the front end.
[0005] Clipping vector data by tile range is the process of superimposing vector data and tiles in the same spatial coordinate system and taking the intersecting area as the clipping result. Generally, after clipping a graphic, the graphic will be split into multiple parts, and these clipping results will contain the spatial information of the clipping boundary. For example, line data may have new vertices after clipping, and surface data may have new edges after clipping. If this new information is not marked, display errors will occur when the tiles are subsequently merged and displayed. For line data, the merged data will not be much different from the original data in display, but for surface data, the merged data may have errors in display. Figure 1 As shown, Figure 1 (a) is a schematic diagram of the tile after cutting. Figure 1(b) is a schematic diagram of the result after front-end rendering and stitching. After the vector data is cropped based on the original tile size and rendered and displayed on the front end, many clipping lines will appear, making it impossible to display the spatial data normally. Summary of the invention
[0006] The technical problem to be solved by the technical solution of the present invention is that the traditional vector data slicing technology will mark the edge parts. Due to the limitations of browser resolution, coordinate offset after map slicing and other reasons, some data will have overlapping edges or gaps in the edges after re-splicing and rendering tiles, affecting the overall effect of map display.
[0007] The technical solution of the present invention provides a vector data cutting and rendering method based on four-to-one extension, comprising the following steps:
[0008] When clipping vector data:
[0009] Read the data range to be sliced according to the conventional pyramid architecture tile segmentation method;
[0010] For the vector data corresponding to the slice data range, the enclosing rectangle of the vector data is used as the simplification basis. If the four boundaries of the enclosing rectangle are within the spatial range represented by a single pixel, the single pixel is discarded, otherwise the single pixel is retained to obtain the vector data after four-boundary expansion;
[0011] Determine whether there are area elements converted into lines or points and line elements converted into points in the vector data after the four-dimensional expansion. If there are area elements or line elements converted into points, the vector data after the four-dimensional expansion is retained to supplement the content of the data splicing display through the "redundancy" of the data;
[0012] If there are surface elements that are transformed into lines, the area-perimeter ratio constraint method is used to make a selection and obtain the expanded vector data;
[0013] Slicing the vector data after expansion and / or the vector data after expansion, storing them in layers according to the map level and coordinate range in a pyramid model structure, and obtaining tile data to be spliced after slicing;
[0014] When rendering:
[0015] Obtain the tile data to be spliced after slicing, read it according to the map level and range displayed on the front end, determine the pixel position of the first side of the tile data to be spliced after slicing in the display device, and determine whether the second side corresponding to the tile adjacent to the first side is consistent with the first side;
[0016] If they are inconsistent, the pixel range is reselected according to the difference between the first side and the second side for stitching rendering display, so as to adjust the longitude and latitude offset of the edge completion processing area.
[0017] Preferably, after acquiring the tile data to be spliced after slicing, it is determined whether the coordinate system of the tile data to be spliced after slicing is a pixel coordinate system, and if not, the coordinate system of the tile data to be spliced after slicing is converted into a pixel coordinate system.
[0018] Preferably, the rendering uses JavaScript scripts to draw vector graphics.
[0019] Preferably, the rendering adopts Canvas geographic information graphical rendering technology.
[0020] Preferably, the rendering uses a Canvas matrix to implement sliced asynchronous rendering of vector tiles.
[0021] The technical solution of the present invention proposes a vector data cutting and rendering method based on four-boundary expansion, which mainly handles the edge connection problem from the level of map tile data, so that the visualization of the data is not affected by objective factors such as display resolution, solves the problem of gap data completion through data redundancy, and adjusts the longitude and latitude offset problem of the edge connection completion processing area through front-end calculation. BRIEF DESCRIPTION OF THE DRAWINGS
[0022] Figure 1 A schematic diagram of rendering after tile cutting and re-joining in the prior art;
[0023] Figure 2 A schematic diagram of four-to-extended data slices provided in an embodiment of the present invention;
[0024] Figure 3 A schematic diagram of the preview effect in the project application map provided in an embodiment of the present invention;
[0025] Figure 4 A schematic diagram of data splicing and rendering effect in a project application provided by an embodiment of the present invention;
[0026] Figure 5 A schematic diagram of function overlay based on map rendering in a project application provided in an embodiment of the present invention. DETAILED DESCRIPTION
[0027] The present invention will be further described below in conjunction with specific embodiments. It should be understood that these embodiments are only used to illustrate the present invention and are not intended to limit the scope of the present invention. In addition, it should be understood that after reading the content taught by the present invention, those skilled in the art can make various changes or modifications to the present invention, and these equivalent forms fall within the scope limited by the appended claims of the application equally.
[0028] The load of a map depends on the map scale. For tile maps, the amount of elements contained in a vector tile map also depends on the display level of the current map. In fact, in order to better disperse data and balance the load, the load of each tile in a vector tile map should be balanced. Based on the vector tile pyramid hierarchical organization model, the lower the spatial resolution, the fewer elements the vector tile map will contain, and as the display level and spatial resolution increase, the elements displayed by the vector map will be more detailed.
[0029] The current computer screen resolution has several levels, such as 1024*768, 1920*800. When the computer draws an image, a single pixel will eventually present a color, and for an image, multiple pixels will be presented together. Limited by the resolution of the computer screen, there will still be a loss of precision when the vector tile is rendered on the front end. In particular, for small features, it is impossible to render details inside a single pixel; for some narrow and long polygons, it is impossible to maintain the shape of the polygon after rendering, that is, it will degenerate into a line feature after rendering. In the vector tile pyramid model, due to the difference in display accuracy, it is bound to cause many spatial objects to retain their original spatial characteristics in high-level tiles but lose their original spatial characteristics in low-level tiles. For this situation, in the data synthesis scenario, it can be achieved in several ways, such as selection, feature type conversion, and merging with neighboring features.
[0030] The vector feature selection method based on four-boundary constraints uses the outer rectangle of the vector data as a simplification basis to select features. Comparing the size of the outer rectangle of the vector data, if the four boundaries of the outer rectangle are within the spatial range represented by a single pixel, the feature is discarded, otherwise it is retained.
[0031] Although feature selection based on four-boundary constraints can filter out many small-area patches that cannot be displayed correctly, it cannot determine the selection of narrow and long features. Due to the loss of accuracy during display, spatial data may change in nature during display, such as surface features being transformed into lines or points, and line features being transformed into points. For the case of transformation into points, four-boundary constraints can be used to make better selections, but for the case of transformation into lines, the four-boundary method cannot be used to solve the problem. For the latter, this paper adopts a constraint method based on the area-to-perimeter ratio to make selections.
[0032] The vector data cutting method based on four-dimensional expansion is to reset the tile size and display range of each slice, and use the "redundancy" of data to supplement the content of data splicing display. In the traditional cutting method, the software divides the map into 256*256 pixels (such as Figure 2 In this method, the pixel range of the data slice is expanded, and the side length of the square slice data is extended to a number of pixels in each of the four directions, and the extended pixel sizes in the four directions are consistent (such as Figure 2 A), forming map tiles with overlapping data.
[0033] The process of vector tile clipping is:
[0034] ① Read the data range to be sliced according to the conventional pyramid architecture tile segmentation method;
[0035] ② Expand the original 256*256 pixel range (a*a range), which can be adjusted according to actual needs. The recommended range is 261*261 pixels (A*A range);
[0036] ③After data slicing, the tile data is stored according to the original pyramid architecture;
[0037] ④ After tile cutting is completed, the data is stored in layers according to the map level and coordinate range in a pyramid model structure.
[0038] Canvas is a commonly used geographic information graphical rendering technology. It is based on pixels and uses JavaScript scripts to draw vector graphics. In the vector slicing system, the Canvas matrix is used to implement the asynchronous rendering of vector tiles. Each 256*256 pixel grid corresponds to a Canvas canvas and also to a vector tile. The browser will calculate the coordinates of the grid according to the map range in the current window, and the Canvas containers in these windows will initiate asynchronous requests to the tile background. Once the tile data is obtained, the corresponding canvas can draw the vector graphics. In this way, the problem that the front end needs to wait for all the data to arrive before drawing is avoided, the time of the interface white screen is reduced, and the user experience is optimized.
[0039] The coordinate system in the Canvas is a pixel coordinate system, and its coordinate origin is the upper left corner of the canvas. After obtaining the vector tile data, if the tile data is a projection coordinate system / geodetic coordinate system, the coordinates need to be converted to a pixel coordinate system before drawing. When the tile format is PBF, the tile data has been saved as pixel coordinates, and fast rendering can be achieved through scripts. For a Canvas, if the coordinate size of a vector graphic exceeds the range covered by the canvas after being converted to pixel coordinates, only part of the graphic can be displayed, and the part of the graphic that exceeds the border of the canvas will be hidden (excluding the border). It can be seen that the correct display of the vector tile map depends on the correct loading and drawing of all tiles in the current window, and also depends on the correct merging of all tiles, and the correct merging of vector tiles depends on the correct cropping of vector data.
[0040] When rendering the map, the tile data needs to be read according to the map level and range displayed on the front end. Figure 2For example, the correct tile display range should be a rectangular range of 2a*a, but the actual tile range is A*(A+a). During the data rendering process, the extra part needs to be dynamically calculated and hidden during front-end rendering, that is, the tile visualization range is different from the actual tile range.
[0041] Geographic information is a set of continuous data with fixed coordinate information. After dynamic rendering and supplementation, there may be information duplication in the supplemented area. This requires the front-end rendering to process the special tile splicing part:
[0042] ① The front end determines the pixel position of a certain edge in the display device based on the position of the edge of the data;
[0043] ② Determine whether the corresponding a-side position of the tile adjacent to a certain a-side is consistent with the target a-side position;
[0044] ③ If the positions of two adjacent a edges are the same, they are rendered using conventional splicing methods;
[0045] ④ If the positions of two adjacent a edges are inconsistent, a suitable pixel range is extracted from the range of Aa for display. Assume that the extracted pixel range is n (0<n≤Aa);
[0046] ⑤Within the supplementary range of a*n, shield the data operation function.
[0047] Through this method, the front end can adapt according to the actual display device when rendering the map, ensuring friendly display and usage effects on different display devices.
[0048] The key point of the embodiment of the present invention is the post-processing logic of redundant segmentation and splicing rendering of data, which is different from general vector data slicing. The embodiment of the present invention optimizes and improves the processing and display of geographic information data for the visualization of geographic information data and the underlying slicing logic, aiming to solve the problem of abnormal edge display in the map front-end rendering process. In the use of geographic information display, due to factors such as the resolution and hardware limitations of each display terminal, data splicing gaps will appear after some map tiles are spliced, affecting the visualization and other application effects of geographic information. This method solves the problem of gap data completion by means of data redundancy, and adjusts the longitude and latitude offset of the edge completion processing area through front-end calculations. Figure 3-Figure 5 As shown, this method has been applied in the implementation of relevant projects, the map application effect is good, and GIS-related operations can be performed in the rendering layer without rendering anomalies.
Claims
1. A vector data cutting and rendering method based on four-to-four extension, characterized in that: The following steps are involved: When clipping vector data: Read the data range to be sliced according to the conventional pyramid architecture tile segmentation method; For the vector data corresponding to the slice data range, the enclosing rectangle of the vector data is used as the simplification basis. If the four boundaries of the enclosing rectangle are within the spatial range represented by a single pixel, the single pixel is discarded, otherwise the single pixel is retained to obtain the vector data after four-boundary expansion; Determine whether there are area elements converted into lines or points and line elements converted into points in the vector data after the four-dimensional expansion. If there are area elements or line elements converted into points, the vector data after the four-dimensional expansion is retained to supplement the content of the data splicing display through the "redundancy" of the data; If there are surface elements that are transformed into lines, the area-perimeter ratio constraint method is used to make a selection and obtain the expanded vector data; Slicing the vector data after expansion and / or the vector data after expansion, storing them in layers according to the map level and coordinate range in a pyramid model structure, and obtaining tile data to be spliced after slicing; When rendering: Obtain the tile data to be spliced after slicing, read it according to the map level and range displayed on the front end, determine the pixel position of the first side of the tile data to be spliced after slicing in the display device, and determine whether the second side corresponding to the tile adjacent to the first side is consistent with the first side; If they are inconsistent, the pixel range is reselected according to the difference between the first side and the second side for stitching rendering display, so as to adjust the longitude and latitude offset of the edge completion processing area.
2. A vector data cutting and rendering method based on four-to-four extension as claimed in claim 1, characterized in that: After the tile data to be spliced after slicing is obtained, it is determined whether the coordinate system of the tile data to be spliced after slicing is a pixel coordinate system. If not, the coordinate system of the tile data to be spliced after slicing is converted into a pixel coordinate system.
3. The vector data cutting and rendering method based on four-to-four extension as claimed in claim 1, characterized in that: The rendering uses JavaScript scripts to draw vector graphics.
4. The vector data cutting and rendering method based on four-to-one expansion as claimed in claim 1, characterized in that: The rendering adopts Canvas geographic information graphics rendering technology.
5. The vector data cutting and rendering method based on four-to-four extension as claimed in claim 4, characterized in that: The rendering uses the Canvas matrix to implement the asynchronous rendering of vector tiles.