基于ThingJS开发的WebGL H5停车场三维可视化管理Demo

前言

随着社会的发展，城市中的汽车越来越多。车辆集中存放管理的场所被人类提出车辆进出的秩序、车辆存放的安全性、车辆存放管理的有偿性等要求。停车场系统应用现代机械电子及通讯科学技术，集控制硬件、软件于一体。随着科技的发展，停车场管理系统也日新月异，目前最为专业化的停车场系统为免取卡停车场。下面我们就用ThingJs平台来搭建一个3d可视化的停车场管理系统。

点击查看：DEMO 

效果

停车场总览

车辆信息

车辆行动轨迹监控

车位信息展示

下面我们就用ThingJs平台来搭建一个3d可视化的停车场管理系统。

第一步

使用CampusBuilder来搭建一个模拟停车场。CampusBuider很好用在以往的文章中也多次提及过，丰富的模型库任你选择快速搭建3D场景。

第二步

初始化摄像机的位置并添加鼠标滑过，左键单击，右键单击，左键双击等事件。鼠标滑过，车勾边变红色，车位勾边边蓝色。左键单击，车或车位弹出信息牌。右键单击，关闭当前信息牌，镜头初始化。getCarData() 与 getParkData() 为模拟数据，没有几个售出的车位和车就用了switch。

app.on('load', function (evt) {//初始化摄像机init_camera();//滑过勾边var campus = evt.campus;var objs = app.query('.Building').add(campus.things);objs.on('mouseon', function (ev) {if (ev.object.name.search("car") == 0) {this.style.outlineColor = '#ff0000';}if (ev.object.name.search("park") == 0) {this.style.outlineColor = '#0000ff';}});objs.on('mouseoff', function () {this.style.outlineColor = null;});//单击事件app.on('click', function (ev) {if (ev.button == 2) {destroy_ui();init_camera();}if (ev.object.name.search("car") == 0) {destroy_ui();getCarData(ev.object);create_ui_car();}if (ev.object.name.search("park") == 0) {destroy_ui();getParkData(ev.object);create_ui_park();}});//双击事件app.on('dblclick', function (ev) {if (ev.object.name.search("car") == 0) {app.camera.flyTo({'time': 1500,'object': ev.object,'position': [0, 0, 0],'complete': function () {}});}if (ev.object.name.search("park") == 0) {app.camera.flyTo({'time': 1500,'object': ev.object,'position': [0, 5, 0],'complete': function () {}});}});
});//初始化摄像机
function init_camera() {// 摄像机飞行到某位置app.camera.flyTo({'position': [-67.95670997548082, 49.69517426520041, -42.88366089402964],'target': [-7.188588318222256, 14.094194791658271, -12.724756207211417],'time': 800,'complete': function () {console.log("Camera ready");}});
}
//创建面板
var panel;
var dataObj;
var carInfo;
var parkInfo;function create_ui_car() {panel = new THING.widget.Panel({titleText: "车辆信息",closeIcon: true, // 是否有关闭按钮dragable: true,retractable: true,opacity: 0.9,hasTitle: true,titleImage: 'https://www.thingjs.com/static/images/example/icon.png'});panel.position = [0, 326];// 创建任意对象dataObj = {name: carInfo[0],info: carInfo[1],park: carInfo[2],plateNum: carInfo[3],state: carInfo[4],contactNum: carInfo[5]};// 动态绑定物体var name = panel.addString(dataObj, 'name').caption('车主姓名');var info = panel.addString(dataObj, 'info').caption('车主信息');var park = panel.addString(dataObj, 'park').caption('车位编号');var plateNum = panel.addString(dataO