Natural gas tracking and supervision system information update

When initializing the system, the browser loads the Tiantu image map and necessary toolbars. At this time, no warehouse is displayed on the map. Click the "Warehouse" drop-down button in the toolbar in the upper right corner of the interface to pop up the "Warehouse" drop-down list. Select the "Edit Warehouse" option to pop up the "Edit Warehouse" dialog box. In this dialog Select the tool to edit the warehouse in the box, and you can add, edit, delete and other operations on the warehouse according to your needs, as shown in the figure.

Figure "Edit Warehouse" dialog box

① Add a new warehouse,

The key process of implementation has the following three steps.

The first step is to add a new column in the "Edit Warehouse" dialog box.

, select a warehouse geometry, draw a vector warehouse on the map, reference the leaflet.draw.js plug-in when drawing the geometry (the plug-in download address is https://github.com/Leaflet/Leaflet.draw), and draw the geometry And activate it. You can draw the required geometric figures with the mouse at any position on the map. The code is as follows: Code
description: Create and draw vector elements. According to the geometric figures, they can be divided into polygons, rectangles, and circles. After creation, use the enabled() function Activate it to draw polygonal vector features on the map. Create a vector feature layer group and add it to the map, register a drawing completion event, when the polygon drawing is completed, trigger the drawing completion event, add the drawn vector feature layer to the vector feature layer group, and draw the completed vector The features are now displayed on the map.

After the drawing is completed, the "Add Warehouse" dialog box will pop up, as shown in the figure. Fill in the basic information of the warehouse, such as warehouse name, warehouse person in charge, number of floors, etc., and then click the "Confirm" button.

Figure "Add Warehouse" dialog box

The second step is to submit the jQuery serialization form for the new warehouse.

, call the warehouse's new interface AddWareHouse, and send the basic warehouse information and warehouse geometry information to the backend server through GET requests and POST requests in Ajax. The code is as follows: Code description: This application frequently uses Ajax requests in jQuery to add
, Delete, modify, and query operations, so the GET request in Ajax is encapsulated as the commonGetAjax() function, and the POST request in Ajax is encapsulated as the commonPostAjax() function.

After using the encapsulation functions commonGetAjax() and commonPostAjax(), users can delete redundant code in the program. All Ajax requests are completed through these two encapsulation functions. The code is as follows: Code description: This application frequently uses Ajax requests in jQuery
. Add, delete, modify, and query operations, so the GET request in Ajax is encapsulated as the commonGetAjax() function, and the POST request in Ajax is encapsulated as the commonPostAjax() function.
After using the encapsulation functions commonGetAjax() and commonPostAjax(), users can delete redundant code in the program. All Ajax requests are completed through these two encapsulation functions. The code is as follows: Code description: Send warehouse data to the background for processing through Ajax
requests , execute the SQL statement through the AddWareHouse interface, add a warehouse record in the database, and return to the front end after the addition is successful and initialize the warehouse data on the map.

The third step is to add a new warehouse successfully.

, display the vector warehouse and labels on the map, click the warehouse polygon (rectangle or circle) to display the warehouse floor switching tool, hover the mouse pointer over the warehouse label to view the basic information of the warehouse, as shown in Figure ② Edit the warehouse,
achieved The key process has the following 3 steps.

The first step is to create an editing object

, edit the geometry. After editing, click any area of ​​the map. If the warehouse has unit data, it will prompt "The warehouse has data, please edit the empty warehouse". Otherwise, submit the warehouse modification content. The code is as follows: Code description: Create and edit the geometry,
and The vector feature layer group is used as an editing layer group to activate the editing object and modify the geometry of the warehouse.

The second step is to obtain the modified geometry and area data of the warehouse

, submit the Ajax request to the background for processing, update the modified content of the warehouse in the database, and return to the front end after the update is successful and initialize the warehouse data on the map. The code is as follows: