GIS跟踪监管系统

（1）物资查询与展示。

① 几何查询。

• 单击查询：单击单元几何对象，搜索物资单元内存储的物资并展示。
• 拉框查询：在地图上绘制矩形，查询矩形范围内的物资并展示。
• 画圆查询：在地图上绘制圆形，查询圆形范围内的物资并展示。
• 多边形查询：在地图上绘制多边形，查询多边形范围内的物资并展示。
拉框查询、画圆查询、多边形查询通过在地图上绘制矢量几何对象，查询数据库中物资的位置数据，筛选在矢量几何对象内部的物资，显示查询到的物资信息，代码如下：

代码说明：

第一步，通过GetMaterialsPosition接口查询所有物资位置信息；第二步，使用isPointInCircle()函数判断点与圆形的关系，或者使用turf.booleanPointInPolygon()函数（turf是开源空间分析库，其下载地址为https://github.com/Turfjs/turf）判断点与多边形的关系，筛选圆形和多边形内部的物资ID，将符合要求的物资展示在表格中。

② 物资定位。

• 单个物资定位：

在本系统的搜索框中选择单个物资选项，在搜索框输入物资的名称，发送Ajax请求到后台服务，在数据库中查询该物资最新时间的位置信息，客户端地图上加载该物资。

• 多个物资定位：

在本系统的搜索框中选择多个物资选项，在搜索框输入物资的名称，发送Ajax请求到后台服务，在数据库中查询与输入名称匹配的所有物资位置信息，客户端地图上加载该物资。
物资查询通过Search接口实现，后台服务根据参数判断，single-material表示单个物资定位，multiple-material表示多个物资定位。

程序代码为单个物资、多个物资定位代码，其中关键部分的代码如下：
代码说明：materPosFeatureLayer为矢量要素图层组，在图层组中添加Marker标注。Marker注册以下事件：bindTooltip绑定鼠标指针悬浮提示信息；注册click事件，当单击Marker时，以Marker为中心地图缩放至16层级；注册mouseover事件，当鼠标指针悬浮在Marker上时，物资标注高亮显示；注册mouseout事件，当鼠标指针从Marker上移除时，取消物资标注高亮显示。

③ 物资统计。

物资统计是汇总所有仓库中的物资数据以图表的形式展示，实现效果如图
所示，便于直观地了解物资在每一个仓库的存储状况。本系统的物资统计实现代码如下。在工具栏的“仓库”下拉列表中选择“统计信息”选项，激活物资统计功能，在系统界面弹出“统计信息”对话框，显示所有仓库的物资统计信息。在“统计信息”对话框右上角可以根据物资类型、名称、用途、等级等选项进行统计，选择不同的选项会有不同的统计结果
代码说明：ECharts（下载地址为https://github.com/apache/incubator-echarts）是一个使用JavaScript实现的开源可视化库，它提供直观、交互丰富、可高度个性化定制的数据可视化图表，本系统的统计图使用ECharts库实现物资统计图表。在代码中，使用ID为ware-echarts的div作为ECharts图表的容器，通过echarts.init()函数初始化一个ECharts图表，使用myChart.setOption(option, true)函数将图表数据option填充到已初始的myChart图表中。使用GetMaterialsEcharts()函数后台接口获取仓库中物资的统计数据，type参数表示统计类型，使用materialsEchartsOptions()函数将物资的统计数据拼接为ECharts图表需要的option。图
所示的“统计信息”对话框右上角的下拉列表框注册了change事件，当下拉列表框改变时，发送Ajax请求重新获取统计数据，执行myChart.setOption(option, true)函数重绘统计图表。

（2）物资信息更新

。本系统的每一个仓库都可以存储大量的物资，物资的数量是动态变化的，仓库负责人需要对物资在仓库中的变化进行实时操作，合理更新仓库中的物资信息。单击仓库中的单元，可以查看单元存储的物资信息，通过“物资信息”对话框，可以实现物资在该单元中的新增、修改、删除等操作。

“物资信息”对话框使用bootstrap模态框显示，表格使用bootstrap-table实现，当模态框显示时调用TableInit()函数，通过GetMaterialsInfo接口请求物资数据并显示在模态框的表格中，代码如下：

代码说明：通过GetMaterialsInfo接口请求物资数据，请求的参数在oTableInit.queryParams()函数中进行处理，pageSize表示每页需要多少条数据，pageNo表示请求哪一页，keyword用于模糊搜索指定物资，warehouseid表示仓库ID，unitid表示单元ID，materialsId表示物资ID。后台服务根据GetMaterialsInfo接口实现物资分页查询，将物资数据返回前端，使用oTableInit.responseHandler()函数在表格中显示物资数据。

① 新增物资。

单击“物资信息”对话框中的“新增”按钮，弹出“添加物资”对话框，如图7-22所示，添加物资的form表单参数有物资类型、名称、用途、等级等信息。表单填写完成后单击“确认”按钮，通过Ajax请求将物资数据发送至后台服务处理，AddMaterials接口执行SQL语句在数据库中新增一条物资记录，添加成功后刷新物资信息的表格，显示最新物资数据。