前言
随着社会的发展,城市中的汽车越来越多。车辆集中存放管理的场所被人类提出车辆进出的秩序、车辆存放的安全性、车辆存放管理的有偿性等要求。停车场系统应用现代机械电子及通讯科学技术,集控制硬件、软件于一体。随着科技的发展,停车场管理系统也日新月异,目前最为专业化的停车场系统为免取卡停车场。下面我们就用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('车位编号');