基於WebGL架構的3D視覺化平臺—停車場管理系統
阿新 • • 發佈：2018-12-27
隨著社會的發展，城市中的汽車越來越多。車輛集中存放管理的場所被人類提出車輛進出的秩序、車輛存放的安全性、車輛存放管理的有償性等要求。停車場系統應用現代機械電子及通訊科學技術，集控制硬體、軟體於一體。隨著科技的發展，停車場管理系統也日新月異，目前最為專業化的停車場系統為免取卡停車場。下面我們就用ThingJs平臺來搭建一個3d視覺化的停車場管理系統。
第一步，還是用CampusBuilder來搭建一個模擬停車場。CampusBuider很好用在以往的文章中也多次提及過，豐富的模型庫任你選擇快速搭建3D場景。
](https://img-blog.csdnimg.cn/20181208155531469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pb29vb20=,size_16,color_FFFFFF,t_70)
第二步，初始化攝像機的位置並新增滑鼠滑過，左鍵單擊，右鍵單擊，左鍵雙擊等事件。滑鼠滑過，車勾邊變紅色，車位勾邊邊藍色。左鍵單擊，車或車位彈出資訊牌。右鍵單擊，關閉當前資訊牌，鏡頭初始化。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';
} 第三步，建立主面板新增空間統計，閘門管理，播放動畫，出入登記等功能按鈕，同時建立閘門管理子面板。
//主面板
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/).