Specific implementation of material tracking and supervision system
The material tracking and supervision system is implemented based on the Leaflet development library. Its main functions include map data display operation, warehouse display management, material positioning statistical analysis, etc. This system is designed with B/S architecture and implemented using JavaScript client method combined with .NET development model.
Rescue supplies tracking and supervision
system development environment
as follows.
• Operating system: Windows 10, Windows 7, Windows Vista, Windows XP, etc.
• Development tools: Microsoft Visual Studio 2017 (hereinafter referred to as VS2017).
• Web server: Internet Information Services (IIS) Manager version 10.0.
• WebGIS API: Leaflet1.3.4.
• Database: MySQL5.7.
• Browser: Major browsers.
The client of the relief material tracking and supervision system uses JavaScript frameworks such as jQuery, bootstrap, and layer (excellent Web pop-up layer components), and adopts HTML5 technology to enhance the user experience of the system, making the client presentation more concise, beautiful, and more interactive. friendly. The background data service of this system realizes database interaction through general processing programs and DataBase.cs (encapsulated database connection class), realizes data interaction between the client and the background through Ajax technology, and uses JSON format for data transmission.
The above design is used for development to implement a system including basic map functions, warehouse management, material query, electronic fence and toolbox functional modules. The main interface is as shown in the figure.
framework design
According to the architecture design, functional design and database design of this system, the specific development of the system is carried out in the integrated development environment (VS2017). According to the functional module division of this system, HTML, CSS, JavaScript (jQuery, bootstrap) and other UI technologies are used to build the main framework of the system. The interface frame design is as shown in the figure to build the project 
framework.
(1) Create a project project in VS2017
(DisasterAidTrackSystem), create a new resource directory. The project is divided into 4 parts: the Bin directory is used to add references to MySQL, JSON, etc.; MySqlClassLibrary is used as a class library to store system background processing files (.cs files) for data operations; the web directory is used to store front-end related content; Handler.ashx As a general handler to receive Ajax requests sent by the front end, Web.config saves some configuration information needed by the project. Catalog summary of the rescue material tracking and supervision system
(2) Create a new index.htm page in the web directory,
The index.htm page serves as the main interface of the relief material tracking and supervision system. The page design is built according to the interface framework design drawing, and the effect is as shown in the figure.
The js and css files referenced by index.htm are as follows.
①Framework files related to maps.
• leaflet.js, leaflet.css: basic functional framework and style files such as map display and operation.
• leaflet.draw.js, leaflet.draw.css: Leaflet drawing plug-in and its style files.
• heatmap.min.js, leaflet-heatmap.js: Leaflet heat map plug-in.
• MovingMarker.js: Leaflet mark moving plug-in.
• leaflet.markercluster-src.js, MarkerCluster.css, MarkerCluster.Default.css: Leaflet aggregation labeling plug-in and its style files.
• turf.min.js: Geospatial data manipulation framework.
② Framework files related to front-end interface and operations
.
• jquery-1.12.4.min.js: A JavaScript function library.
• bootstrap.js, bootstrap.css: concise and intuitive front-end development framework, making web development faster and simpler, including style files.
• bootstrap-table.min.js, bootstrap-table-zh-CN.min.js, bootstrap-table.min.css: front-end table framework and its style files based on bootstrap.
• jedate.min.js, jedate.css: Calendar display framework and its style files.
• echarts.common.min.js: Statistical chart framework.
• layer.js: Excellent Web elastic layer framework. 
index.htm page effect
③ Customized files.
• tools.js: Tools file, which stores global variables and public functions.
• map.js: Displays front-end pages and interactive JavaScript code files.
• style.css: Custom style file.
The index.htm page mainly uses the div layer to build and implement the framework. Its structure is shown in Figure 7-9. The entire framework is built using stacked div layers. The "Ajax loading panel" is used for the transition effect of Ajax loading, and the corresponding div container is "loading"; the function item container of the "tool container" function panel corresponds to the div layer "content-container". Used to load various tools on the page; the div layer of the map container is "map", used to load the map; other div containers are bootstrap modal boxes, used to display pop-up boxes.
Figure 7-9 index.htm page structure
For specific construction methods, please refer to the index.htm source code, which will not be described in detail here. The following will introduce in detail the basic functions, warehouse management, material query, electronic fence, and toolbox implementation methods in the rescue material tracking and supervision system.