A cesiumjs and svg-based web dynamic plotting method and system

Abstract

The application discloses a kind of Web dynamic plotting method and system based on CesiumJS and SVG, and the application realizes dynamic plotting on CesiumJS three-dimensional map engine by SVG vector icon.The method comprises the following steps: S1: using the Egg.js based on NodeJS to build backend development framework;S2: the function of SVG optimization, simplification is realized by svgo;S3: the function of SVG to PNG picture, icon state drawing and background color drawing is realized by gm;S4: front end uses Vue.JS framework, and three-dimensional map scene is built by CesiumJS engine, and the function of icon plotting, parameter dynamic setting is realized.

Description

Technical Field

[0001] This invention relates to the field of geographic information system technology, and in particular to a web dynamic plotting method and system based on CesiumJS and SVG. Background Technology

[0002] CesiumJS is an open-source JavaScript library for creating world-class 3D earth 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, enabling cross-platform and cross-browser operation. However, because the CesiumJS engine focuses on data visualization, it does not provide a complete solution or plotting interface for map plotting, nor does it support SVG icon format. Therefore, implementing dynamic plotting functionality based on SVG icons requires significant custom development work.

[0003] SVG (Scalable Vector Graphics) is a language for describing two-dimensional graphics. It uses XML syntax, either as a standalone format or when mixed with other XML formats. 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, and composited. However, because many SVG vector editors, or vector software like Illustrator, export SVG files with a lot of redundant information, such as editor source information and comments, the file size is large. Without simplification and optimization, these files cannot be well used in web applications.

[0004] Therefore, there is a need for a web-based dynamic icon drawing framework that can support SVG format icons. Summary of the Invention

[0005] The purpose of this invention is to provide a vector plotting technology development framework for Web-based 3D geographic information system applications, meeting the needs of dynamic plotting scenarios.

[0006] To achieve the above objectives, this invention provides a web dynamic plotting method based on CesiumJS and SVG, comprising the following steps:

[0007] Step 1: Build a backend development framework based on Egg.js, and use this framework to build the server-side.

[0008] Step 2: The server retrieves the SVG image input by the user and optimizes and simplifies the SVG image using the svgo tool;

[0009] Step 3: Use the GM plugin to draw the icon state and background color, thereby converting the SVG image into a PNG image;

[0010] Step 4: Build the front-end page using the Vue.JS framework, introduce the Cesium engine into the Vue.JS framework, and build a 3D map using the CesiumJS engine;

[0011] Step 5: The front-end page uses the SVG symbol ID to call the server-side label service to obtain the PNG image converted from the SVG, and imports the PNG image into the constructed 3D map to complete the dynamic drawing of the icon.

[0012] Furthermore, the server-side includes a bottom-up model layer, a DAO layer, a service layer, a controller layer, a middleware layer, a router layer, and a public static resource layer; wherein,

[0013] The model layer is used to implement MongoDB data access;

[0014] The DAO layer is used to implement PostGIS data access;

[0015] The service layer is used to implement business logic by calling the interfaces of the model layer and the dao layer.

[0016] The controller layer 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.

[0017] The middleware layer is used to intercept user requests and perform authorization authentication.

[0018] The router layer is used to map the controller layer and provide REST service interfaces to the outside world.

[0019] The public static resource layer is used to store temporary PNG symbol files and make them accessible to the web client.

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

[0021] Furthermore, step 3 includes the following specific steps:

[0022] Step 31: Read the optimized SVG file using the fs.readFileSync method to obtain the XML format content of the SVG;

[0023] Step 32: Read the XML format content from the SVG file using the Buffer.from method, read it into the Buffer, and call the gm constructor with the Buffer as the parameter to instantiate gm;

[0024] Step 33: Set the background color of the canvas according to the input parameters using the background method of gm. The default color is transparent.

[0025] Step 34: Use the `gm`'s `resize` method to set the canvas size based on the input parameters, including width and height, with a default value of 48x48.

[0026] Step 35: Use the drawLine method of gm to draw the status icon to be marked on the canvas. The status icon includes three types: 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.

[0027] Step 36: Write the completed SVG file stream to the output file using the write method of gm, and then output the SVG file as a PNG file.

[0028] A web dynamic plotting system based on CesiumJS and SVG is provided to implement a web dynamic plotting method based on CesiumJS and SVG. The system includes a front-end WebGL module and a back-end Node.js module; wherein...

[0029] The front-end WebGL module includes:

[0030] The 3D visualization submodule is used to build 3D visualization situation maps using the CesiumJS 3D engine.

[0031] The SVG library submodule is used to store SVG images input by the user.

[0032] The icon plotting submodule is used to import the corresponding PNG image after converting the SVG image into the constructed 3D visualization situation map using the Cesium JS plotting API interface;

[0033] Vue.JS submodules are used to build front-end pages;

[0034] The Cesium.JS submodule is used to provide an icon drawing API interface;

[0035] The backend Node.js modules include:

[0036] The data service submodule is used to call the PostgreSQL database to store and manage icon data;

[0037] The labeling service submodule is used to provide labeling services, enabling the front-end page to obtain the PNG image converted from the SVG symbol ID.

[0038] The SVG import submodule is used to support SVG conversion and import, converting SVG icon data into PNG image data and submitting it to the data service module for storage in the database;

[0039] The Egg.JS service submodule is used to provide animation time calculation and support the synchronous updating of 3D situation data according to the clock.

[0040] Therefore, the present invention employs the above-mentioned web dynamic plotting method based on CesiumJS and SVG, which has the following beneficial effects:

[0041] This invention implements dynamic plotting functionality on the CesiumJS 3D map engine using SVG vector icons, thereby providing a vector plotting technology development framework for Web-based 3D geographic information system applications and meeting the needs of dynamic plotting scenarios.

[0042] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Attached Figure Description

[0043] Figure 1 This is a schematic diagram of the system proposed in this invention.

[0044] Figure 2 This is a flowchart of the method proposed in this invention.

[0045] Figure 3 This is a flowchart of step 3 of the method proposed in this invention.

[0046] Figure 4 The symbol status of the icon symbol plotted on the map.

[0047] Figures 5(a)-(c) show the interface for importing SVG symbols. Detailed Implementation

[0048] In the description of this invention, it should also be noted that, unless otherwise expressly specified and limited, these embodiments are for illustrative purposes only and are not intended to limit the scope of the invention. Furthermore, it should be understood that after reading the teachings of this invention, those skilled in the art can make various alterations or modifications to the invention, and these equivalent forms also fall within the scope defined by the appended claims.

[0049] 1. Implement the basics

[0050] (1) NodeJS

[0051] NodeJS is a platform built on the Chrome V8 engine runtime, designed for easily building fast and scalable web applications. Using an event-driven approach and a non-blocking I / O model, it achieves lightweight and high efficiency, making it suitable for running data-intensive real-time applications on distributed devices.

[0052] (2) egg.js

[0053] egg.js, or egg for short, is a backend web framework based on NodeJS. egg.js is refined and encapsulated at the application level, making it closer to business scenarios and easier to learn.

[0054] (3) svgo

[0055] svgo is a Node.js-based command-line tool for compressing and optimizing SVG vector graphics. It offers a variety of plugins that can be combined as needed.

[0056] (4) gm

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

[0058] (5) Vue.js

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

[0060] 2. Web dynamic plotting method based on CesiumJS and SVG

[0061] Based on the above modules, such as Figure 2-3 As shown, this invention discloses a web dynamic plotting method based on CesiumJS and SVG, including the following steps:

[0062] Step 1: Build a backend development framework using Egg.js based on NodeJS. Use this framework to build the server-side. The server-side adopts a layered architecture, which includes the following layers from bottom to top: model layer, dao layer, service layer, controller layer, middleware layer, router layer, and public static resource layer.

[0063] in,

[0064] The model layer is used to implement MongoDB data access;

[0065] The DAO layer is used to implement PostGIS data access;

[0066] The service layer is used to implement business logic by calling the interfaces of the model layer and the dao layer.

[0067] The controller layer 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.

[0068] The middleware layer is used to intercept user requests and perform authorization authentication.

[0069] The router layer is used to map the controller layer and provide REST service interfaces to the outside world.

[0070] The public static resource layer is used to store temporary PNG symbol files and make them accessible to the web client.

[0071] Step 2: Obtain the original icon SVG image to be plotted, and optimize and simplify the SVG image using the svgo tool;

[0072] svgo combines different plugins through the optimize method to achieve the best optimization and simplification effect for SVG graphics;

[0073] When this invention utilizes SVGO for optimization, the plugins combined by calling the `optimize` method include:

[0074] removeDoctype, removeXMLProcInst, removeComments, removeMetadata, removeEditorsNSData, cleanupIds, cleanupNumericValues, convertColors, removeViewBox, removeEmptyText, convertTransform, removeUnusedNS, sortDefsChildren, removeTitle and removeDesc;

[0075] Step 3: Use the GM plugin to draw the icon state and background color, thereby converting the SVG file into a PNG image;

[0076] Combination Figure 3 Step 3 includes the following specific steps:

[0077] Step 31: Read the optimized SVG file using the fs.readFileSync method to obtain the XML format content of the SVG file;

[0078] Step 32: Use the Buffer.from method to read the XML format content from the SVG into a Buffer, and then use the Buffer as a parameter to call the constructor of gm to instantiate gm;

[0079] Step 33: Set the background color of the canvas according to the input parameters using the background method of gm. The default color is transparent.

[0080] Step 34: Set the canvas size, including width and height, according to the input parameters using the gm's resize method. The default value is 48x48.

[0081] Step 35: Draw the status icons to be marked on the canvas using the drawLine method of gm. The status icons include three types: 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.

[0082] Step 36: Write the completed SVG file stream to the output file using the write method of gm, and then output the SVG file as a PNG file;

[0083] Step 4: Build the front-end page using the Vue.JS framework, introduce the Cesium engine into the Vue.JS framework, and build a 3D map using the CesiumJS engine;

[0084] Step 5: The front-end page uses the SVG symbol ID to call the server-side label service to obtain the PNG image converted from the SVG, and imports the PNG image into the constructed 3D map to complete the dynamic drawing of the icon.

[0085] Specifically, first, the SVG image is converted into a PNG image. Then, the front-end page calls the server-side labeling service using the SVG symbol ID to obtain the PNG image converted from the SVG with the corresponding ID. Finally, the Cesium JS plotting API interface is called to import the PNG image into the constructed 3D map.

[0086] Since the icon plotted on the 3D situation map is an object, and the parameters of the icon are obtained by calling the interface through the Cesium JS object, a parameter panel can be constructed, thereby realizing the dynamic modification of the icon's symbol parameters. The dynamically configurable icon symbol parameters plotted on the 3D map include background color, symbol color, symbol size, stroke color, stroke size, and symbol status (available, mostly available, and unavailable, e.g., ...). Figure 4 After the parameters are modified, the icons on the map will change dynamically accordingly.

[0087] 3. A Web-based dynamic plotting system based on CesiumJS and SVG

[0088] Combination Figure 1 As can be seen, this invention provides a web dynamic plotting system based on CesiumJS and SVG, which includes two parts: a front-end WebGL and a back-end Node.js. Specifically, the front-end framework modules include:

[0089] The 3D visualization submodule is used to build 3D visualization situation maps using the CesiumJS 3D engine.

[0090] The SVG library submodule is used to store SVG images input by the user.

[0091] The icon plotting submodule is used to import the corresponding PNG image after converting the SVG image into the constructed 3D visualization situation map using the Cesium JS plotting API interface;

[0092] Vue.JS submodules are used to build front-end pages;

[0093] The Cesium.JS submodule is used to provide an icon drawing API interface;

[0094] The backend framework modules include:

[0095] The data service submodule is used to call the PostgreSQL database to store and manage icon data;

[0096] The labeling service submodule is used to provide labeling services, enabling the front-end page to obtain the PNG image converted from the SVG symbol ID.

[0097] The SVG import submodule is used to support SVG conversion and import, converting SVG icon data into PNG image data and submitting it to the data service module for storage in the database;

[0098] The Egg.JS service submodule is used to provide animation time calculation and support the synchronous updating of 3D situation data according to the clock. Example

[0099] The interface of this system during operation is shown in Figure 5. Figures 5(a)-(c) show the interface for importing the SVG symbol "Regiment Command Post 1.svg". Using the imported SVG symbol "Regiment Command Post 1", situational mapping is performed. After mapping, the fill color and border color of "Regiment Command Post 1" are modified, as are the size and color of the annotations. The movement trajectory of "Regiment Command Post 1" is planned, and the icon will move along the specified route.

[0100] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and not to limit them. Although the present invention has been described in detail with reference to preferred embodiments, those skilled in the art should understand that modifications or equivalent substitutions can still be made to the technical solutions of the present invention, and these modifications or equivalent substitutions cannot cause the modified technical solutions to deviate from the spirit and scope of the technical solutions of the present invention.

Claims

1. A method of web dynamic plotting based on CesiumJS and SVG, characterized in that, The method comprises the following steps: Step 1: build a backend development framework based on Egg.js, and use the development framework to build a server side; Step 2: the server side obtains the SVG picture input by a user, and optimizes and simplifies the SVG picture through an svgo tool; Step 3: icon state drawing and background color drawing are performed through a gm plug-in, so as to convert the SVG picture into a PNG picture; Step 4: a front-end page is built by using a Vue.JS framework, a Cesium engine is introduced into the Vue.JS framework, and a three-dimensional map is built through the CesiumJS engine; Step 5: the front-end page calls a service side mark service through an SVG symbol id, obtains a converted PNG picture corresponding to the id, imports the PNG picture into the built three-dimensional map, and completes dynamic marking of the icon; The specific steps of step 3 comprise: Step 31: an optimized SVG file is read through a fs.readFileSync method to obtain SVG XML format content; Step 32: the XML format content is read from the SVG file through a Buffer.from method, and the content is read into a Buffer, and the Buffer is used as a parameter to call a gm constructor function to instantiate the gm; Step 33: a background color of a canvas is set according to input parameters through a gm background method, and the default background color is transparent; Step 34: the size of the canvas is set according to input parameters through a gm resize method, and the size comprises a width and a height, and the default size is 48x48; Step 35: a state icon to be marked by an icon is drawn on the canvas through a gm drawLine method, and the state icon comprises three icons, namely, an intact icon, a damage icon and a destroyed icon, the intact icon is a square, the damage icon is a diagonal line drawn from a lower left corner to an upper right corner on the intact icon, and the destroyed icon is two intersecting diagonal lines drawn on the intact icon; Step 36: a gm write method is used to write a completed SVG file stream into an output file, and the SVG file is output in a PNG format.

2. The CesiumJS and SVG-based web dynamic plotting method of claim 1, wherein, The server side comprises a bottom-up model layer, a dao layer, a service layer, a controller layer, a middleware layer, a router layer and a public static resource layer; wherein, The model layer is used to realize MongoDB data access; The dao layer is used to realize PostGIS data access; The service layer is used to realize business logic by calling interfaces of the model layer and the dao layer; The controller layer is a control layer, and is used to receive and process user requests, call the service layer to perform business processing, and then return a 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 to the outside; A public static resource layer is configured to store and provide symbol PNG temporary files to a web end for access.

3. The CesiumJS and SVG-based web dynamic plotting method of claim 2, wherein, The plugins combined by the optimize method of svgo include: removeDoctype, removeXMLProcInst, removeComments, removeMetadata, removeEditorsNSData, cleanupIds, cleanupNumericValues, convertColors, removeViewBox, removeEmptyText, convertTransform, removeUnusedNS, sortDefsChildren, removeTitle, and removeDesc.

4. A CesiumJS and SVG based web dynamic plotting system for implementing the method of any one of claims 1-3, characterized in that, The system comprises a front-end WebGL module and a back-end Node.JS module, wherein the front-end WebGL module comprises: The front-end WebGL module comprises: A three-dimensional visualization submodule is configured to construct a three-dimensional visualization situation map by using a CesiumJS three-dimensional engine. An SVG library submodule is configured to save an SVG picture input by a user. An icon plotting submodule is configured to convert an SVG picture into a PNG picture corresponding to the SVG picture, and import the PNG picture into the constructed three-dimensional visualization situation map by using a CesiumJS plotting API interface. A Vue.JS submodule is configured to build a front-end page. A Cesium.JS submodule is configured to provide an icon plotting API interface. The back-end Node.JS module comprises: A data service submodule is configured to call a PostgreSql database to store and manage icon data. A label service submodule is configured to provide label services, so that the front-end page acquires a PNG picture converted from an SVG picture corresponding to an id of the SVG picture by using the id. An SVG import submodule is configured to support SVG conversion and import, convert SVG icon data into PNG picture data, and submit the data to the data service module for storage in a database. An Egg.JS service submodule is configured to provide animation time calculation, and support three-dimensional situation data to be updated according to a clock.

Images