Vector slice-based dynamic configuration method for spatial data front-end visualization style

Abstract

The present application relates to a vector slice-based spatial data front-end visualization style dynamic configuration method, comprising: a server publishing a vector slice package as a vector slice service; a front end obtaining the vector slice package and a style file, parsing the style file and forming an XML mapping script style file, comprising: parsing style information in elements to obtain a text format style file; clustering elements with consistent rendering styles and uniformly matching the clustered elements to one style; setting a number of processes according to the data volume of the style file, establishing a corresponding number of empty XML script files, writing the style text into the corresponding script files after division and translation, and merging multiple script files to obtain an XML mapping script style file; and parsing the XML mapping script style file and performing data visualization according to the configured style. The present application processes the style file, eliminates data redundancy, reduces the transmission pressure of the front and back ends, and improves the real-time rendering efficiency of the map style changing with attributes.

Description

Technical Field

[0001] This invention belongs to the field of geographic information technology, specifically relating to a method for dynamically configuring front-end visualization styles of spatial data based on vector tiles. Background Technology

[0002] Currently, most traditional large-scale online electronic maps use raster tile technology for front-end display. Because raster tiles are displayed as images, users cannot edit or analyze the raw data after acquiring the images. The map's interactive capabilities are weak, and the resolution limitations of raster tiles make it difficult to meet the needs of complex geospatial information analysis. The rise of vector tile electronic maps offers a new solution to these problems, maintaining data accuracy, interactivity, and analytical capabilities while ensuring rapid data transmission and retrieval.

[0003] However, currently, a large amount of existing spatial data style files are made into formats supported by GIS software. Due to the design of these formats, data sharing in the later stages will be greatly hindered. Therefore, this invention designs a scripted style conversion method and adopts a multi-process parallel strategy during the conversion process, which greatly improves the efficiency of style conversion and provides favorable conditions for dynamic style configuration. Summary of the Invention

[0004] The purpose of this invention is to provide a method for dynamically configuring the front-end visualization style of spatial data based on vector slicing.

[0005] To achieve the above technical objectives, the present invention adopts the following solution:

[0006] A method for dynamically configuring front-end visualization styles for spatial data based on vector slicing includes the following steps:

[0007] A method for dynamically configuring front-end visualization styles for spatial data based on vector slicing includes:

[0008] The server publishes the vector tile package as a vector tile service;

[0009] The front-end obtains the vector tile package and style file, parses the style file, and generates an XML drawing script style file that can be recognized by the front-end rendering engine, including:

[0010] Parse the style information in the elements to obtain a text-formatted style file;

[0011] Cluster elements with consistent rendering styles, and use script selectors to match the clustered elements to a single style.

[0012] The number of processes is set according to the data volume of the style file. A corresponding number of empty XML script files are created according to the number of processes. The style file is divided, translated and written into the corresponding script file. Multiple script files are merged to obtain the XML drawing script style file.

[0013] Parse the XML charting script style file and visualize the data according to the configured style.

[0014] As a preferred implementation, the style information in point, line, and surface elements is parsed separately to obtain a text-formatted style file.

[0015] As a preferred embodiment, the elements with consistent rendering styles refer to: point elements with consistent shape, thickness, color, and angle; line elements with consistent shape, color, and thickness; or surface elements with consistent fill color and outer border.

[0016] As a preferred implementation, parsing the XML charting script style file and performing data visualization according to the configured style includes:

[0017] Parse the XML mapping script style file to determine the rendering layer, feature category, and corresponding data source configured in the style file, and save the data source object and rendering layer object to the vector array of the rendering engine.

[0018] As a preferred implementation, after the user modifies the style on the front end, the rendering engine accesses the vector array and modifies and saves the style file.

[0019] In one preferred implementation, the key-value pairs of the rendering layer configured in the style file are determined by matching the preset string with the string in the style file, and the rendering layer, feature category and corresponding data source configured in the style file are determined by the key-value pairs.

[0020] As a preferred implementation, the symbol style for vector slices is defined as follows:

[0021] Dotted symbols: User-uploaded images, and / or images with different display effects obtained by recoloring or rotating the images;

[0022] Linear symbols: Symbol styles formed by assembling multiple lines or dots;

[0023] Polygon Symbols: Standard polygon symbols with custom fill colors, fill transparency, and border styles; as well as user-uploaded custom image fill polygons.

[0024] As a preferred implementation, during data visualization, filtering settings are applied to elements displayed at different display ratios; and / or the display of symbols is adjusted at different display ratios.

[0025] As a preferred implementation method, during data visualization, the positional relationship between upper and lower layers is dynamically adjusted according to the importance of the feature layers at the same scale level; for complex types of features, they are symbolized according to their level classification.

[0026] As a preferred implementation, it also includes: creating a backend application based on a microservice framework; after the style is modified, the frontend transmits the modified style to the backend application; the backend application locates the tag where the style file is located according to the modified style and replaces the original style file; and the backend style file is then permanently saved.

[0027] The method of this invention is applied to the browser side. The browser side can establish a connection with the server through network communication. When the browser application has an update requirement, it obtains the style file from the server and stores it in the local database. Then, the front-end engine parses the style file and calls the local code on the browser side to build the page style file program according to the attribute information in the style file. Finally, the new map style is loaded and generated in the browser interface, thereby realizing the function of building complex electronic maps in the browser program.

[0028] The method of the present invention has the following beneficial effects:

[0029] (1) The style file is processed to eliminate data redundancy and reduce the transmission pressure on the front end and back end. Compared with the existing technology, the real-time rendering efficiency of map style changes with attribute changes is improved.

[0030] (2) It overcomes the shortcomings of single-style rendering of raster tiles and the need for professional GIS software to match maps, and enables users to configure different styles of elements in the process of complex electronic map visualization in the browser front end, providing users with customized map styles and better display effects.

[0031] (3) Through the cooperation of front-end and back-end programs, the problem of synchronous sharing of visualization style modification for massive complex spatial data is solved. Users can dynamically configure and modify the style files after parsing and processing. The modified style attributes are saved through the back-end program. Different clients share the latest style in real time, realizing the dynamic configuration of the front-end visualization style. Attached Figure Description

[0032] Figure 1 This is a flowchart of the method of the present invention.

[0033] Figure 2 Example of a rule for defining complex symbol styles as defined in this invention. Implementation

[0034] The technical solution of the present invention will be further described below with reference to specific embodiments.

[0035] A method for dynamically configuring front-end visualization styles for spatial data based on vector slicing, such as... Figure 1 As shown, it includes the following steps:

[0036] S1. Publish vector tile service.

[0037] S11. Create a vector slice index for vector data to generate multi-scale faceted grids of different densities from data of different densities, forming a multi-level slice index.

[0038] S12. Create a vector package, using the generated grid as the index surface parameter, set the tiling scheme, maximum and minimum tiling buffer ratio, construct grid tiles of different levels, and generate a vector tiling package;

[0039] S13. Publish the generated vector tile package as a vector tile service through the server.

[0040] S2. Define complex symbol style rules to realize the spatial expression of complex electronic maps.

[0041] Dot symbols: Supports user-uploaded images as dot symbols. If the image is in PNG format, it can be converted from a regular PNG to an SDF format PNG. It can also recolor and rotate the image, optimizing the image display effect.

[0042] Line symbols: Basic line symbols only provide attributes such as color, width, and translation. For complex line symbols such as railways and trajectory lines with arrows, it is not possible to achieve them through the basic attributes of lines. We generate new symbol styles by assembling multiple lines or points.

[0043] like Figure 2 As shown, the railway symbol is generated by combining two types of linear symbols: a solid red line at the bottom and a dashed white line at the top. The short dashed lines and the intervals between them are of the same length, and the two lines are set to the same width.

[0044] The arrowed trajectory line is generated by combining a line symbol and a dot symbol. The bottom layer is a solid blue line, and the top layer is an arrow dot symbol. The arrow dot symbol sets the position of the symbol (the line is the symbol on the road line) and the spacing between symbols. The arrow style is customized by the image, and can be set to an arrow or a car, etc. The direction of the trajectory line is defined by the direction of the arrow or the direction of the car's front.

[0045] There are two style definition rules for the Great Wall symbol. The first is a dashed line overlaid with dotted arch symbols. The size of the dotted symbols must be equal to the gap length of the dashed lines, and the spacing of the dotted arch symbols on the line must match the dash length of the short dashed lines. The second is two dashed lines superimposed with vertical dotted lines. The short dashed lines and their spacing cycle in [6,6], while the short dashed lines and their spacing cycle in [0,6,6,0], i.e., 0 pixels for the short dashed line, 6 pixels for the gap, 6 pixels for the short dashed line, and 0 pixels for the gap. The spacing of the vertical dotted lines on the line must match the dash length of the short dashed lines. This definition rule requires the short dashed lines and their gaps to be equal; if they are not equal, the first definition rule can be used.

[0046] Area symbols: Ordinary area symbols can be set with fill color, fill transparency, and border style. However, for those that require customized fill styles, we use custom images to fill the area. For example, vegetation area symbols can be customized by users uploading images of grass.

[0047] S3. The front end receives vector tile packages and style files, parses the style files, generates XML drawing script style files, eliminates data redundancy, and uses vector arrays to achieve efficient style modification, specifically including:

[0048] S31. Currently, point, line, and polygon style data are stored in three file formats. First, a script file is needed to parse the style information in the point, line, and polygon features respectively, so as to obtain a .txt text style file.

[0049] S32. Use a scripting language to cluster elements with consistent rendering styles (greatly reducing the number of text style files, increasing the efficiency of front-end rendering, and avoiding repeated rendering), and use a script selector to uniformly match these elements to a single style.

[0050] The rendering style is consistent for example:

[0051] Point elements that are consistent in shape, thickness, color, angle, etc.

[0052] Line elements that are consistent in shape, color, thickness, etc.

[0053] Surface features with consistent fill color, outer border, etc.

[0054] S33. Based on the data volume of the clustered text style files, set the target text and the total number of processes. Create a corresponding number of empty XML script files based on the total number of processes. Then, based on the number of processes and the total number of tasks, divide the style files into equal tasks and use Python for automatic load balancing to execute the translation tasks. Write the results into the corresponding XML script files, and finally merge the multiple XML script files. After experimentation, it was found that setting the number of processes to 32 for the style files (number of clustered styles) resulted in the fastest parsing speed and tended to be the most stable.

[0055] The conversion and translation process: For example, the text style of a polygon feature with the ID 322, color (253,14,27), and outer border color (242,239,249) is: 322,253,14,27,242,239,249,0,0000,0.0000. This can be converted into an XML style file with the following format: <filter> ([style_id=322])< / filter> <polygon symbolizer fill=""#Fd0e1b”"> <line symbolizer stroke="”#F2eff9”">.

[0056] S34. Parse the merged XML script file to obtain the data source, feature categories, and rendering layers associated with each feature category configured in the style file.

[0057] The style file describes the map's style configuration information in the form of key-value pairs. By matching preset strings with strings in the map style, the key-value pairs configuring the rendering layers in the style file are determined.

[0058] For example, by matching the first string "source-list" with the strings in the style file, the key-value pairs with "source-list" as the key are identified. Then, by parsing according to the index value, information such as the address and name of all data sources in the style file can be obtained.

[0059] You can also set a second string to match with the string in the style file to determine the key-value pairs of the rendering layer in the style file. Based on these key-value pairs, you can determine the rendering layer in the style file, the feature category associated with that rendering layer, and the data source of that rendering layer. For example, with "source": "XXXX.YYYY.ZZZZ", XXXX refers to the key, YYYY refers to the rendering layer identifier, and ZZZZ refers to the data source identifier to which the rendering layer belongs.

[0060] In other words, this key-value pair can be used to determine the rendering layer, feature category, and corresponding data source configured in the style file. The rendering layer refers to the subdivision of feature categories; for example, for roads, feature categories further include: highways, railways, national highways, provincial highways, and urban main roads, etc.

[0061] S35. The front-end rendering engine parses style files and saves data source objects and rendering layer objects to a vector array in the rendering engine. After the user modifies the style on the front end, the rendering engine can directly access the vector array to modify and save the style file. Users can make batch style modifications based on layers, or filter and customize styles by attributes. After modification, the latest configured style data can be displayed on the map in real time.

[0062] S4. Provide users with the ability to dynamically set various types of symbols in a visual form on the browser, enabling users to personalize their style modifications.

[0063] S41, Cross-scale spatial data symbolization

[0064] Different display scales result in changes in the amount of map information. The style, size, color, and visibility of symbols at different levels need to be adjusted to ensure the clarity and consistency of map symbols across multiple scales. For example, to improve map readability, roads are displayed with different features at different scales. At smaller scales, only important main roads are shown. Users can set feature filtering conditions based on attributes to filter features displayed at different scales, defining the maximum and minimum scales for the filtered features. Road symbol sizes increase with scale, and their line combination period should be shortened accordingly, resulting in denser line displays on the map. When the size reaches a certain value, double lines can be used, at which point different symbol parameters or styles can be set for different scales.

[0065] S42. Visual configuration of symbols for different elements at the same scale

[0066] At the same scale, users can dynamically adjust the positional relationship between upper and lower layers based on the importance of the feature layer. For complex features, they can be symbolized according to their level. For example, roads can be divided into different levels such as highways, railways, national highways, provincial highways, and urban arterial roads. In this case, different styles of symbols need to be set for different levels of roads. For basic points, lines, and polygons, the symbol style can be modified through the symbol parameters. For complex symbols, multiple types of symbols can be combined to generate new symbols, achieving diversified style configuration. For important road directions, arrow-shaped symbols can be placed along the route, and users can upload custom arrow symbol images.

[0067] S5. Personalized Style Sharing. A backend application is created using a microservice framework. This primarily enables the saving of modified style files. The frontend transmits partially modified styles to the backend application. The application quickly locates the tag containing the style file (i.e., the key-value pair of a specific element in the XML file) based on the modified style, and replaces the original style file with the modified style, thus achieving permanent style saving. Other users can synchronize the latest style's vector tile data, enabling the synchronous sharing of personalized styles.< / line> < / polygon>

Claims

1. A method for dynamically configuring front-end visualization styles for spatial data based on vector slicing, characterized in that: include: The server publishes the vector tile package as a vector tile service; The front-end obtains the vector tile package and style file, parses the style file, and generates an XML drawing script style file that can be recognized by the front-end rendering engine, including: Parse the style information in the elements to obtain a text-formatted style file; Cluster elements with consistent rendering styles and use a script selector to match the clustered elements to a single style. Elements with consistent rendering styles refer to: point elements with consistent shape, thickness, color, and angle; line elements with consistent shape, color, and thickness; or polygon elements with consistent fill color and outer border. The number of processes is set according to the data volume of the style file. A corresponding number of empty XML script files are created according to the number of processes. The style file is divided, translated and written into the corresponding script file. Multiple script files are merged to obtain the XML drawing script style file. Parsing XML mapping script style files and performing data visualization according to the configured styles includes: parsing the XML mapping script style files, determining the rendering layers, feature categories, and corresponding data sources configured in the style files, and saving the data source objects and rendering layer objects to the vector array of the rendering engine; after the user modifies the style on the front end, the rendering engine accesses the vector array and modifies and saves the style file; during data visualization, at the same scale level, the positional relationship between upper and lower layers is dynamically adjusted according to the importance of feature layers; for complex types of features, they are symbolized according to hierarchical classification.

2. The method according to claim 1, characterized in that, The style information in point, line, and polygon features is analyzed separately to obtain a text-formatted style file.

3. The method according to claim 1, characterized in that, By matching the preset string with the string in the style file, the key-value pairs of the rendering layer configured in the style file are determined. The rendering layer, feature category, and corresponding data source configured in the style file are then determined through the key-value pairs.

4. The method according to claim 1, characterized in that, The symbol style definition for vector slices is as follows: Dotted symbols: User-uploaded images, and / or images with different display effects obtained by recoloring or rotating the images; Linear symbols: Symbol styles formed by assembling multiple lines or dots; Polygon Symbols: Standard polygon symbols with custom fill colors, fill transparency, and border styles; as well as user-uploaded custom image fill polygons.

5. The method according to claim 1, characterized in that, When visualizing data, filter the elements displayed at different display scales; and / or adjust the display of symbols at different display scales.

6. The method according to claim 1, characterized in that, Also includes: When a backend application is created based on a microservices framework, after the style is modified, the frontend transmits the modified style to the backend application. The backend application then locates the tag containing the style file based on the modified style and replaces the original style file.

Images