• GIS跟踪监管系统信息查询


    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上移除时,取消物资标注高亮显示。

    ③ 物资统计。

    物资统计是汇总所有仓库中的物资数据以图表的形式展示,实现效果如图7-20
    所示,便于直观地了解物资在每一个仓库的存储状况。本系统的物资统计实现代码如下。在工具栏的“仓库”下拉列表中选择“统计信息”选项,激活物资统计功能,在系统界面弹出“统计信息”对话框,显示所有仓库的物资统计信息。在“统计信息”对话框右上角可以根据物资类型、名称、用途、等级等选项进行统计,选择不同的选项会有不同的统计结果在这里插入图片描述
    代码说明: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。图7-20
    所示的“统计信息”对话框右上角的下拉列表框注册了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语句在数据库中新增一条物资记录,添加成功后刷新物资信息的表格,显示最新物资数据。

  • 相关阅读:
    LeetCode --- 1929. Concatenation of Array 解题报告
    数据库概率 期末复习
    猿创征文|Python快速刷题网站——牛客网 数据分析篇(十三)
    pytorch 手写数字识别1
    软件测试培训到底值不值得参加?
    Bootstrap的导航元素和Well详解【前端Bootstrap框架】
    51单片机WIFI手机APP智能窗户窗帘控制系统手动自动定时
    攻防世界-xff_referer+mfw
    shell脚本变量
    [spring-04]Bean后处理器
  • 原文地址:https://blog.csdn.net/leva345/article/details/132956049