共计 15529 个字符，预计需要花费 39 分钟才能阅读完成。
随着社会的发展，城市中的汽车越来越多。车辆集中存放管理的场所被人类提出车辆进出的秩序、车辆存放的安全性、车辆存放管理的有偿性等要求。停车场系统应用现代机械电子及通讯科学技术，集控制硬件、软件于一体。随着科技的发展，停车场管理系统也日新月异，目前最为专业化的停车场系统为免取卡停车场。下面我们就用 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(dataObj, ‘plateNum’).caption(‘ 车牌号码 ’);
var contactNum = panel.addString(dataObj, ‘contactNum’).caption(‘ 联系电话 ’);
var state = panel.addString(dataObj, ‘state’).caption(‘ 车位状态 ’);
}
function create_ui_park() {
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 = {
park: parkInfo[0],
name: parkInfo[1],
state: parkInfo[2],
date: parkInfo[3]
};
var park = panel.addString(dataObj, ‘park’).caption(‘ 车位编号 ’);
var name = panel.addString(dataObj, ‘name’).caption(‘ 车主姓名 ’);
var state = panel.addString(dataObj, ‘state’).caption(‘ 车位状态 ’);
var date = panel.addString(dataObj, ‘date’).caption(‘ 车位期限 ’);
}
function destroy_ui() {
if (panel) {
panel.destroy();
panel = null;
}
}
function getCarData(obj) {
switch (obj.name) {
case “car_0”:
carInfo = [‘ 张三 ’, ’28#1-302′, ‘A-06’, ‘ 吉 K49278’, ‘ 未交费 ’, ‘13159828222’];
break;
case “car_1”:
carInfo = [‘ 李四 ’, ’18#2-1202′, ‘B-04’, ‘ 吉 A46154’, ‘ 已交费 ’, ‘13159828222’];
break;
case “car_2”:
carInfo = [‘ 王五 ’, ’13#2-702′, ‘B-05’, ‘ 吉 D95868’, ‘ 已交费 ’, ‘13159828222’];
break;
case “car_3”:
carInfo = [‘ 郭富贵 ’, ‘3#3-802’, ‘B-09’, ‘ 吉 B46278’, ‘ 已交费 ’, ‘13159828222’];
break;
case “car_4”:
carInfo = [‘ 薛展畅 ’, ‘8#3-1302’, ‘C-03’, ‘ 吉 A44278’, ‘ 未交费 ’, ‘13159828222’];
break;
case “car_5”:
carInfo = [‘ 李文忠 ’, ‘6#2-302’, ‘C-05’, ‘ 黑 B77865’, ‘ 已交费 ’, ‘13159828222’];
break;
case “car_6”:
carInfo = [‘ 李洪春 ’, ‘8#2-402’, ‘D-08’, ‘ 吉 CJ87821’, ‘ 未交费 ’, ‘13159828222’];
break;
case “car_7”:
carInfo = [‘ 孟旭浩 ’, ‘9#2-801’, ‘D-16’, ‘ 吉 A4U278’, ‘ 已交费 ’, ‘13159828222’];
break;
case “car_8”:
carInfo = [‘ 刘星辰 ’, ‘4#2-502’, ‘D-20’, ‘ 吉 A98378’, ‘ 已交费 ’, ‘13159828222’];
break;
case “car_9”:
carInfo = [‘ 张星辰 ’, ‘4#1-302’, ‘E-04’, ‘ 吉 A98378’, ‘ 已交费 ’, ‘13159828222’];
break;
case “car_10”:
carInfo = [‘ 张星辰 ’, ‘8#2-302’, ‘D-01’, ‘ 京 A44378’, ‘ 已交费 ’, ‘13159228222’];
break;
}
}
function getParkData(obj) {
switch (obj.name) {
case “park_5”:
parkInfo = [‘A-06’, ‘ 张三 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_11”:
parkInfo = [‘B-09’, ‘ 郭富贵 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_16”:
parkInfo = [‘B-05’, ‘ 王五 ’, ‘ 欠费 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_17”:
parkInfo = [‘B-04’, ‘ 李四 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_40”:
parkInfo = [‘C-03’, ‘ 薛展畅 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_44”:
parkInfo = [‘C-05’, ‘ 李文忠 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_68”:
parkInfo = [‘D-08’, ‘ 李洪春 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_78”:
parkInfo = [‘E-04’, ‘ 张星辰 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_59”:
parkInfo = [‘D-16’, ‘ 孟旭浩 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_67”:
parkInfo = [‘D-20’, ‘ 刘星辰 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_3”:
parkInfo = [‘A-04’, ‘ 刘地辰 ’, ‘ 已交 ’, ‘2018.5.10-2020.5.11’];
break;
case “park_54”:
parkInfo = [‘D-1’, ‘ 龙的辰 ’, ‘ 未交 ’, ‘2018.5.10-2020.5.11’];
break;
default:
parkInfo = [‘X-xx’, ‘XXX’, ‘ 未售出 ’, ‘2000.1.1-2020.1.1’];
}
}
能按钮，同时创建闸门管理子面板。
// 主面板
var toolbar = new THING.widget.Panel({width: ‘163px’});
var mainDataObj = {
spaceStatistics: false,
gateManagement: false,
video: false,
registrationForm: false
}
// 闸门管理面板
var gateToolbar = new THING.widget.Panel({width: ‘163px’});
gateToolbar.position = [450, 0];
gateToolbar.visible = false;
var gateDataObj = {
entrance: false,
exit: false,
}
// 面板按钮组件及事件
Loader.sync([‘lib/iconfont.js’], function () {
// 主面板
var button0 = toolbar.addImageBoolean(mainDataObj, ‘spaceStatistics’).caption(‘ 空间统计 ’).url(‘#momoda_lc-icontubiao’);
var button1 = toolbar.addImageBoolean(mainDataObj, ‘gateManagement’).caption(‘ 闸门管理 ’).url(‘#momoda_lc-icontubiao21’);
var button2 = toolbar.addImageBoolean(mainDataObj, ‘video’).caption(‘ 播放动画 ’).url(‘#momoda_lc-icontubiao9’);
var button3 = toolbar.addImageBoolean(mainDataObj, ‘registrationForm’).caption(‘ 出入登记 ’).url(‘#momoda_lc-icontubiao10’);
// 闸门面板
var button4 = gateToolbar.addImageBoolean(gateDataObj, ‘entrance’).caption(‘ 入口管理 ’).url(‘#momoda_lc-icontubiao21’);
var button5 = gateToolbar.addImageBoolean(gateDataObj, ‘exit’).caption(‘ 出口管理 ’).url(‘#momoda_lc-icontubiao21’);
// 第四步中的功能实现
});
第四步，为上面创建的功能按钮实现功能。
// 空间统计
var opacityFlag = true;
button0.on(‘change’, function () {
if (opacityFlag) {
opacityFlag = false;
app.query(/park/).forEach(
function (obj) {
var str = obj.name;
switch (str) {
case “park_5”: break;
case “park_11”: break;
case “park_16”: break;
case “park_17”: break;
case “park_40”: break;
case “park_44”: break;
case “park_68”: break;
case “park_78”: break;
case “park_59”: break;
case “park_67”: break;
case “park_33”: break;
case “park_54”: break;
case “park_3”: break;
default:
obj.style.opacity = 0.3;
}
}
);
} else {
opacityFlag = true;
app.query(/park/).forEach(
function (obj) {
obj.style.opacity = 1;
}
)
}
});
// 闸门管理, 入口管理，出口管理
var gateToolbarFlag = true;
var entranceFlag = false;
var exitFlag = false;
button1.on(‘change’, function () {
if (gateToolbarFlag) {
app.camera.flyTo({
‘position’: [-69.15232764795844, 12.556743445078443, -4.722896106654333],
‘target’: [-6.75806618043438, 11.584727439263146, -5.077821719000649],
‘time’: 1000
});
gateToolbarFlag = false;
gateToolbar.visible = true;
} else {
init_camera();
gateToolbarFlag = true;
gateToolbar.visible = false;
}
});
button4.on(‘change’, function () {
var entry = app.query(‘ 入口 ’)[0];
if (!entranceFlag) {
entranceFlag = true;
entry.rotateX(45.0);
entry.moveY(2);
entry.moveZ(-1);
} else {
entranceFlag = false;
entry.rotateX(-45.0);
entry.position = [0, 0, 0];
}
});
button5.on(‘change’, function () {
var exit = app.query(‘ 出口 ’)[0];
if (!exitFlag) {
exitFlag = true;
exit.rotateX(-45.0);
exit.moveY(9.2);
exit.moveZ(4.3);
} else {
exitFlag = false;
exit.rotateX(-315.0);
exit.position = [0, 0, 0];
}
});
// 播放动画
button2.on(‘change’, function () {
// 飞向每一个摄像机的位置
console.log(“ 监控设备！”);
playCar();
});
// 出入登记
registrationFlag = true;
button3.on(‘change’, function () {
// 显示两块信息板，镜头飞向门禁
// 摄像机飞行到某位置
if (registrationFlag) {
app.camera.flyTo({
‘position’: [-13.229586070519874, 13.062016938601909, -14.789241424512456],
‘target’: [-21.25078065116403, 11.949594230222267, -11.972835509196605],
‘time’: 1000,
});
registrationFlag = false;
create_ui_gate_exit();
create_ui_gate_entry();
} else {
registrationFlag = true;
entryUi.destroy();
entryUi = null;
exitUi.destroy();
exitUi = null;
}
});
播放动画
var car = app.create({
type: ‘Thing’,
name: ‘car_10’,
url: ‘http://model.3dmomoda.cn/models/c6ed424627234a298c1921950eb8534c/0/gltf/’, // 模型地址
position: [-45.89714816093272, 0.043936770289323, 0.312388718621647], // 位置
angle: 90,
});
var points = [];
points.push([-45.89714816093272, 0.043936770289323, 0.312388718621647]);
points.push([-38.89714816093272, 0.043936770289323, 0.312388718621647]);
var radius = 2
for (var degree = 0, y = 0; degree <= 90; degree += 20) {
var x = Math.sin(degree * 2 * Math.PI / 360) * radius – 35.89714816093272;
var z = -Math.cos(degree * 2 * Math.PI / 360) * radius + 2.312388718621647;
points.push([x, y, z]);
console.log([x, y, z]);
}
points.push([-33.927532654908305, 0, 4.9650923632877861]);
points.push([-33.927532654908305, 0, 7.9650923632877861]);
points.push([-33.927532654908305, 0, 10.9650923632877861]);
points.push([-33.927532654908305, 0, 13.9650923632877861]);
var line = app.create({
type: ‘Line’,
color: 0xFFFF00, // 轨迹线颜色
dotSize: 2, // 轨迹点的大小
points: points,
});
line.visible = false;
function playCar() {
var car = app.query(‘car_10’)[0];
var entry = app.query(‘ 入口 ’)[0];
entry.rotateX(45.0);
entry.moveY(2);
entry.moveZ(-1);
car.movePath({
‘path’: line.points, // 轨迹路线
‘time’: 5000, // 移动时间
‘orientToPath’: true, // 物体移动时沿向路径方向
});
setTimeout(function () {
entry.rotateX(-45.0);
entry.position = [0, 0, 0];
}, 2000)
}
出入登记
// 出入登记
function create_html_entry() {
var sign1 =
`<div class=”sign1″ id=”board1″ style=”font-size: 12px;width: 230px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;”>
<div class=”s1″ style=”margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;”>
<span class=”span-l icon” style=”float: left;width: 30px;height: 30px;”></span>
<span class=”span-l font” style=”float: left;margin: 0px 0px 0px 3px;”> 车辆进入 </span>
<span class=”span-r point” style=”float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;”></span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;width:70px;margin: 0px 10px 0px 10px;”> 进车时间 </span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 车牌号 </span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>9:15</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 K49278</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>10:15</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 A46154</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>10:17</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 D95868</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>10:25</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 B46278</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>10:39</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 黑 B77865</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>11:19</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 CJ87821</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>11:21</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 A4U278</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>11:35</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 A98378</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>12:50</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 A98778</span>
</div>
<div class=”point-top” style=”position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;”></div>
</div>`
$(‘#div3d’).append($(sign1));
}
function create_html_exit() {
var sign2 =
`<div class=”sign2″ id=”board2″ style=”font-size: 12px;width: 230px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;”>
<div class=”s1″ style=”margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;”>
<span class=”span-l icon” style=”float: left;width: 30px;height: 30px;”></span>
<span class=”span-l font” style=”float: left;margin: 0px 0px 0px 3px;”> 车辆进入 </span>
<span class=”span-r point” style=”float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;”></span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;width:70px;margin: 0px 10px 0px 10px;”> 出车时间 </span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 车牌号 </span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>7:15</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 黑 B77865</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>8:45</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 A4U278</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>8:57</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 A98378</span>
</div>
<div class=”s2″ style=”margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;”>
<span class=”span-l font1″ style=”float: left;margin: 0px 10px 0px 10px;”>10:01</span>
<span class=”span-l font2″ style=”float: left;width: 140px;background-color: #2480E3;”> 吉 A98778</span>
</div>
<div class=”point-top” style=”position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;”></div>
</div>`
$(‘#div3d’).append($(sign2));
}
function create_element(str) {
var srcElem = document.getElementById(str);
var newElem = srcElem.cloneNode(true);
newElem.style.display = “block”;
app.domElement.insertBefore(newElem, srcElem);
return newElem;
}
var entryUi = null;
function create_ui_gate_entry() {
create_html_entry();
entryUi = app.create({
type: ‘UIAnchor’,
position: [-39.89714816093272, 3.043936770289323, 2.312388718621647],
element: create_element(“board1”),
offset: [0, 2, 0],
pivot: [0.5, 1] // 界面的重心
});
}
var exitUi = null;
function create_ui_gate_exit() {
create_html_exit();
exitUi = app.create({
type: ‘UIAnchor’,
position: [-34.89714816093272, 6.059100472147456, -14.950719696627075],
element: create_element(“board2”),
offset: [0, 2, 0],
pivot: [0.5, 1] // 界面的重心
});
}
最后，奉上演示地址：http://www.thingjs.com/guide/…
