Web dynamic plotting method and system based on CesiumJS and SVG

Abstract

The invention discloses a Web dynamic plotting method and a Web dynamic plotting system based on CesiumJS and SVG. According to the Web dynamic plotting method and the Web dynamic plotting system based on the CesiumJS and the SVG, dynamic plotting on a CesiumJS three-dimensional map engine is achieved through SVG vector plotting. The method comprises the following steps: S1, establishing a back-end development framework by adopting Egg.js based on NodeJS; s2, realizing SVG optimization and simplification functions through the svgo; s3, the functions of converting SVG to PNG picture and icon state drawing and background color drawing are achieved through gm; s4, the front end adopts a Vue.JS framework, a three-dimensional map scene is constructed through a CesiumJS engine, and the functions of icon plotting and parameter dynamic setting are achieved.

Description

Technical Field

[0001] The present invention relates to the technical field of geographic information systems, and in particular to a Web dynamic plotting method and system based on CesiumJS and SVG. Background Art

[0002] CesiumJS is an open-source JavaScript library for creating world-class 3D globe and map applications with optimal performance, accuracy, visual quality, and ease of use. CesiumJS is widely used to create interactive web applications for sharing dynamic geospatial data. CesiumJS uses WebGL for hardware-accelerated graphics and can run across platforms and browsers. However, because the CesiumJS engine focuses on data visualization, it does not provide a complete solution and plotting interface for map plotting and does not support SVG format icons. Therefore, a large amount of custom development work is required to implement the dynamic plotting function based on SVG icons.

[0003] SVG (Scalable Vector Graphics) is a language for describing two-dimensional graphics. When used as a stand-alone format or in combination with other XML, it uses XML syntax. SVG supports three types of graphic objects: vector graphic shapes (e.g., paths composed of lines and curves), images, and text. Graphic objects can be grouped, styled, transformed, and composited. However, because many SVG vector editors, or vector software like AI, export SVG files with a lot of other redundant information, such as editor source information and comments, resulting in large file sizes, they cannot be well applied in web applications without simplification and optimization.

[0004] Therefore, there is a need for a Web dynamic plotting framework that supports SVG format icons. Summary of the Invention

[0005] The purpose of the present invention is to provide a vector plotting technology development framework for Web-based three-dimensional geographic information system applications to meet the needs of dynamic plotting scenarios.

[0006] To meet the above purpose, the present invention provides a Web dynamic plotting method based on CesiumJS and SVG, including the following steps: Step 1: Build a back-end development framework based on Egg.js and use this development framework to construct the server side; Step 2: The server side obtains the SVG image input by the user and optimizes and simplifies the SVG image through the svgo tool; Step 3: Draw the icon status and background color through the gm plugin, so as to convert the SVG image into a PNG image; Step 4: Build the front-end page using the Vue.JS framework, introduce the Cesium engine in the Vue.JS framework, and build a 3D map through the CesiumJS engine; Step 5: The front-end page calls the server-side labeling service through the SVG symbol id, obtains the PNG image converted from the SVG corresponding to the id, and imports the PNG image into the built 3D map to complete the dynamic plotting of the icon.

[0007] Furthermore, the server side includes a model layer, a dao layer, a service layer, a controller layer, a middleware layer, a router layer, and a public static resource layer from bottom to top; among them, The model layer is used to implement MongoDB data access; The dao layer is used to implement PostGIS data access; The service layer is used to implement business logic by calling the interfaces of the model layer and the dao layer; The controller layer is the control layer, which is responsible for receiving and processing user requests, calling the service layer for business processing, and then returning the request result to the front-end page; The middleware layer is used to intercept user requests and perform permission authentication; The router layer is used to map the controller layer and provide a rest service interface externally; The public static resource layer is used to store the symbol PNG temporary files and provide them for Web-side access.

[0008] Furthermore, the plugins combined by svgo through the optimize method include: removeDoctype, removeXMLProcInst, removeComments, removeMetadata, removeEditorsNSData, cleanupIds, cleanupNumericValues, convertColors, removeViewBox, removeEmptyText, convertTransform, removeUnusedNS, sortDefsChildren, removeTitle, and removeDesc.

[0009] Furthermore, the specific steps of Step 3 include: Step 31: Read the optimized SVG file through the fs.readFileSync method to obtain the XML format content of the SVG; Step 32: Read the XML format content from the SVG file through the Buffer.from method, read it into the Buffer, and use the Buffer as a parameter to call the constructor of gm to instantiate gm; Step 33: Set the background color of the canvas according to the input parameters through the background method of gm, with the default being the transparent color; Step 34: Set the size of the drawing canvas according to the input parameters through the resize method of gm, including the width and height, with the default being 48x48; Step 35: Draw the status icons to be plotted on the canvas through the drawLine method of gm. The status icons include intact, damaged, and destroyed. The intact status icon is a square, the damaged icon is a diagonal line drawn from the lower left corner to the upper right corner on the intact status icon, and the destroyed icon is two intersecting diagonal lines drawn on the intact status icon; Step 36: Write the drawn SVG file stream to the output file through the write method of gm, and then output the SVG file as a PNG format file.

[0010] A Web dynamic plotting system based on CesiumJS and SVG, used to implement the Web dynamic plotting method based on CesiumJS and SVG. The system includes: a front-end WebGL module and a back-end Node.JS module; among them, The front-end WebGL module includes: A three-dimensional visualization sub-module, used to construct a three-dimensional visualization situation map using the CesiumJS three-dimensional engine; An SVG library sub-module, used to save the SVG images input by the user; An icon plotting sub-module, used to import the PNG images corresponding to the converted SVG images into the constructed three-dimensional visualization situation map using the Cesium JS plotting API interface; A Vue.JS sub-module, used to build the front-end page; A Cesium.JS sub-module, used to provide the icon plotting API interface; The back-end Node.JS module includes: A data service sub-module, used to call the PostgreSql database to store and manage icon data; A labeling service sub-module, used to provide a labeling service, enabling the front-end page to obtain the PNG images converted from the SVG with the corresponding id through the SVG symbol id; The SVG storage sub-module is used to support SVG conversion and import, convert SVG icon data into PNG image data, and submit the data to the data service module for storage in the database; The Egg.JS service sub-module is used to provide animation time calculation and support the synchronous update of three-dimensional situation data according to the clock.

[0011] Therefore, the present invention adopts the above-mentioned Web dynamic plotting method based on CesiumJS and SVG, and has the following beneficial effects: The present invention realizes the dynamic plotting function on the CesiumJS three-dimensional map engine through SVG vector icons, thereby providing a vector plotting technology development framework for Web-based three-dimensional geographic information system applications and meeting the requirements of dynamic plotting scenarios. The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Description of the Drawings

[0012] Figure 1 It is a schematic structural diagram of the system proposed by the present invention.

[0013] Figure 2 It is a flow chart of the method proposed by the present invention.

[0014] Figure 3 It is a flow chart of step 3 of the method proposed by the present invention.

[0015] Figure 4 It is the symbol state of the icon symbol plotted on the map.

[0016] Figures 5(a)-(c) are the operation process interfaces for SVG symbol import. Detailed Embodiments

[0017] In the description of the present invention, it should also be noted that unless otherwise clearly specified and limited, these embodiments are only used to illustrate the present invention and not 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 make various changes or modifications to the present invention, and these equivalent forms also fall within the scope defined by the appended claims of this application.

[0018] 1. Implementation Basis (1) NodeJS NodeJS is a platform built on the Chrome V8 engine runtime, which is used to easily build network applications with fast response speed and easy expansion. Using event-driven and non-blocking I / O models, it realizes lightweight and high efficiency, and is suitable for running data-intensive real-time applications on distributed devices.

[0019] (2) egg.js Egg.js, abbreviated as egg, is a backend web framework based on NodeJS. Egg.js is refined and encapsulated at the application level to make it closer to business scenarios and easier to get started.

[0020] (3)svgo Svgo is a command-line tool based on Node.js for compressing and optimizing SVG vector graphics. It provides a variety of plugins that can be combined as needed.

[0021] (4)gm Gm is an image processing plugin based on Node.js that encapsulates the image processing tools GraphicsMagick (GM) and ImageMagick (IM).

[0022] (5)Vue.js Vue.js is a progressive framework for building user interfaces. Vue adopts a bottom-up incremental development design. The core library of Vue only focuses on the view layer and is easy to learn and integrate with other libraries or existing projects. On the other hand, Vue can drive complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem.

[0023] 2. Web Dynamic Plotting Method Based on CesiumJS and SVG Based on the above modules, as Figure 2-3 shown, the present invention discloses a Web dynamic plotting method based on CesiumJS and SVG, including the following steps: Step 1: Use Egg.js based on NodeJS to build a backend development framework, and use this development framework to build a server-side. The server-side adopts a layered architecture, which includes, from bottom to top: model layer, dao layer, service layer, controller layer, middleware layer, router layer, and public static resource layer; Among them, The model layer is used to implement MongoDB data access; The dao layer is used to implement PostGIS data access; The service layer is used to implement business logic by calling the interfaces of the model layer and the dao layer; The controller layer is the control layer, which is responsible for receiving and processing user requests, calling the service layer for business processing, and then returning the request results to the front-end page; The middleware layer is used to intercept user requests and perform permission authentication; The router routing layer is used to map the controller layer and provide a REST service interface externally; The public static resource layer is used to store the symbolic PNG temporary files and provide them for access by the Web side; Step 2: Obtain the original icon SVG image to be plotted, and optimize and simplify the SVG image through the svgo tool; Svgo combines different plugins through the optimize method to achieve the best optimization and simplification effects of SVG graphics; When the present invention uses svgo for optimization, the plugins combined by calling the optimize method include: removeDoctype, removeXMLProcInst, removeComments, removeMetadata, removeEditorsNSData, cleanupIds, cleanupNumericValues, convertColors, removeViewBox, removeEmptyText, convertTransform, removeUnusedNS, sortDefsChildren, removeTitle, and removeDesc; Step 3: Perform icon state drawing and background color drawing through the gm plugin to convert the SVG file into a PNG image; Combined with Figure 3 , the specific steps of Step 3 include: Step 31: Read the optimized SVG file through the fs.readFileSync method to obtain the XML format content of the SVG file; Step 32: Read the XML format content read from the SVG through the Buffer.from method, read it into the Buffer, and use the Buffer as a parameter to call the constructor of gm to instantiate gm; Step 33: Set the background color of the canvas according to the input parameters through the background method of gm, and the default is the transparent color; Step 34: Set the size of the canvas according to the input parameters through the resize method of gm, including the width and height, and the default is 48x48; Step 35: Draw the status icons to be plotted on the canvas through the drawLine method of gm. The status icons include intact, damaged, and destroyed. The intact status icon is a square, the damaged icon is a diagonal line drawn from the lower left corner to the upper right corner on the intact status icon, and the destroyed icon is two intersecting diagonal lines drawn on the intact status icon; Step 36: Use the write method of gm to write the completed SVG file stream into the output file, and then output the SVG file as a PNG format file; Step 4: Build the front-end page using the Vue.JS framework, introduce the Cesium engine in the Vue.JS framework, and build a 3D map through the CesiumJS engine; Step 5: The front-end page calls the server labeling service through the SVG symbol id, obtains the PNG image after the SVG conversion corresponding to the id, and imports the PNG image into the built 3D map to complete the dynamic plotting of the icon.

[0024] Specifically, first, convert the SVG image to a PNG format image, then the front-end page calls the server labeling service through the SVG symbol id to obtain the PNG image after the SVG conversion corresponding to the id, and finally, call the Cesium JS plotting API interface to import the PNG image into the built 3D map.

[0025] Since the icon plotted on the 3D situation map is an object, and then through the Cesium JS object call interface, obtain the parameters of the icon, a parameter panel can be constructed, so as to realize the dynamic modification of the icon symbol parameters; the icon symbol parameters that can be dynamically set and plotted on the 3D map include background color, symbol color, symbol size, stroke color, stroke size, symbol status (available, basically available, and unavailable, such as Figure 4 ) After the parameters are modified, the icon on the map will change dynamically in a timely manner.

[0026] 3. Web Dynamic Plotting System Based on CesiumJS and SVG Combined Figure 1 It can be seen that the present invention provides a Web dynamic plotting system based on CesiumJS and SVG, which includes two parts: front-end WebGL and back-end Node.JS. Specifically, the modules of the front-end framework include: Three-dimensional visualization sub-module, used to build a three-dimensional visualization situation map using the CesiumJS three-dimensional engine; SVG library sub-module, used to save the SVG images input by users; Icon plotting sub-module, used to import the PNG image corresponding to the converted SVG image into the built three-dimensional visualization situation map using the Cesium JS plotting API interface; Vue.JS sub-module, used to build the front-end page; Cesium.JS sub-module, used to provide the icon plotting API interface; The modules of the back-end framework include: The data service sub-module is used to call the PostgreSql database to store and manage icon data; The label service sub-module is used to provide a label service, enabling the front-end page to obtain the PNG image converted from the SVG corresponding to the SVG symbol id through the SVG symbol id; The SVG storage sub-module is used to support SVG conversion and import, convert SVG icon data into PNG image data, and submit it to the data service module for storage in the database; The Egg.JS service sub-module is used to provide animation time calculation to support the clock-synchronized update of three-dimensional situation data. Embodiment

[0027] The interface of the system during operation is shown in Figure 5. Among them, Figures 5(a)-(c) are the operation process interfaces for importing the SVG symbol of a certain "Regimental Command Post 1.svg". Using the imported svg symbol "Regimental Command Post 1", conduct situation plotting. After the plotting is completed, modify the filling color and border color of "Regimental Command Post 1", and modify the size and color of the annotation of "Regimental Command Post 1". Plan the movement trajectory of "Regimental Command Post 1", and the icon will move along the specified route.

[0028] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them. Although the present invention has been described in detail with reference to the preferred embodiments, those of ordinary skill in the art should understand that they can still modify or equivalently replace the technical solutions of the present invention, and these modifications or equivalent replacements cannot make the modified technical solutions deviate from the spirit and scope of the technical solutions of the present invention.

Claims

1. A Web dynamic plotting method based on CesiumJS and SVG, characterized in that It includes the following steps: Step 1: Build a backend development framework based on Egg.js and use this development framework to construct the server side; Step 2: The server side obtains the SVG image input by the user and optimizes and simplifies the SVG image through the svgo tool; Step 3: Perform icon status drawing and background color drawing through the gm plugin, thereby converting the SVG image into a PNG image; Step 4: Build a front-end page using the Vue.JS framework, introduce the Cesium engine in the Vue.JS framework, and build a 3D map through the CesiumJS engine; Step 5: The front-end page calls the label service on the server side through the SVG symbol id, obtains the PNG image converted from the SVG corresponding to the id, and imports this PNG image into the built 3D map to complete the dynamic plotting of the icon.

2. The Web dynamic plotting method based on CesiumJS and SVG according to claim 1, characterized in that The server side includes a model layer, a dao layer, a service layer, a controller layer, a middleware layer, a router layer, and a public static resource layer from bottom to top; among them, The model layer is used to implement MongoDB data access; The dao layer is used to implement PostGIS data access; The service layer is used to implement business logic by calling the interfaces of the model layer and the dao layer; The controller layer is the control layer, responsible for receiving and processing user requests, calling the service layer for business processing, and then returning the request result to the front-end page; The middleware layer is used to intercept user requests and perform permission authentication; The router layer is used to map the controller layer and provide a rest service interface externally; The public static resource layer is used to store the symbol PNG temporary files and provide them for Web-side access.

3. The Web dynamic plotting method based on CesiumJS and SVG according to claim 2, characterized in that, The plugins combined by svgo through the optimize method include: removeDoctype, removeXMLProcInst, removeComments, removeMetadata, removeEditorsNSData, cleanupIds, cleanupNumericValues, convertColors, removeViewBox, removeEmptyText, convertTransform, removeUnusedNS, sortDefsChildren, removeTitle, and removeDesc.

4. The Web dynamic plotting method based on CesiumJS and SVG according to claim 1, characterized in that, The specific steps of Step 3 include: Step 31: Read the optimized SVG file through the fs.readFileSync method to obtain the XML format content of the SVG; Step 32: Read the XML format content from the SVG file through the Buffer.from method, read it into the Buffer, and use the Buffer as a parameter to call the constructor of gm to instantiate gm; Step 33: Set the background color of the canvas according to the input parameters through the background method of gm, and the default is transparent; Step 34: Set the size of the drawing canvas according to the input parameters through the resize method of gm, including width and height, and the default is 48x48; Step 35: Draw the status icons to be plotted on the canvas through the drawLine method of gm. The status icons include intact, damaged, and destroyed. The intact status icon is a square, the damaged icon is a diagonal line drawn from the lower left corner to the upper right corner on the intact status icon, and the destroyed icon is two intersecting diagonal lines drawn on the intact status icon; Step 36: Write the completed SVG file stream to the output file through the write method of gm, and then output the SVG file in PNG format.

5. A Web dynamic plotting system based on CesiumJS and SVG for implementing the method according to any one of claims 1-4, characterized in that, The system includes: a front-end WebGL module and a back-end Node.JS module; among them, The front-end WebGL module includes: A three-dimensional visualization sub-module for constructing a three-dimensional visualization situation map using the CesiumJS three-dimensional engine; An SVG library sub-module for saving the SVG pictures input by the user; An icon plotting sub-module for importing the PNG pictures corresponding to the converted SVG pictures into the constructed three-dimensional visualization situation map using the Cesium JS plotting API interface; A Vue.JS sub-module for building the front-end page; A Cesium.JS sub-module for providing the icon plotting API interface; The back-end Node.JS module includes: A data service sub-module for calling the PostgreSql database to store and manage icon data; A labeling service sub-module for providing a labeling service so that the front-end page can obtain the PNG pictures after SVG conversion corresponding to the id through the SVG symbol id; An SVG storage sub-module for supporting SVG conversion and import, converting SVG icon data into PNG picture data, and submitting it to the data service module for storage in the database; An Egg.JS service sub-module for providing animation time calculation to support the clock-synchronized update of three-dimensional situation data.

Images