Visual style dynamic management method based on map layer tree

Abstract

The invention provides a visual style dynamic management method based on a map layer tree, and belongs to the technical field of geographic information management, and the method comprises the following steps: S1, constructing an initialized layer tree; s2, visual style editing and processing are completed; according to the visual style dynamic management method based on the map layer tree, intelligent processing and efficient rendering of the layer style are achieved through the recursive tree traversal and difference detection algorithm in combination with the incremental style updating and local rendering technology, the style attribute of the complex layer tree does not need to be manually adjusted layer by layer, and the method has the advantages of being high in practicability and easy to popularize. The map editing efficiency is greatly improved, and the development and maintenance cost of a large-scale geographic information system is remarkably reduced.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of geographic information management, and particularly relates to a visual style dynamic management method based on a map layer tree. BACKGROUND

[0002] With the continuous development of geographic information system (GIS) technology in China, the process of digital city construction is changing rapidly, and map visualization technology plays a key role in the infrastructure construction of smart cities in China, and plays a decisive role in urban planning, construction and management. Map layers and their style configuration constitute the core elements of geographic information visualization and analysis.

[0003] However, when dealing with complex requirements such as large-scale, multi-level map layer management, style customization and real-time rendering, full automation has not yet been achieved, and professional technical personnel still rely on manually writing style codes to achieve the effect.

[0004] One existing layer style management method is to directly modify the style JSON configuration according to the underlying data structure, adjust the style attributes inside the layer, such as color, transparency, line width and other parameters. This management method has high technical threshold, complex operation and low efficiency, which is referred to as "code management". This method has high flexibility and can accurately control the style details of each layer, but it is complex to operate and requires professional technical personnel to manually write and maintain the code, which is not suitable for non-technical personnel. Another is through a relatively simple visualization editing interface that only targets the surface properties of the layer. It usually uses drag-and-drop controls to quickly adjust style parameters and check effects such as layer visibility, color changes, etc. This is referred to as "visual management". This method cannot achieve intelligent processing and efficient rendering of layer styles, and requires manual adjustment of style attributes for complex layer trees, which reduces map editing efficiency and increases the development and maintenance cost of large-scale geographic information systems. Therefore, a visual style dynamic management method based on a map layer tree is needed to solve this problem. SUMMARY

[0005] To achieve the above purpose, the application provides a visual style dynamic management method based on a map layer tree, which includes the following steps: S1: constructing an initialized layer tree; S2: completing visual style editing and processing through a collaborative running recursive tree traversal and difference detection algorithm, and a hierarchical aggregation and style merging algorithm; S3: real-time rendering and previewing through an incremental style update and local rendering algorithm.

[0006] Further, the step S1 of constructing an initialized layer tree specifically includes the following: S11: the front-end application obtains authorized layer data and map style configuration from the server; S12: The front-end application parses it into a unified layer tree data structure; S13: The constructed layer tree is stored in Redux state management, and then a global access layer tree component is provided.

[0007] Further, the recursive tree traversal and difference detection algorithm in step S2 specifically includes the following: S211: Recursively traverse the tree structure to locate the current node; S212: Recursively traverse the tree structure to locate the current node; S213: When step S212 locates the current node as the target node, apply the new attribute set, calculate the attribute difference / nΔ (Sold, Snew) through the difference detection algorithm; S214: Only update the changed attributes, and then return the updated tree structure; S215: When step S212 locates the current node as the target node, recursively process the child nodes, and then repeat the above steps S212 and S213 in turn.

[0008] Further, the attribute difference calculation formula in step S213 is: .

[0009] Further, the hierarchical aggregation and style merging algorithm in step S2 specifically includes the following: S221: Build a group structure and collect all element attributes; S222: Classify element attribute types; S223: Merge and aggregate the classified attributes, and then apply them to the group structure.

[0010] Further, the classification of element attribute types in step S222 is divided into category type attributes and numerical type attributes; Apply the mode strategy to the category type attribute to select the most representative value; Apply the average value strategy to the numerical type attribute to calculate the comprehensive trend.

[0011] Further, the incremental style update and local rendering algorithm in step S3 specifically includes the following: S31: Issue a style update request; S32: Perform layer filtering; S33: Perform update operation classification; S34: Manage the rendering queue for the classified results, and then perform batch rendering; S35: Finally, refresh the view.

[0012] Further, the updating operation in S33 is classified into visibility updating, style attribute updating and filtering condition updating.

[0013] The advantage of the present application is that the present application provides a visualization style dynamic management method based on a map layer tree, which realizes intelligent processing and efficient rendering of layer styles through recursive tree traversal and difference detection algorithm, combined with incremental style updating and local rendering technology, without manually adjusting the style attributes of a complex layer tree layer by layer, greatly improving the map editing efficiency, significantly reducing the development and maintenance cost of large-scale geographic information system, not only in the application development process of geographic information system, realizing the visualization style dynamic management method based on the layer tree, enabling non-professional technical personnel to adjust the complex map layer style in real time through an intuitive interactive interface and immediately obtain visual feedback, thereby greatly improving the efficiency of thematic map production and user experience, but also solving the problems of scattered style management, update delay and low rendering efficiency of multiple types of layers (face, line, text, etc.), realizing centralized management and real-time updating of different types of layer styles through unified layer tree structure and incremental rendering technology, reducing system resource consumption and improving map rendering performance.

[0014] The present application will be described in detail below in conjunction with the accompanying drawings and examples. BRIEF DESCRIPTION OF DRAWINGS

[0015] Figure 1 is the first schematic diagram of the flow of the present application.

[0016] Figure 2 is the second schematic diagram of the flow of the present application.

[0017] Figure 3 is the schematic diagram of the recursive tree traversal and difference detection algorithm of the present application.

[0018] Figure 4 is the schematic diagram of the hierarchical aggregation and style merging algorithm of the present application.

[0019] Figure 5 is the schematic diagram of the incremental style updating and local rendering algorithm of the present application. DETAILED DESCRIPTION

[0020] In order to further illustrate the technical means and effects taken by the present application to achieve the predetermined purpose, the specific implementation, structural features and effects of the present application are described in detail below in conjunction with the accompanying drawings and examples.

[0021] With reference to the accompanying drawings, the technical solutions in the embodiments of the present application will be clearly and completely described in order to make the technical solutions in the embodiments of the present application apparent to those skilled in the art. Obviously, the described embodiments are only a part rather than all of the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative efforts belong to the scope of the present application.

[0022] In the description of the present application, it should be understood that the terms "center", "upper", "lower", "front", "back", "left", "right", "vertical", "horizontal", "alignment", "overlap", "bottom", "inner", "outer" and the like indicate the orientation or positional relationship based on the orientation or positional relationship shown in the drawings, and are only for the purpose of facilitating the description of the present application and simplifying the description, and do not indicate or imply that the device or element referred to must have a particular orientation, be constructed and operated in a particular orientation, and therefore cannot be understood as a limitation of the present application.

[0023] The terms "first", "second" are only for descriptive purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the technical features indicated. Therefore, the features defined with "first", "second" can explicitly or implicitly include one or more of the features; in the description of the present application, unless otherwise specified, the meaning of "multiple" is two or more.

[0024] Embodiment 1

[0025] The present embodiment provides a map layer tree-based visualization style dynamic management method as shown in Figures 1-5 The present embodiment provides a map layer tree-based visualization style dynamic management method as shown in S1: Construct an initialization layer tree; S2: Complete visualization style editing and processing by collaborative running of recursive tree traversal and difference detection algorithms, and hierarchical aggregation and style merging algorithms; When the user selects a specific layer from the constructed layer tree, the system intelligently identifies the layer type and dynamically constructs the corresponding style editing interface. After the user completes the style parameter adjustment, the system internally collaboratively runs the recursive tree traversal and difference detection algorithms and the hierarchical aggregation and style merging algorithms, accurately calculates the style changes and efficiently updates the layer tree structure, ensuring the consistency and integrity of the style data in the hierarchical structure. Recursive tree traversal refers to using recursive methods to implement tree structure traversal, and traversal refers to a process of accessing elements in a collection one by one or performing an operation in a certain order. S3: Real-time rendering and preview through incremental style update and local rendering algorithms; There is a two-way interaction, iterative optimization process between step S2 and step S3, when the user edits the style, he can immediately view the rendering effect, if the user is not satisfied with the effect, he can return to the editing page at any time for further adjustment, until the user is satisfied with the effect, this interaction mode embodies good user experience design, allows the user to find the best style setting in the process of continuous trial and preview, without completing the whole process and then modifying.

[0026] Further, the step S1 of constructing the initial layer tree specifically comprises the following: S11: the front-end application obtains authorized layer data and map style configuration from the server; S12: the front-end application parses it into a unified layer tree data structure; S13: store the constructed layer tree in Redux state management, and then provide global access to the layer tree component.

[0027] The system obtains authorized layer data and map style configuration from the server through the front-end application, parses it into a unified layer tree data structure, supports multi-level nesting and style inheritance, wherein, the style inheritance allows the style to be applied not only to a certain element, but also to its descendants, Redux is an application data flow framework, mainly used for application state management.

[0028] Further, the recursive tree traversal and difference detection algorithm in step S2 specifically comprises the following: S211: recursively traverse the tree structure to establish the recursive traversal tree structure; S212: locate whether the current node is the target node through recursive traversal of the tree structure; Wherein, each node in the layer tree has a unique key value, and the key value is found through recursive traversal to determine whether the current node is the target node; S213: when step S212 locates the target node, apply the new attribute set, calculate the attribute difference / nΔ (Sold, Snew) through the difference detection algorithm; S214: only update the changed attributes, and then return the updated tree structure; S215: when step S212 locates the current node which is not the target node, recursively process the child nodes, and then repeat the above steps S212 and S213 in turn.

[0029] Wherein, the attribute difference calculation formula is: ;

[0030] : Type: node object, two nodes to be compared, usually representing new and old states or objects from different data sources; : Type: function, returns the attribute set (key-value pairs) of node n, e.g., {color: "red", size: 10}; : Type: set, the set of all attribute keys (Keys) of node n, e.g., {color, size}; k: Type: string, attribute key (e.g., "color", "size"), uniquely identifies a node attribute; v: Type: arbitrary type, attribute value (e.g., "blue", 10), its type depends on the specific application scenario (string, numeric, boolean, etc.); : Type: set, the set of all difference results, containing all key-value pairs (k, v) that need to be updated.

[0031] Calculation logic steps: 1. Traverse the target node attributes: Extract all attribute keys of n2: ; 2. Difference condition detection: For each , check if one of the following conditions is true: New attribute: ; Modify attribute: ; 3. Collect difference results: If any condition is met, add the key-value pair to .

[0032] Examples: Input data: Old node n1: ; New node n2: ; Calculation process: 1. Extract attribute keys: ; 2. Detect item by item: :

[0033]

[0034] :

[0035] :

[0036]

[0037] 3、Output results: ;

[0038] The recursive tree traversal and difference detection algorithm is based on the depth-first search (DFS) and breadth-first search (BFS) strategies of the tree structure, and combines the fast search feature of the hash table to realize efficient processing of hierarchical data, wherein the hash table is a data structure that directly accesses according to the key value; In the style update of the layer tree, the algorithm locates the target node by recursively traversing the tree structure, that is, it first determines whether the current node is the target node, recursively processes the child node when it is not, applies the new attribute set when it is, calculates the attribute difference, and applies the difference detection to determine the style attributes that need to be updated.

[0039] Further, the hierarchical aggregation and style merging algorithm in step S2 specifically includes the following: S221: Construct a group structure and collect all element attributes; S222: Classify the element attribute types, wherein the classification of the element attribute types is divided into category type attributes and numerical value type attributes for processing; the mode strategy is applied to the category type attributes to select the most representative value; the average value strategy is applied to the numerical value type attributes to calculate the comprehensive trend; S223: Merge and aggregate the classified attributes, and finally apply them to the group structure.

[0040] The hierarchical aggregation and style merging algorithm is based on the principle of hierarchical clustering and attribute aggregation. First, the distribution characteristics of the sub-layer style attributes are intelligently analyzed, then all element attributes are collected, then the attribute types are classified, that is, classified into category type attributes and numerical value type attributes for processing, then the mode strategy is applied to the category type attributes to select the most representative value, the average value strategy is applied to the numerical value type attributes to calculate the comprehensive trend, then the merged and aggregated results are generated to generate a layer group style that can reflect the overall characteristics, and applied to the group structure. The hierarchical clustering is a tree-like nested hierarchical structure constructed to represent the relationship between samples in the data set, and the attribute aggregation principle refers to the aggregation of multiple objects together to form a larger object in object-oriented programming to realize more complex functions; The algorithm realizes hierarchical management and consistent expression of styles in the map layer tree, enabling users to efficiently control the visual presentation of multiple child layers by operating the parent node while maintaining the overall coordination of the styles.

[0041] 1、Basic definition Layer tree structure ;

[0042] N: All nodes (e.g., UI components, graphical elements), type set; E: , Parent-child hierarchical relationship edge (e.g., DOM tree structure), type relationship set; A: N→A, Node attribute set, , Type mapping function.

[0043] 2, Attribute classification (1) Numerical attribute

[0044] Examples: coordinates (x, y), size (width, height), opacity; Features: Arithmetic operations can be performed (such as addition, subtraction, interpolation).

[0045] (2) Category attribute

[0046] Examples: color name "red", font type "Arial"; Features: Discrete values, only support replacement or enumeration operations.

[0047] 3, Attribute update formula Updated attribute calculation ;

[0048] : Numerical attribute subset of node n ; : Category attribute subset of node n ; : Numerical update function (e.g., coordinate offset: ); : Category update function (e.g., color replacement: ); : Numerical update parameter (e.g., displacement Δx); : Category update parameter (e.g., new color value).

[0049] 4, Merge function (Merge) ;

[0050] R: Derived attribute generation function (e.g., calculate layout according to new size: ).

[0051] 5. Tree structure recursive update ;

[0052] : Parent-child property composition; Example: Transparency overlay: ; : Child node property aggregation; Example: Take the maximum width: .

[0053] 6. Calculation example Initial properties: ; Update operation: (1) Numerical value update: ; (2) Category type update: ; (3) Derivative property calculation: ; Merging results: ; Application scenarios of category type properties and numerical type properties: 1. Category type properties: (1) Determine the dominant color when switching UI themes in the system; (2) Establish the same specification for text style; (3) Perform consistency check on icon types in the system.

[0054] 2. Numerical type properties: (1) Calculate the average position of elements to achieve center alignment; (2) Determine the reference size for responsive layout in the system; (3) Calculate the intermediate frame in animation effects.

[0055] Algorithm explanation: 1. Mode strategy Calculation formula: ; S: , input category type data set (such as color list ["red", "blue", "red"]), type is set; V: Set of all unique values in S (de-duplicated result, such as {"red", "blue"}), type is set; : 1 when , otherwise 0 (used for counting), type is indicator function; argmax: Returns the value v that maximizes the sum (i.e., the element that appears most frequently), and is of type operator.

[0056] Calculation steps: Statistical frequency: for each unique value Calculate the number of times it appears in S: ; Return the mode: Select the v that has the largest count(v).

[0057] Multiple mode handling: If multiple values ​​have the same frequency, the first mode encountered is returned by default.

[0058] Example: enter: ; calculate: ; ; ; Output: ; 2. Mean Strategy Calculation formula: ; x i : a set of numerical values Input numeric data (such as a size list [10,20,30]); n: an integer, the total number of data points (e.g., n=3); For the summation operation, for all x i Summation (e.g., 10 + 20 + 30 = 60); : represents the arithmetic mean of real numbers (e.g.) ).

[0059] Weighted average extension If the data points have weights w i :

[0060] Weight example: In layout calculations, the width of a parent node may have a higher weight than that of a child node.

[0061] Calculation steps: Summation: Calculates the sum of all values. ; To find the average, divide by the number of data points, n. Empty set handling: If n=0, return NaN or throw an exception.

[0062] Example: Input: {10,20,30}; Compute:

[0063]

[0064] Output: .

[0065] Further, the incremental style update in step S3 and the local rendering algorithm specifically includes the following: S31: issue a style update request; S32: perform layer filtering; S33: perform update operation classification, wherein the update operation classification is divided into visibility update, style attribute update, and filter condition update; S34: manage the rendering queue for the classified results, and then perform batch rendering; S35: finally refresh the view.

[0066] The calculation formula of the incremental style update algorithm is specifically as follows: 1. The core formula is: ; : type is a key-value pair set, which is a new style set (such as {color: "blue", opacity: 0.8}); : type is a key-value pair set, which is an old style set; : type is a key-value pair set, which is a difference set that needs to be updated (only contains changed attributes).

[0067] 2. Recursive update rule: ; Merge: parent-child style merging function (such as transparency superposition: ); : child node style aggregation operation (such as taking the maximum value: ), wherein the current symbol is only applied to the current formula and has nothing to do with other formulas, and the meaning expressed is different.

[0068] Example: parent node opacity: 0.5, child node opacity: 0.8 → actual rendering transparency 0.5 x 0.8 = 0.4; 3. Incremental calculation optimization: ; Hash: fast hash function (such as MurmurHash), used to skip unchanged nodes.

[0069] The calculation formula of the local rendering algorithm is as follows: 1. Dirty rectangle calculation: ; B(n): the bounding box object, the bounding box of node n (such as {x: 10, y: 20, width: 100, height: 50}); DirtyNodes: a set, a set of nodes that have changed in style or position.

[0070] 2. Dirty rectangle merging: ; : the merging threshold (such as merging adjacent rectangles when the distance is < 5px).

[0071] 3. GPU composition layer identification: ; : the judgment condition (such as will-change: transform or 3D transform).

[0072] Incremental style update and local rendering algorithm are based on selective update and minimum rendering principle, which first sends a style update request, then filters the layers, then classifies the operation (i.e. visibility update, style attribute update and filter condition update), and only applies the update to the elements with changed layers and style attributes, avoiding unnecessary re-drawing of the entire map; This algorithm combines three core mechanisms: layer visibility control, style difference detection and rendering queue optimization, to achieve efficient real-time map style update. Specifically, incremental style update and local rendering algorithm need to work together with layer visibility control, style difference detection and rendering queue optimization to achieve efficient real-time map style update. First of all, layer visibility control is particularly important as the first barrier to optimize rendering performance. By recursively traversing the layer tree, layers with visible property set to false in the layer attribute are removed, which can greatly avoid unnecessary rendering of some layers. After the first step, we calculate the difference between the old and new style sets Sold and Snew for each visible layer L. Then we quickly locate the style attributes by looking up the corresponding hash table (such as 'fill-color': 'fill') to quickly render the styles that need to be updated. After the completion of the current two steps, we sort the layers that need to be updated according to priority and spatial position. The browser then performs style merging rendering according to the underlying operations of dirty rectangle merging and GPU composition layer, thereby reducing GPU calls and improving rendering performance.

[0073] The system triggers the local rendering mechanism of the map engine, only applies style update to the changed layer, avoids the performance overhead caused by full map redrawing, and realizes real-time visual feedback of style change through the strategy of incremental style update and rendering optimization algorithm, so that the user can immediately see the visual effect of style modification, and the interactive experience and operation efficiency are improved.

[0074] In conclusion, the application provides a visual style dynamic management method based on a map layer tree, which realizes intelligent processing and efficient rendering of layer styles through recursive tree traversal and difference detection algorithm, combined with incremental style update and local rendering technology, without manually adjusting the style attributes of a complex layer tree layer by layer, greatly improving the map editing efficiency, significantly reducing the development and maintenance cost of large-scale geographic information system, not only in the application development process of geographic information system, but also in the realization of the visual style dynamic management method based on the layer tree, enabling non-professional technical personnel to adjust the complex map layer style in real time through an intuitive interactive interface and immediately obtain visual feedback, thereby greatly improving the efficiency of thematic map production and user experience, solving the problems of scattered style management, update delay and low rendering efficiency of multiple types of layers (face, line, text, etc.), realizing centralized management and real-time update of different types of layer styles through unified layer tree structure and incremental rendering technology, reducing system resource consumption and improving map rendering performance.

[0075] The above is a further detailed description of the application in combination with specific preferred embodiments, and the specific implementation of the application cannot be limited to these descriptions. For ordinary skilled persons in the technical field to which the application belongs, some simple deductions or substitutions can be made without departing from the concept of the application, and all of them should be regarded as falling within the protection scope of the application.

Claims

1. A method for dynamic management of visualization styles based on a map layer tree, characterized in that: The method comprises the following steps: S1: constructing an initialization layer tree; S2: completing visual style editing and processing through a cooperative running recursive tree traversal and difference detection algorithm, and a hierarchical aggregation and style merging algorithm; S3: performing real-time rendering and previewing through an incremental style updating and local rendering algorithm.

2. The method for dynamic management of visualization styles based on map layer tree according to claim 1, characterized in that: The step S1 of constructing an initialization layer tree specifically comprises the following: S11: a front-end application obtains authorized layer data and map style configuration from a server; S12: the front-end application parses the same into a unified layer tree data structure; S13: the constructed layer tree is stored in a Redux state management, and then a global access layer tree component is provided.

3. The method for dynamic management of visualization styles based on map layer tree according to claim 1, characterized in that: The recursive tree traversal and difference detection algorithm in the step S2 specifically comprises the following: S211: a recursive traversal tree structure is established through a tree structure; S212: whether a current node is a target node is located through the recursive traversal tree structure; S213: when the step S212 locates that the current node is the target node, a new attribute set is applied, a difference detection algorithm is applied, and attribute difference / nΔ (Sold, Snew) is calculated; S214: only the changed attribute is updated, and then an updated tree structure is returned; S215: when the step S212 locates that the current node is not the target node, a child node is recursively processed, and then the above steps S212 and S213 are repeatedly performed.

4. The method for dynamic management of visualization styles based on map layer tree according to claim 3, characterized in that: The attribute difference calculation formula in the step S213 is: 。 5. The method for dynamic management of visualization styles based on map layer tree according to claim 1, characterized in that: The hierarchical aggregation and style merging algorithm in the step S2 specifically comprises the following: S221: a group structure is constructed, and all element attributes are collected; S222: element attribute types are classified; S223: the classified attributes are merged and aggregated, and finally applied to the group structure.

6. The method for dynamic management of visualization styles based on map layer tree according to claim 5, characterized in that: The step S222 of classifying element attribute types comprises processing a category type attribute and a numerical type attribute; The category type attribute is applied to a mode strategy, and the most representative value is selected; The numerical type attribute is applied to an average value strategy, and a comprehensive trend is calculated.

7. The method for dynamic management of visualization styles based on map layer tree according to claim 1, characterized in that: The incremental style updating and local rendering algorithm in the step S3 specifically comprises the following: S31: a style updating request is sent; S32: layer filtering is performed; S33: updating operation classification is performed; S34: a rendering queue of the classified result is managed, and then batch rendering is performed; S35: finally, a view is refreshed.

8. The method for dynamic management of visualization styles based on map layer tree according to claim 7, characterized in that: The updating operation classification in the step S33 comprises visibility updating, style attribute updating and filtering condition updating.

Images