单元是仓库中存储的最小单位,用户可以在不同的单元分类存放物资,实现物资合理、高效的存储。本系统采用矢量几何图形(多边形、矩形、圆形)表示单元,每一个单元包含在所属仓库,单元具有名称、楼层号、几何信息等属性。本系统在地图初始层级较小时不会加载单元图层,当地图缩放至14层级可以查看到完整几何图形时加载单元数据,实现效果如图
9所示,在不影响使用的前提下提升客户端初始加载效率。
图 实现效果
单元与仓库都是采用矢量几何图形表示,对几何图形的操作具有一致性,下面所述内容有重复地将参考编辑仓库部分。
单元操作主要包含新增单元、编辑单元、删除单元3个功能模块。
选择一个需要添加单元的仓库,单击编辑单元中的“新增”按钮,激活绘制单元几何对象,在指定仓库中绘制单元,同一楼层中单元与仓库都是采用矢量几何图形表示,对几何图形的操作具有一致性,下面所述内容有重复地将参考编辑仓库部分。
单元操作主要包含新增单元、编辑单元、删除单元3个功能模块。
① 新增单元。选择一个需要添加单元的仓库,单击编辑单元中的“新增”按钮,激活绘制单元几何对象(参考程序代码7-3),在指定仓库中绘制单元,同一楼层中正在绘制的单元与已存在的单元不能重叠,绘制完成后将单元数据通过Ajax请求发送至后台服务,执行SQL语句在数据库中添加一条单元记录,添加成功后在地图上初始化单元图层,代码如下:
代码说明:整理单元的新增参数params,发送Ajax请求,通过AddUnit接口新
选择一个需要编辑单元的仓库,单击“编辑”按钮,将指定仓库的所有单元几何对象添加到单元编辑图层组,激活编辑单元几何对象。不能修改已存储物资的单元,可以编辑没有物资的单元几何对象,编辑的单元几何对象不能与同一楼层其他单元重叠。编辑完成后,将单元修改的数据通过Ajax请求发送至后台服务,执行SQL语句在数据库中更新单元数据,更新成功后在地图上初始化单元数据,代码如下:
*
*选择一个需要删除单元的仓库,单击“删除”按钮,将指定仓库的所有单元几何对象添加到单元删除图层组,激活删除单元几何对象。不能删除已存储物资的单元,需要单击空单元。编辑完成后,将单元修改的数据通过Ajax请求发送至后台服务,执行SQL语句在数据库中更新单元数据,更新成功后在地图上初始化单元数据,代码如下:
单击单元几何对象,搜索物资单元内存储的物资并展示。
在地图上绘制矩形,查询矩形范围内的物资并展示。
• 画圆查询:在地图上绘制圆形,查询圆形范围内的物资并展示。
在地图上绘制多边形,查询多边形范围内的物资并展示。
拉框查询、画圆查询、多边形查询通过在地图上绘制矢量几何对象,查询数据库中物资的位置数据,筛选在矢量几何对象内部的物资,显示查询到的物资信息,代码如下:
代码说明:第一步,通过GetMaterialsPosition接口查询所有物资位置信息;第二步,使用isPointInCircle()函数判断点与圆形的关系,或者使用turf.booleanPointInPolygon()函数(turf是开源空间分析库,其下载地址为https://github.com/Turfjs/turf)判断点与多边形的关系,筛选圆形和多边形内部的物资ID,将符合要求的物资展示在表格中。
• 单个物资定位:在本系统的搜索框中选择单个物资选项,在搜索框输入物资的名称,发送Ajax请求到后台服务,在数据库中查询该物资最新时间的位置信息,客户端地图上加载该物资。
在本系统的搜索框中选择多个物资选项,在搜索框输入物资的名称,发送Ajax请求到后台服务,在数据库中查询与输入名称匹配的所有物资位置信息,客户端地图上加载该物资。
物资查询通过Search接口实现,后台服务根据参数判断,single-material表示单个物资定位,multiple-material表示多个物资定位。