摘要:車輛集中存放管理的場(chǎng)所被人類提出車輛進(jìn)出的秩序車輛存放的安全性車輛存放管理的有償性等要求。隨著科技的發(fā)展,停車場(chǎng)管理系統(tǒng)也日新月異,目前最為專業(yè)化的停車場(chǎng)系統(tǒng)為免取卡停車場(chǎng)。下面我們就用平臺(tái)來搭建一個(gè)可視化的停車場(chǎng)管理系統(tǒng)。
隨著社會(huì)的發(fā)展,城市中的汽車越來越多。車輛集中存放管理的場(chǎng)所被人類提出車輛進(jìn)出的秩序、車輛存放的安全性、車輛存放管理的有償性等要求。停車場(chǎng)系統(tǒng)應(yīng)用現(xiàn)代機(jī)械電子及通訊科學(xué)技術(shù),集控制硬件、軟件于一體。隨著科技的發(fā)展,停車場(chǎng)管理系統(tǒng)也日新月異,目前最為專業(yè)化的停車場(chǎng)系統(tǒng)為免取卡停車場(chǎng)。下面我們就用ThingJs平臺(tái)來搭建一個(gè)3d可視化的停車場(chǎng)管理系統(tǒng)。
第一步,還是用CampusBuilder來搭建一個(gè)模擬停車場(chǎng)。CampusBuider很好用在以往的文章中也多次提及過,豐富的模型庫任你選擇快速搭建3D場(chǎng)景。
第二步,初始化攝像機(jī)的位置并添加鼠標(biāo)滑過,左鍵單擊,右鍵單擊,左鍵雙擊等事件。鼠標(biāo)滑過,車勾邊變紅色,車位勾邊邊藍(lán)色。左鍵單擊,車或車位彈出信息牌。右鍵單擊,關(guān)閉當(dāng)前信息牌,鏡頭初始化。getCarData() 與 getParkData() 為模擬數(shù)據(jù),沒有幾個(gè)售出的車位和車就用了switch。
app.on("load", function (evt) { //初始化攝像機(jī) 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 () { } }); } }); }); //初始化攝像機(jī) function init_camera() { // 攝像機(jī)飛行到某位置 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"); } }); } //創(chuàng)建面板 var panel; var dataObj; var carInfo; var parkInfo; function create_ui_car() { panel = new THING.widget.Panel({ titleText: "車輛信息", closeIcon: true, // 是否有關(guān)閉按鈕 dragable: true, retractable: true, opacity: 0.9, hasTitle: true, titleImage: "https://www.thingjs.com/static/images/example/icon.png" }); panel.position = [0, 326]; // 創(chuàng)建任意對(duì)象 dataObj = { name: carInfo[0], info: carInfo[1], park: carInfo[2], plateNum: carInfo[3], state: carInfo[4], contactNum: carInfo[5] }; // 動(dòng)態(tài)綁定物體 var name = panel.addString(dataObj, "name").caption("車主姓名"); var info = panel.addString(dataObj, "info").caption("車主信息"); var park = panel.addString(dataObj, "park").caption("車位編號(hào)"); var plateNum = panel.addString(dataObj, "plateNum").caption("車牌號(hào)碼"); var contactNum = panel.addString(dataObj, "contactNum").caption("聯(lián)系電話"); var state = panel.addString(dataObj, "state").caption("車位狀態(tài)"); } function create_ui_park() { panel = new THING.widget.Panel({ titleText: "車位信息", closeIcon: true, // 是否有關(guān)閉按鈕 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("車位編號(hào)"); var name = panel.addString(dataObj, "name").caption("車主姓名"); var state = panel.addString(dataObj, "state").caption("車位狀態(tài)"); 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", "未交費(fèi)", "13159828222"]; break; case "car_1": carInfo = ["李四", "18#2-1202", "B-04", "吉A46154", "已交費(fèi)", "13159828222"]; break; case "car_2": carInfo = ["王五", "13#2-702", "B-05", "吉D95868", "已交費(fèi)", "13159828222"]; break; case "car_3": carInfo = ["郭富貴", "3#3-802", "B-09", "吉B46278", "已交費(fèi)", "13159828222"]; break; case "car_4": carInfo = ["薛展暢", "8#3-1302", "C-03", "吉A44278", "未交費(fèi)", "13159828222"]; break; case "car_5": carInfo = ["李文忠", "6#2-302", "C-05", "黑B77865", "已交費(fèi)", "13159828222"]; break; case "car_6": carInfo = ["李洪春", "8#2-402", "D-08", "吉CJ87821", "未交費(fèi)", "13159828222"]; break; case "car_7": carInfo = ["孟旭浩", "9#2-801", "D-16", "吉A4U278", "已交費(fèi)", "13159828222"]; break; case "car_8": carInfo = ["劉星辰", "4#2-502", "D-20", "吉A98378", "已交費(fèi)", "13159828222"]; break; case "car_9": carInfo = ["張星辰", "4#1-302", "E-04", "吉A98378", "已交費(fèi)", "13159828222"]; break; case "car_10": carInfo = ["張星辰", "8#2-302", "D-01", "京A44378", "已交費(fèi)", "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", "王五", "欠費(fèi)", "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"]; } } 能按鈕,同時(shí)創(chuàng)建閘門管理子面板。 //主面板 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("空間統(tǒng)計(jì)").url("#momoda_lc-icontubiao"); var button1 = toolbar.addImageBoolean(mainDataObj, "gateManagement").caption("閘門管理").url("#momoda_lc-icontubiao21"); var button2 = toolbar.addImageBoolean(mainDataObj, "video").caption("播放動(dòng)畫").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"); //第四步中的功能實(shí)現(xiàn) });
第四步,為上面創(chuàng)建的功能按鈕實(shí)現(xiàn)功能。
//空間統(tǒng)計(jì) 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]; } }); //播放動(dòng)畫 button2.on("change", function () { //飛向每一個(gè)攝像機(jī)的位置 console.log("監(jiān)控設(shè)備!"); playCar(); }); //出入登記 registrationFlag = true; button3.on("change", function () { //顯示兩塊信息板,鏡頭飛向門禁 // 攝像機(jī)飛行到某位置 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; } });
播放動(dòng)畫
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, // 軌跡點(diǎn)的大小 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, // 移動(dòng)時(shí)間 "orientToPath": true, // 物體移動(dòng)時(shí)沿向路徑方向 }); setTimeout(function () { entry.rotateX(-45.0); entry.position = [0, 0, 0]; }, 2000) }
出入登記
//出入登記 function create_html_entry() { var sign1 = `` $("#div3d").append($(sign1)); } function create_html_exit() { var sign2 = ` ` $("#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/...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/100307.html
摘要:智慧樓宇可視化系統(tǒng)是綜合上述手段打造出的智慧樓宇可查可管可控的一體化可視平臺(tái)。智能環(huán)境可視化展示樓宇內(nèi)水電氣冷風(fēng)等的管線含流向及設(shè)備的空間分布。集成停車引導(dǎo)系統(tǒng),高亮展示最佳停車位及到車位的最佳路線。 智慧樓宇大勢(shì)所趨,從智能 到智慧,一字之差,它到底有多智慧? 我們可以看一下智慧樓宇3D可視應(yīng)用視頻:https://v.qq.com/x/page/h0767... 基于ThingJS...
摘要:隨著信息化技術(shù)發(fā)展,全國(guó)各地開始智慧糧倉的建設(shè),我們可以通過一個(gè)視頻看一下使用可視化平臺(tái)做的可視應(yīng)用,可視一體化,讓糧倉智慧升級(jí)。構(gòu)建糧倉內(nèi)糧情的監(jiān)控預(yù)警診斷分析一體化的可視化平臺(tái)。 首先我們先了解一下基于WebGL架構(gòu)的3D可視化平臺(tái)——ThingJS是什么? ThingJS是優(yōu)锘科技開發(fā)的一套面向物聯(lián)網(wǎng)應(yīng)用的在線3D可視化應(yīng)用開發(fā)及運(yùn)營(yíng)PaaS平臺(tái),以 ThingJS云視PaaS服...
摘要:說起物聯(lián)網(wǎng),大家的第一反應(yīng)就是智慧城市。在物聯(lián)網(wǎng)的幫助下,得以讓我們居住的城市正變得越來越有智慧。作為面向物聯(lián)網(wǎng)的可視化開發(fā)平臺(tái)有廣闊的行業(yè)應(yīng)用場(chǎng)景。 隨著科技的發(fā)展,5G網(wǎng)絡(luò)的到來,將開啟萬物即插即慧的新時(shí)代。這就是物聯(lián)網(wǎng),當(dāng)網(wǎng)絡(luò)不再是阻礙,萬物互聯(lián),萬物可視,把數(shù)字世界帶入每個(gè)人、每個(gè)家庭、每個(gè)組織,構(gòu)建萬物互聯(lián)的智能世界。 說起物聯(lián)網(wǎng),大家的第一反應(yīng)就是智慧城市。在物聯(lián)網(wǎng)的幫助下...
摘要:峰會(huì)上,阿里云與優(yōu)锘科技聯(lián)合發(fā)布了智慧園區(qū)可視化產(chǎn)品。優(yōu)锘科技受邀參加此次峰會(huì),峰會(huì)上,阿里云與優(yōu)锘科技聯(lián)合發(fā)布了智慧園區(qū)可視化產(chǎn)品,并在物聯(lián)網(wǎng)專場(chǎng)論壇構(gòu)建四位一體的數(shù)字園區(qū)運(yùn)營(yíng)體系進(jìn)行了專題分享。 2019年3月21日,2019阿里云峰會(huì)在北京國(guó)家會(huì)議中心如期舉行。峰會(huì)上,阿里云與優(yōu)锘科技聯(lián)合發(fā)布了智慧園區(qū)可視化產(chǎn)品。 本次峰會(huì)中,圍繞十年再出發(fā)的主題,阿里云首次進(jìn)行全面戰(zhàn)略解讀,并...
摘要:根據(jù)不同的市政建設(shè),管網(wǎng)分供水排污供暖通信電力等多種類別,其廣泛分布遍及地下。隨著城市發(fā)展建設(shè)所衍生出空間分布復(fù)雜,變化大,種類繁多等問題,可視化管理是未來發(fā)展最好的解決方案。 前言城市管網(wǎng)是城市最重要的公共基礎(chǔ)設(shè)施之一,與城市的發(fā)展和居民日常生活息息相關(guān)。根據(jù)不同的市政建設(shè),管網(wǎng)分供水、排污、供暖、通信、電力等多種類別,其廣泛分布遍及地下。隨著城市發(fā)展建設(shè)所衍生出空間分布復(fù)雜,變化大...
閱讀 3216·2021-11-25 09:43
閱讀 3219·2021-11-23 09:51
閱讀 3531·2019-08-30 13:08
閱讀 1585·2019-08-29 12:48
閱讀 3606·2019-08-29 12:26
閱讀 412·2019-08-28 18:16
閱讀 2577·2019-08-26 13:45
閱讀 2443·2019-08-26 12:15