基于php校园失物招领,基于全景图的校园失物招领系统

曾敏霞 陈华波 谢安 刘毅文

摘要：传统的失物招领管理方式主要依靠人工纸质记录，随着失物招领网络信息化建设的不断推进，显然不能满足日益增多的管理需求。为此我们设计出一个有失物信息发布功能、物品认领功能、全景图在线寻物功能集一体的失物招领平台。其相对于传统在线失物招领平台的最大区别在于增加了全景图模式，因其巧妙地融合了虚拟现实技术、数字图像处理技术、计算机图形学和多媒体技术等信息技术，以人机交互性强、真实感强、经济适用性强等特点有效的弥补了传统虚拟展示、地图领域不够逼真等缺陷。让失物信息直接在全景图上标注出地址和物品信息，让用户根据建筑物的地理信息快速找到丢失物品，系统再结合线上广泛传播和线下认领的方式，提高了寻物效率。

关键词：失物招领平台；全景图技术；虚拟现实技术；交互性强；提高寻物效率

中图分类号：TP391 文献标识码：A 文章编号：1009-3044(2018)15-0067-02

Campus Lost and Found System Based on Panorama

ZENG Min-xia， CHEN Hua-bo， XIE An， LIU Yi-wen

(School of Computer Science and Engineering， Huaihua University， Huaihua 418008， China)

Abstract： The traditional way of managing lost property and founding mainly relies on manual paper records. With the continuous advancement of lost information and the construction of network information， it is obviously unable to meet the increasing demand for management. To this end， we have designed a Lost and Found platform that includes a lost information release function， an item claim function， and a panorama online search function collection. Its biggest difference from the traditional online lost and found platform is the addition of panorama mode， because it skillfully combines virtual reality technology， digital image processing technology， computer graphics and multimedia technology and other information technologies， with strong human-computer interaction. The characteristics of strong sense of reality， strong economic applicability and other features have effectively compensated for defects such as the traditional virtual display and the lack of realism in the map field. Let the lost information directly indicate the address and item information on the panorama， allowing the user to quickly find the lost items based on the geographical information of the building. The system then combines the methods of wide spread and offline claims on the line to improve the search efficiency.

Key words： lost and found platform； panorama technology； virtual reality technology； strong interactivity； improve the efficiency of searching

1 背景

該系统是结合虚拟现实的全景图技术设计的一款失物招领系统软件。前端基于three.js制作全景图以及部分用户数据的采集，后台采用PHP开发技术的失物招领平台。将ThinkPHP开源框架与HTML、JavaScript等技术结合来实现地理位置信息的记录，物品信息的记录以及发布物品信息功能。在该失物招领平台上用户可以在全景图中根据标记地理位置信息来寻找物品信息，以此提高物品寻找效率。

2 基于three.js全景图的制作

2.1 three.js的基本介绍

three.js是JavaScript编写的WebGL第三方库，是对底层WebGl的高级封装，保留了底层开发的特性，结构严谨而灵活、易于扩展。对于该系统来说其最大的优点是可以在网页浏览器中运行。该系统利用其封装好的接口进行三维场景的基本搭建，包括场景(scene)、光源(light)、相机(camera)、渲染器(renderer)等组件。

2.2 three.js与其他同类引擎的比较

Flash在PC平台占有率高，有大量开发群体和案例；需要安装插件，更适合2D动画开发，在移动平台支持不够好。Unity3D支持各大操作系统和平台，需要安装插件，移动平台支持APP。它们都有的共同点都是需要安装插件，对移动平台的Web环境支持不好。X3DOM虽然能像HTML元素一样集成和管理，包括灯光、模型、材质、事件处理等，容易上手，但是封装度较高，扩展性不佳。它们的共同点不是过于底层、简单、不易使用就是过于封装、不易扩展。Three.js是JavaScript编写的WebGL第三方库，对底层WebGl的高级封装，保留了底层开发的特性，结构严谨而灵活、易于扩展。

2.3 全景图像拼接

全景图是基于three.js制作，将一张长宽1：2的图片作为球体的纹理。观察点是球体的圆心，观察者可以利用鼠标上下左右查看整个全景图面貌。

3 在全景图上做标记

3.1 前端用户标记的数据的获取

形成球体全景图后，采用longitude和latitude属性获取需要的经纬度坐标，在HTML页面中添加两个文本输入框标签，类型设定为，即定义隐藏的输入字段，在用户发布信息时点击全景图中的某一位置就会出现一个定位标记，通过jquery中的$("#longitude").val(e.longitude)；(将经度的数据传给输入框) 和$("#latitude").val(e.latitude)；(将纬度的数据传给输入框)两个语句，记录用户标记的经纬度数据，再赋值给两个标签，当用户点击确定按钮时跳转到填写发布物品信息页面，填写物品信息完成后用户点击提交按钮则将数据提交到后台数据库。

3.2 后台的处理

前端利用jquery获取的数据传到数据库之后，当用户查看发布的物品信息时，全景图页面通过读取后台数据库记录的用户填写的物品信息，将物品标记的位置显示在全景图上，其需要的方式和获取坐标时类似，先将两个数值传给两个隐藏的标签，通过value属性(规定input元素的值)赋予，然后通过jquery语句$("#longitude").val()；读取标签内的现有的数据，传值给全景图坐标标记的longitude属性，纬度latitude的方法同理，这样就可以将抽象的經纬度数值通过定位标记符号具体地在全景图上显示出来。

3.3 数据库的设计

通过经纬度来为用户展示物品的具体位置，因此相关的两张数据表，一个存储物品的详细信息，一个存储对应物品在全景图上的经纬度数值。

4 结束语

该文主要阐述全景图的生成原理以及失物招领标记保存的技术问题，利用three.js技术实现了全景图的3D效果，提高系统的交互性、实用性和推广潜质。未来将优化前端和后台模块的安全性能，为用户提供一个安全可靠的失物招领系统。

参考文献：

[1] 张玲， 付克兰， 任华， 等. 基于全景图的校园虚拟漫游系统设计[J]. 电子技术与软件工程， 201602)： 98-99.

[2] 马嘉琳， 张锦明， 孙卫新. 基于相机标定的全景图拼接方法研究[J]. 系统仿真学报， 2017， 29(5)：1112-1119.

[3] 郑华， 刘洋. 基于WebGL的三维模型及其信息化技术研究[J]. 石家庄铁路职业技术学院学报， 2017， 16(1)： 64-70.

[4] 王建兴. 基于Three.js的虚拟三维展示研究[J]. 科技视界， 2017(19)： 68， 80.

[5] 赵毅力， 徐丹， 张雁. 基于球面全景图的虚拟场景实时漫游系统[J]. 计算机与现代化， 2016(2)： 1-4， 10.

[6] 谭伟， 林俊存. 基于JSP的高校失物招领网络平台的设计与实现[J]. 电子世界， 2016(21)： 109-110.

[7] 魏云申. 基于WebGL的全景3D漫游系统的设计与实现[D]. 南京： 南京大学， 2016.

[8] 吴江平. 高校失物招领管理系统的研究与分析[J]. 科技广场， 2015(11)： 32-35.