Method for realizing immersive dynamic data panel display based on Cesium

Abstract

The invention relates to a method for realizing immersive dynamic data panel display based on Cesium, which comprises the following steps of: S1, manufacturing an SVG (Scalable Vector Graphics), namely designing and manufacturing a service panel effect; s2, defining a template, namely marking SVG file definition placeholders; s3, converting a picture, and converting the picture according to the template and the data; and S4, generating a panel, and forming a panel access system. According to the method, the manufacturing efficiency of the dynamic data panel is greatly improved, the display effect based on a Cesium platform is improved, and finally a new technical route for realizing immersive dynamic data panel display based on Cesium is formed.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a method for realizing immersive dynamic data panel display based on Cesium. Background Art

[0002] As the core component of the visualization system, the data panel provides a vivid, intuitive and easy-to-understand interface display for system users and decision makers. At present, there are three methods for making data panels for displaying user business data in the three-dimensional visualization system based on Cesium: 1) using HTML DIV elements for display; 2) using Cesium Billboard (billboard) objects for display; 3) using Cesium Label (text tag) objects for display. The third method only displays text, which has a poor effect and is basically not used in projects. Therefore, the first two methods are mainly used for data display. Generally, when the business data items have many display effect elements and are very rich, DIV elements are used for display, that is, the first method; when the picture is simple or there are few data items, canvas or svg is often used to draw the picture first and then set it to the billboard object in Cesium for display, that is, the second method. The above methods all use traditional technical methods, which are not enough to meet the visualization needs of the current GIS visualization system for data display diversity.

[0003] Another thing to explain is that SVG is a file format, which is the abbreviation of scalable vector graphics file, a standard graphic file type, and files in this format use an XML-based text format to describe how the image is displayed. It can be scaled to different sizes without losing quality, and the format is independent of resolution and is generally used to render two-dimensional images on the Internet.

[0004] At present, with the development of concepts such as data cockpits, digital twins, and metaverses, immersive and dynamic data panel displays are of vital importance to improving user experience and system performance. However, immersive display is not possible with traditional technical means. The development of data panels with complex effects faces huge workloads and technical challenges, and the subsequent maintenance costs are high. Especially when dealing with a large number of panel displays, problems such as page freezes and slow responses will occur, which seriously affect the user experience. Therefore, it is urgent to introduce innovative technologies and methods to optimize the development and display of data panels to improve the overall performance and user satisfaction of GIS visualization systems.

[0005] However, in the actual project construction process, it was found that the data panel developed based on the Cesium platform has the following shortcomings: 1) The more data the panel content is, the more complex it is. Once the business changes during the later stage of the project maintenance, the program needs to be rewritten, which makes maintenance difficult; 2) Conventional panel production methods mostly use data conversion Figure 1 One-time development technology, if you want to achieve real-time update of the panel, increase or decrease of business data items, you need to replace the picture, resulting in poor performance; 3) Traditional panels set various special effects, such as special fonts, glow, gradient colors, etc. It is difficult to achieve effects. Even if the relevant effects are achieved, the development difficulty and cost are very high.

[0006] Therefore, it is necessary to provide a method for realizing immersive dynamic data panel display based on Cesium to solve the above technical problems. Summary of the invention

[0007] The purpose of the present invention is to solve the deficiencies of the prior art and provide a method for realizing immersive dynamic data panel display based on Cesium. The method is divided into two stages (creation of prefabricated SVG templates and dynamic parsing of SVG files) and four steps (making SVG, defining templates, converting pictures, and generating panels). At the same time, in the production process, two self-developed program methods (Program 1: SVG conversion method; Program 2: immersive panel class) are needed to assist and improve the efficiency of panel production.

[0008] A method for realizing immersive dynamic data panel display based on Cesium of the present invention comprises the following steps:

[0009] S1. Create SVG and design business panel effects, including the following layer designs:

[0010] A. Background bitmap element layer: based on The style creates a background bitmap element layer. The added image is in base64 string format. The background bitmap height and width are set. At the same time, multiple background layers can be created according to business design requirements.

[0011] B. Business data text layer: Add data text items according to the multi-row or multi-column effects displayed by business data, and finally modify them accordingly with the program object values ​​to form placeholder data attributes "${name1}, ${name2}", and set styles for text items and reference predefined special effects;

[0012] C. Predefined layer: Based on the above B "reference predefined special effects" function, set the "predefined layer" to predefine different special effect elements including special fonts, glow, gradient colors and other effects;

[0013] S2. Define the template and mark the SVG file to define the placeholder;

[0014] S3. Convert the image to generate an image based on the template and data conversion;

[0015] S4. Generate a panel to form a panel access system.

[0016] Preferably, S1 needs to be designed through background layer bitmap elements, and designed and drawn using SVG editing tools to export SVG files.

[0017] Preferably, in S2, data that needs to be dynamically updated needs to be determined, modified accordingly to the program object value, and placeholder data attributes are formed to form a prefabricated template.

[0018] Preferably, when converting and generating images in S3, business dynamic data needs to be obtained, parsed through a template, and the SVG image is updated on the panel using an SVG conversion method according to different placeholder data attributes.

[0019] Preferably, when S4 generates a panel, it is necessary to add a panel process based on the Cesium system, create an image through SVG, use the immersive panel class to generate a Primitive panel object, add the panel to the model, and realize the immersive dynamic data panel display.

[0020] Compared with the related art, the present invention has the following beneficial effects:

[0021] (1) The present invention utilizes the SVG template production method to set more special effects, achieve more display effects and more complex interface design, and compared with conventional panel development, not only reduces the development workload, but also reduces the development difficulty;

[0022] (2) The present invention can easily adjust the panel in real time, change the interface design, and increase or decrease business data items without rewriting the code. This feature not only simplifies the workflow, but also greatly improves efficiency and facilitates subsequent maintenance, thus achieving true flexibility and convenience.

[0023] (3) The present invention innovatively combines the concept of "immersive embedding" and uses an immersive method to display real-time dynamic display and real-time image update, abandoning the traditional panel display form, meeting the new generation of visual display effects; BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 is a flow chart of the method of the present invention;

[0025] Figure 2 This is the SVG template structure diagram of the present invention. DETAILED DESCRIPTION

[0026] The following is a detailed description of the implementation scheme of the present invention in conjunction with the accompanying drawings. It should be emphasized that the embodiments of the present invention are illustrative rather than restrictive. Therefore, the present invention is not limited to the embodiments in the specific implementation scheme. Any other implementation schemes derived by those skilled in the art based on the technical solution of the present invention also fall within the scope of protection of the present invention.

[0027] The present invention discloses a method for realizing immersive dynamic data panel display based on Cesium. First, in the "prefabricated SVG template" stage, an SVG editing tool is used in combination with a UI basic image to draw, and an SVG file is generated as the initial template; the data items that need to be updated in real time and dynamically are clearly defined, and are marked in the SVG file through placeholders to construct a customizable SVG template. Then, in the "parse SVG file" stage, with the help of the independently developed immersive panel class and svg conversion method, real-time business data is automatically captured, and the SVG content is dynamically updated according to the placeholders in the template; by creating an immersive panel object and loading the updated image, the dynamic parsing and presentation of the SVG file are completed. The design and technical route for the above process are intended to improve the production efficiency and visual experience of the immersive dynamic data panel based on Cesium, and ensure the immediacy and interactivity of the data.

[0028] The main process of the present invention includes: in the stage of creating a prefabricated SVG template, step 1 is to make SVG, and step 2 is to define the template. In the stage of parsing the SVG file, step 3 is to convert the image, and step 4 is to generate the panel. The main innovation is to add panels through the Cesium engine in the "parsing SVG file" stage to solve technical problems such as rectangular coordinates; generate Primitive panel objects; and add the panel to the three-dimensional scene. Finally, by dynamically updating the panel link, the dynamic refresh display of the program parameter configuration file is realized, which improves the efficiency of dynamic data panel production and program configuration from the technical process. The process of the present invention is as follows: Phase 1: Prefabricated SVG template

[0029] S1. Create SVG. Design and create business panel effects;

[0030] S2. Define the template. Mark the SVG file to define the placeholder;

[0031] Phase 2: Parsing the SVG file

[0032] S3. Transform the image. Generate an image using template + data;

[0033] S4. Generate panels. Form a panel access system;

[0034] The above steps are the main process descriptions, and the process technologies involved are specifically:

[0035] S1 creates SVG based on the business panel effect design. Design through background layer bitmap elements, use SVG editing tools to design and draw, and export SVG files;

[0036] S2 defines the template by defining the placeholders in the marked SVG file. Determine the data that needs to be dynamically updated, modify it accordingly with the program object value, form the placeholder data attributes, and form a prefabricated template;

[0037] Based on the above steps S1 to S2, the creation of the SVG template has been completed and a prefabricated template has been formed.

[0038] At the same time, the SVG file is parsed and produced based on the prefabricated template completed above. Before this stage begins, it is necessary to complete the self-developed general program method setting, which is also the innovation point of the present invention, namely the SVG conversion method and the immersive panel class.

[0039] S3 combines templates and data to transform into images. Obtain business dynamic data, parse it through templates, and use SVG conversion methods to update the SVG image panel according to different placeholder data attributes;

[0040] S4 forms a panel access system. Based on the Cesium system, add panel processes, create images through SVG, use immersive panel classes to generate primitive panel objects, add panels to the model, and realize immersive dynamic data panel display.

[0041] Based on the above steps S3 to S4, the parsing of the SVG file has been completed.

[0042] The core steps of the invention in the above steps S3 to S4 are explained in combination with the self-developed general program method, namely the SVG conversion method and the optimization innovation of the immersive panel class. The technical details of the general program method are as follows:

[0043] 1. Develop a new immersive panel class based on the Cesium.Primitive object rendering mechanism in Cesium: Cesium.SvgPlanePrimitive

[0044] The parameters that need to be input to the constructor of the Cesium.SvgPlanePrimitive class include: the position parameter is used to set the geographical location of the panel, the id parameter is used to set the uniqueness to facilitate the extension of later click and pick, the width parameter is used to set the panel width, the height parameter is used to set the panel height, and the image parameter is used to set the content displayed on the panel. The implementation of this class is mainly to create a global variable planePrimitive internally. The implementation of this object is that Cesium.Primitive sets the shape of Cesium.PlaneGeometry and the style of Cesium.MaterialAppearance. The core method of the Cesium.SvgPlanePrimitive class is the update method. When calling update, the system needs to obtain the direction of the camera in real time in order to update the direction of planePrimitive. In Cesium, the posture of Primitive requires three parameters: heading, pitch, and roll. In this object, heading is the opposite direction of the camera, pitch is always 90 degrees, and roll is 0 degrees. The final effect of setting in this way is that the panel is standing on the earth, and the panel always faces the camera no matter how the camera moves. This class contains a core attribute, which is the image attribute. Users can set the image repeatedly, and the panel will display the content of the image in a timely manner, thus achieving the effect of dynamic change.

[0045] 2. Generic SVG conversion program generateSVG2Image method

[0046] The input parameters of the generateSVG2Image method are string-type SVG template text and business data json object. The program implementation content is to use regular expressions to replace the placeholders in the SVG template text for each attribute in the business data json object. When all replacements are completed, a real SVG file is generated. Because the Cesium mechanism requires the use of base64 strings to receive images and provide them to the immersive panel program, the program is used to parse the SVG into a base64 image string and finally return the string.

[0047] By completing the four steps of creating SVG + defining templates + converting images + generating panels, the efficiency of dynamic data panel production and the display effect based on the Cesium platform have been greatly improved, ultimately forming a new technical route for immersive dynamic data panel display based on Cesium.

[0048] In order to more clearly illustrate the specific implementation of the invention, an embodiment is provided below:

[0049] like Figure 1 As shown in the figure, an overall process method for realizing immersive dynamic data panel display based on Cesium is mainly divided into two stages: "pre-making SVG template" and "parsing SVG file", which includes four production steps: making SVG + defining template + converting pictures + generating panels, and each production step contains unique technical methods.

[0050] The specific process principles involved are as follows:

[0051] (1) Create SVG. Create background layer bitmap elements based on the interface design effect, use SVG editing tools to design and draw, complete the pre-made SVG panel, and export the SVG file. The SVG template structure involved is as follows: Figure 2 As shown:

[0052] A. Background bitmap element layer: based on Style, create a background bitmap element layer, add the image in base64 string format, set the background bitmap height and width. At the same time, you can also create multiple background layers according to business design requirements;

[0053] B. Business data text layer: Add data text items according to the multi-row or multi-column effects displayed by business data, and finally modify them accordingly with the program object values ​​to form placeholder data attributes "${name1}, ${name2}", etc. You can also set styles for text items and reference predefined special effects, etc.

[0054] C. Predefined layers: Based on the "reference predefined special effects" function in step B above, set up "predefined layers" to predefine settings for different special effect elements, such as special fonts, glow, gradient colors and other effects.

[0055] (2) Define the template. Determine the data that needs to be dynamically updated, modify it accordingly with the program object value, define the corresponding placeholder (as described in the business data text layer B above), and form a prefabricated template;

[0056] (3) Convert the image. Obtain business dynamic data, parse it through the template, and use the general SVG conversion program generateSVG2Image method to update the SVG image panel according to different placeholder data attributes;

[0057] (4) Generate a panel. Based on the Cesium system, add a panel process, create an image through SVG, use the immersive panel class to generate a Cesium.SvgPlanePrimitive panel object, add the panel to the model, and realize the immersive dynamic data panel display.

[0058] The above are only embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A method for realizing immersive dynamic data panel display based on Cesium, characterized in that: The following steps are involved: S1. Create SVG and design business panel effects, including the following layer designs: A. Background bitmap element layer: based on The style creates a background bitmap element layer. The added image is in base64 string format. The background bitmap height and width are set. At the same time, multiple background layers can be created according to business design requirements. B. Business data text layer: Add data text items according to the multi-row or multi-column effect of business data display, and finally modify them accordingly with the program object value to form placeholder data attributes "${name1}, ${name2}", and set styles for text items and reference predefined special effects; C. Predefined layer: Based on the above B "reference predefined special effects" function, set "predefined layer" to predefine different special effect elements including special fonts, glow, gradient colors and other effects; S2. Define the template and mark the SVG file to define the placeholder; S3. Convert the image to generate an image based on the template and data conversion; S4. Generate a panel to form a panel access system.

2. According to a method for realizing immersive dynamic data panel display based on Cesium according to claim 1, it is characterized in that: In the above-mentioned S1, it is necessary to design the background layer bitmap element, and use the SVG editing tool to design and draw, and export the SVG file.

3. According to a method for realizing immersive dynamic data panel display based on Cesium according to claim 1, it is characterized in that: In the S2, the data that needs to be dynamically updated needs to be determined, and modified accordingly with the program object value to form placeholder data attributes and form a prefabricated template.

4. According to a method for realizing immersive dynamic data panel display based on Cesium according to claim 1, it is characterized in that: When converting and generating images in S3, it is necessary to obtain business dynamic data, parse it through the template, and update the SVG image panel using the SVG conversion method according to different placeholder data attributes.

5. According to a method for realizing immersive dynamic data panel display based on Cesium according to claim 1, it is characterized in that: When S4 generates a panel, it is necessary to add a panel process based on the Cesium system, create a picture through SVG, use the immersive panel class to generate a Primitive panel object, add the panel to the model, and realize the immersive dynamic data panel display.

Images