基于WebGL架构的3D可视化平台—停车场管理系统_webgl停车场

前言
随着社会的发展，城市中的汽车越来越多。车辆集中存放管理的场所被人类提出车辆进出的秩序、车辆存放的安全性、车辆存放管理的有偿性等要求。停车场系统应用现代机械电子及通讯科学技术，集控制硬件、软件于一体。随着科技的发展，停车场管理系统也日新月异，目前最为专业化的停车场系统为免取卡停车场。下面我们就用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 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125