天然气跟踪监管系统具体实现

物资跟踪监管系统基于Leaflet开发库实现，主要功能包括地图数据的显示操作、仓库展示管理、物资的定位统计分析等。本系统采用B/S架构设计，使用JavaScript客户端方式结合.NET开发模式实现。
救援物资跟踪监管

系统开发环境

如下。
• 操作系统：Windows 10、Windows 7、Windows Vista、Windows XP等。
• 开发工具：Microsoft Visual Studio 2017（以下简称VS2017）。
• Web服务器：互联网信息服务（IIS）管理器10.0版本。
• WebGIS API：Leaflet1.3.4。
• 数据库：MySQL5.7。
• 浏览器：主流浏览器。
救援物资跟踪监管系统的客户端使用jQuery、bootstrap、layer（优秀的Web弹出层组件）等JavaScript框架，并采用了HTML5技术，增强系统的用户体验，让客户端的呈现效果更加简洁、美观，交互更加友好。本系统的后台数据服务通过一般处理程序和DataBase.cs（封装的数据库连接类）实现数据库交互，通过Ajax技术实现客户端与后台的数据交互，使用JSON格式进行数据传输。
采用上述设计进行开发，实现包括地图基本功能、仓库管理、物资查询、电子围栏和工具箱功能模块的系统，主界面如图所示。

框架设计

根据本系统的架构设计、功能设计与数据库设计，在集成开发环境（VS2017）中进行系统的具体开发。按照本系统的功能模块划分，采用HTML、CSS、JavaScript（jQuery、bootstrap）等UI技术搭建系统主框架，其界面框架设计如图
搭建项目框架

（1）在VS2017中创建一个项目工程

（DisasterAidTrackSystem），新建资源目录。项目分为4部分：Bin目录用于添加MySQL、JSON等引用；MySqlClassLibrary作为类库，存储系统后台关于数据操作的处理文件（.cs文件）；web目录用于存储前端相关的内容；Handler.ashx作为一般处理程序接收前端发送的Ajax请求，Web.config保存项目需要的一些配置信息。救援物资跟踪监管系统的目录结

（2）在web目录下新建一个index.htm页面，

index.htm页面作为救援物资跟踪监管系统的主界面，该页面设计按照界面框架设计图进行搭建，效果如图所示。

index.htm引用的js、css文件如下。
① 与地图相关的框架文件。
• leaflet.js、leaflet.css：地图展示、操作等基础功能框架及样式文件。
• leaflet.draw.js、leaflet.draw.css：Leaflet绘制插件及其样式文件。
• heatmap.min.js、leaflet-heatmap.js：Leaflet热力图插件。
• MovingMarker.js：Leaflet标注移动插件。
• leaflet.markercluster-src.js、MarkerCluster.css、MarkerCluster.Default.css：Leaflet聚合标注插件及其样式文件。
• turf.min.js：地理空间数据操作框架。

② 与前端界面和操作相关框架文件

。
• jquery-1.12.4.min.js：一个JavaScript函数库。
• bootstrap.js、bootstrap.css：简洁、直观的前端开发框架，让Web开发更迅速、简单，包含样式文件。
• bootstrap-table.min.js、bootstrap-table-zh-CN.min.js、bootstrap-table.min.css：基于bootstrap的前端表格框架及其样式文件。
• jedate.min.js、jedate.css：日历显示框架及其样式文件。
• echarts.common.min.js：统计图表框架。
• layer.js：优秀的Web弹层框架。
　index.htm页面效果

③ 自定义文件。

• tools.js：工具文件，存储全局变量及公共函数。
• map.js：显示前端页面、交互JavaScript代码文件。
• style.css：自定义样式文件。
index.htm页面主要使用div层来搭建和实现框架，其结构如图7-9所示。整个框架使用层叠的div层搭建，“Ajax加载面板”用于Ajax加载的过渡效果，对应div容器为“loading”；“工具容器”功能面板的功能项容器对应div层为“content-container”，用于加载页面上的各种工具；地图容器的div层为“map”，用于加载地图；其他的div容器是bootstrap的模态框，用于显示弹框。
图7-9　index.htm页面结构
具体搭建方法请参见index.htm源码，在此不再详述。下面将详细介绍救援物资跟踪监管系统中的基本功能、仓库管理、物资查询、电子围栏、工具箱的实现方法。