基于WebGL架構（ThingJS）3D可視化平臺—停車場管理系統

weij 發布于2019-08-23 14:14 / 2653人閱讀

摘要：車輛集中存放管理的場所被人類提出車輛進出的秩序車輛存放的安全性車輛存放管理的有償性等要求。隨著科技的發展，停車場管理系統也日新月異，目前最為專業化的停車場系統為免取卡停車場。下面我們就用平臺來搭建一個可視化的停車場管理系統。

隨著社會的發展，城市中的汽車越來越多。車輛集中存放管理的場所被人類提出車輛進出的秩序、車輛存放的安全性、車輛存放管理的有償性等要求。停車場系統應用現代機械電子及通訊科學技術，集控制硬件、軟件于一體。隨著科技的發展，停車場管理系統也日新月異，目前最為專業化的停車場系統為免取卡停車場。下面我們就用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 =
        `
            
                
                車輛進入
                
            
            
                進車時間
                車牌號
            
            
                9:15
                吉K49278
            
            
                10:15
                吉A46154
            
            
                10:17
                吉D95868
            
            
                10:25
                吉B46278
            
            
                10:39
                黑B77865
            
            
                11:19
                吉CJ87821
            
            
                11:21
                吉A4U278
            
            
                11:35
                吉A98378
            
            
                12:50
                吉A98778
            
            
        `
    $("#div3d").append($(sign1));
}
function create_html_exit() {
    var sign2 =
        `
            
                
                車輛進入
                
            
            
                出車時間
                車牌號
            
            
                7:15
                黑B77865
            
            
                8:45
                吉A4U278
            
            
                8:57
                吉A98378
            
            
                10:01
                吉A98778
            
            
        `
    $("#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/...

云服務器 GPU云服務器多云管理平臺架構云管理平臺架構監控平臺系統架構混合云管理平臺架構

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100307.html

從“智能”樓宇到“智慧”樓宇—ThingJS助力“智慧”升級

摘要：智慧樓宇可視化系統是綜合上述手段打造出的智慧樓宇可查可管可控的一體化可視平臺。智能環境可視化展示樓宇內水電氣冷風等的管線含流向及設備的空間分布。集成停車引導系統，高亮展示最佳停車位及到車位的最佳路線。智慧樓宇大勢所趨，從智能到智慧，一字之差，它到底有多智慧？我們可以看一下智慧樓宇3D可視應用視頻：https://v.qq.com/x/page/h0767... 基于ThingJS...

hqman 2019-08-23 17:01 評論0 收藏0
基于WebGL架構的3D可視化平臺ThingJS—讓糧倉“智慧”升級

摘要：隨著信息化技術發展，全國各地開始智慧糧倉的建設，我們可以通過一個視頻看一下使用可視化平臺做的可視應用，可視一體化，讓糧倉智慧升級。構建糧倉內糧情的監控預警診斷分析一體化的可視化平臺。首先我們先了解一下基于WebGL架構的3D可視化平臺——ThingJS是什么？ ThingJS是優锘科技開發的一套面向物聯網應用的在線3D可視化應用開發及運營PaaS平臺，以 ThingJS云視PaaS服...

aaron 2019-08-23 16:45 評論0 收藏0
ThingJS物聯網3D可視化平臺——智慧城市的應用

摘要：說起物聯網，大家的第一反應就是智慧城市。在物聯網的幫助下，得以讓我們居住的城市正變得越來越有智慧。作為面向物聯網的可視化開發平臺有廣闊的行業應用場景。隨著科技的發展，5G網絡的到來，將開啟萬物即插即慧的新時代。這就是物聯網，當網絡不再是阻礙，萬物互聯，萬物可視，把數字世界帶入每個人、每個家庭、每個組織，構建萬物互聯的智能世界。說起物聯網，大家的第一反應就是智慧城市。在物聯網的幫助下...

eccozhou 2019-08-23 16:53 評論0 收藏0
阿里云攜手優锘發布智慧園區可視化產品

摘要：峰會上，阿里云與優锘科技聯合發布了智慧園區可視化產品。優锘科技受邀參加此次峰會，峰會上，阿里云與優锘科技聯合發布了智慧園區可視化產品，并在物聯網專場論壇構建四位一體的數字園區運營體系進行了專題分享。 2019年3月21日，2019阿里云峰會在北京國家會議中心如期舉行。峰會上，阿里云與優锘科技聯合發布了智慧園區可視化產品。本次峰會中，圍繞十年再出發的主題，阿里云首次進行全面戰略解讀，并...

codeKK 2019-08-26 13:44 評論0 收藏0
基于WebGL架構的ThingJS可視化平臺—城市地下管線3D可視化

摘要：根據不同的市政建設，管網分供水排污供暖通信電力等多種類別，其廣泛分布遍及地下。隨著城市發展建設所衍生出空間分布復雜，變化大，種類繁多等問題，可視化管理是未來發展最好的解決方案。前言城市管網是城市最重要的公共基礎設施之一，與城市的發展和居民日常生活息息相關。根據不同的市政建設，管網分供水、排污、供暖、通信、電力等多種類別，其廣泛分布遍及地下。隨著城市發展建設所衍生出空間分布復雜，變化大...

ChanceWong 2019-08-23 14:58 評論0 收藏0