ALI物联网平台三维数据可视化——停车场管理系统
前言
阿里云物联网平台是阿里云针对物联网领域开发人员推出的一款设备管理平台。高性能IoT Hub实现设备与云端稳定通信，全球多节点部署有效降低通信延时，多重防护能力保障设备云端安全。此外，物联网平台还提供丰富的设备管理功能、稳定可靠的数据存储能力，以及规则引擎。使用规则引擎，您仅需在Web上配置简单规则，即可将设备数据转发至阿里云其他产品，获得数据采集、数据计算、数据存储的全栈服务，真正实现物联网应用的灵活快速搭建。下面就让我们深入了解一下ALI物联网平台下的三维数据可视化。
准备
1）登陆阿里云，支持多种方式登陆。
2）产品 => 物联网 => 物联网数据分析 => 管理控制台 这个钉钉群：21939141记得加一下有不懂的问题会有大牛为你解答。
3）创建一个新产品（我这里已经提前建好了一个产品——模拟停车场）
4）这里就先随便 选一个所属分类就好了 。
5）批量创建设备
6）先搭建出我们需要的场景，这里我已经搭建好了一会就把场景资源分享给大家！
7）关于搭建场景如果有不懂可以参照一下教程，这里要将我们的车位以及车的自定义属性设置为 TypeObject = IOT 这样就可以在场景中查询到了。
8）创建场景，导入刚刚创建的场景模型。
实现
第一步
这里选一个设备能点击下一步进去就可以了，注意这里是必须要选的！
第二步
我的脚本里预置了一些代码供我们参考使用，这里我们就给他删掉了。（刚接触的不懂的同学删除之前多看几遍，以便之后的理解）
var app = new THING.App({
url: window.iotData.sceneUrl,
bindInfo: window.iotData.bindInfo,
container: window.iotData.container || 'div3d',
onPanelChange: window.iotData.onPanelChange,
loaderResourceUrl: window.iotData.resourceUrl
});
第三步
先创建一个功能面板，这里简单介绍一下基本功能。空间统计，就是为了能够清楚的看到空车位；闸门管理，可以控制出入闸门；播放动画，播放一组预设的镜头飞入镜头；出入信息，统计进出车辆信息。
var toolbar = new THING.widget.ToolBar();
toolbar.setPosition({ left: '10px', top: '10px' });
var mainDataObj = {
spaceStatistics: false,
gateManagement: false,
video: false,
registrationForm: false
}
var button0 = toolbar.addImageBoolean(mainDataObj, 'spaceStatistics').name('空间统计').imgUrl('#momoda_lc-icontubiao');
var button1 = toolbar.addImageBoolean(mainDataObj, 'gateManagement').name('闸门管理').imgUrl('#momoda_lc-icontubiao21');
var button2 = toolbar.addImageBoolean(mainDataObj, 'video').name('播放动画').imgUrl('#momoda_lc-icontubiao9');
var button3 = toolbar.addImageBoolean(mainDataObj, 'registrationForm').name('出入信息').imgUrl('#momoda_lc-icontubiao10');
空间统计
//analogData是模拟的停车场数据
button0.on('change', function () {
if (mainDataObj.spaceStatistics) {
for (var i = 0; i < 56; i++) {
var obj = eval(analogData);
var info = obj.parkingLot[i];
if(info.currentState == '空闲'||info.currentState == null)
app.query(info.parkingLotId)[0].style.opacity = 0.2;
}
}else
app.query(/ParkingLot/).style.opacity = 1;
});
闸门管理
button1.on('change', function () {
app.camera.flyTo({
'time': 2000,
'position': [-13.817779086087956, 21.438888484040564, 49.91269335026283],
'target': [5.3152914002825105, 4.724521306682646, 8.113024760248493],
});
if (mainDataObj.gateManagement) {
gateToolbar = new THING.widget.ToolBar();
gateToolbar.setPosition({ left: '10px', top: '200px' });
var gateDataObj = {
entrance: false,
exit: false,
}
var button4 = gateToolbar.addImageBoolean(gateDataObj, 'entrance').name('入口管理').imgUrl('#momoda_lc-icontubiao21');
var button5 = gateToolbar.addImageBoolean(gateDataObj, 'exit').name('出口管理').imgUrl('#momoda_lc-icontubiao21');
button4.on('change', function () {
var obj = app.query('入口')[0];
if (gateDataObj.entrance) {
obj.rotateZ(-45);
obj.moveY(1);
} else {
obj.moveY(-1);
obj.rotateZ(45);
}
});
button5.on('change', function () {
var obj = app.query('出口')[0];
if (gateDataObj.exit) {
obj.rotateZ(45);
obj.moveY(1);
} else {
obj.moveY(-1);
obj.rotateZ(-45);
}
});
} else {
if (gateToolbar) {
gateToolbar.destroy();
gateToolbar = null;
}
init_camera();
}
});
播放动画
button2.on('change', function () {
// 摄像机飞行到某位置
app.camera.flyTo({
'time': 3000,
'position': [-14.513549252347143, 39.032416195113576, 48.440135206226614],
'target': [0.936469740277307, 2.92835690677257, 3.005121273586895],
'complete': function () {
// 摄像机飞行到某位置
app.camera.flyTo({
'time': 5000,
'position': [40.53908942811591, 47.956543390971405, -0.2570269192931729],
'target': [0.936469740277307, 2.92835690677257, 3.005121273586895],
'complete': function () {
// 摄像机飞行到某位置
app.camera.flyTo({
'time': 3000,
'position': [29.541054157425364, 28.205093571283957, -43.35661951494347],
'target': [0.936469740277307, 2.92835690677257, 3.005121273586895],
'complete': function () {
init_camera();
}
});
}
});
}
});
});
出入信息
button3.on('change', function () {
if (mainDataObj.registrationForm) {
create_ui('出入登记');
} else {
destroy_ui();
}
});
第四步
完成鼠标单击事件和鼠标双击事件以及场景中的车位和车的滑过勾边。
app.on('load', function (evt) {
//初始化摄像机
init_camera();
//滑过勾边
var campus = evt.campus;
var objs = app.query('[ObjectType=IOT]');
objs.on('mouseon', function (evt) {
if (evt.object.name.search("ParkingLot") == 0) {
this.style.outlineColor = '#FF0000';
}
if (evt.object.name.search("car") == 0) {
this.style.outlineColor = '#0000FF';
}
else return;
});
objs.on('mouseoff', function () {
this.style.outlineColor = null;
});
});
app.on('SingleClick', function (event) {
if (event.button == 2) {
if (gateToolbar) return;
init_camera();
}
var singleClickObj = event.object;
var obj = eval(analogData);
if (singleClickObj.name.search("car") == 0) {
for (var i = 0; i < 9; i++) {//有点问题
var info = obj.car[i];
if (info.carId == singleClickObj.name) {
console.log(info.carId);
create_ui(info);
}
}
} else {
for (var i = 0; i < 56; i++) {
var info = obj.parkingLot[i];
if (info.parkingLotId == singleClickObj.name) {
console.log(info.parkingLotId);
create_ui(info);
}
}
}
});
app.on('dblclick', function (event) {
var dblclickObj = event.object;
app.camera.flyTo({
'time': 1000,
'target': dblclickObj,
'position': [2, 4, 1]
});
});
第五步
完成init_camera()方法初始化镜头。
function init_camera() {
app.camera.flyTo({
'time': 2000,
'position': [-46.952453075067396, 29.19858330633354, -31.820362283639533],
'target': [6.828164614329947, 3.2231128665446764, 4.7743495611279005],
});
}
第六步
面板相关。
var panel;
function create_ui(info) {
destroy_ui();
panel = new THING.widget.Panel({
titleText: "车辆信息",
closeIcon: true, // 是否有关闭按钮
dragable: true,
retractable: true,
opacity: 0.9,
hasTitle: true,
});
panel.position = [10, 200];
if (info == '出入登记') {
panel.width = 400;
panel.titleText = "出入登记"
var dataObj = {
info: ' '
};
var obj = eval(analogData);
for (var i = 0; i < 9; i++) {
var info = obj.car[i];
var entranceInfo = panel.addString(dataObj, 'info').caption(info.plateNum + " " + info.entranceTime + " " + info.exitTime);
}
return;
}
if (info.carId != null) {
var dataObj = {
park: info.park,
plateNum: info.plateNum,
name: info.name,
contactNum: info.contactNum,
entranceTime: info.entranceTime,
};
// 动态绑定物体
var park = panel.addString(dataObj, 'park').caption('车位信息');
var plateNum = panel.addString(dataObj, 'plateNum').caption('车牌号码');
var name = panel.addString(dataObj, 'name').caption('车主姓名');
var contactNum = panel.addString(dataObj, 'contactNum').caption('联系电话');
var entranceTime = panel.addString(dataObj, 'entranceTime').caption('进场时间');
}
if (info.parkingLotId != null) {
var dataObj = {
park: info.park,
currentState: info.currentState,
};
var park = panel.addString(dataObj, 'park').caption('车位信息');
var plateNum = panel.addString(dataObj, 'currentState').caption('车位状态');
}
}
function destroy_ui() {
if (panel) {
panel.destroy();
panel = null;
}
}
最后
模拟停车场数据。
var analogData = {
"car": [{ "carId": "car_01", "park": "No21", "plateNum": "吉K49278", "name": "张三", "contactNum": "13159828222", "entranceTime": "2018-10-11 10:22", "exitTime": "" },
{ "carId": "car_02", "park": "No25", "plateNum": "吉D95868", "name": "郭富贵", "contactNum": "13546428222", "entranceTime": "2018-10-11 12:22", "exitTime": "2018-10-11 15:22" },
{ "carId": "car_03", "park": "No30", "plateNum": "吉A46154", "name": "黄倩倩", "contactNum": "13177777222", "entranceTime": "2018-10-11 13:22", "exitTime": "2018-10-11 14:22" },
{ "carId": "car_04", "park": "No35", "plateNum": "吉K23278", "name": "薛展畅", "contactNum": "13113543222", "entranceTime": "2018-10-11 14:22", "exitTime": "" },
{ "carId": "car_05", "park": "No41", "plateNum": "吉A12378", "name": "李文忠", "contactNum": "13154654322", "entranceTime": "2018-10-11 15:22", "exitTime": "" },
{ "carId": "car_06", "park": "No44", "plateNum": "吉K48278", "name": "李洪春", "contactNum": "13159888822", "entranceTime": "2018-10-11 16:22", "exitTime": "2018-10-11 17:22" },
{ "carId": "car_07", "park": "No48(Ladies exclusive)", "plateNum": "吉K49537", "name": "王思思", "contactNum": "13158988922", "entranceTime": "2018-10-11 17:22", "exitTime": "" },
{ "carId": "car_08", "park": "No50(Ladies exclusive)", "plateNum": "吉K21541", "name": "李念", "contactNum": "13159118722", "entranceTime": "2018-10-11 18:22", "exitTime": "2018-10-11 20:22" },
{ "carId": "car_09", "park": "No54(Ladies exclusive)", "plateNum": "吉K11512", "name": "江莱", "contactNum": "15459828222", "entranceTime": "2018-10-11 19:22", "exitTime": "" }],
"parkingLot": [{ "parkingLotId": "ParkingLot01", "park": "No01", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot02", "park": "No02", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot03", "park": "No03", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot04", "park": "No04", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot05", "park": "No05", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot06", "park": "No06", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot07", "park": "No07", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot08", "park": "No08", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot09", "park": "No09", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot10", "park": "No10", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot11", "park": "No11", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot12", "park": "No12", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot13", "park": "No13", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot14", "park": "No14", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot16", "park": "No16", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot17", "park": "No17", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot18", "park": "No18", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot19", "park": "No19", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot20", "park": "No20", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot21", "park": "No21", "currentState": "吉K49278" },
{ "parkingLotId": "ParkingLot22", "park": "No22", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot23", "park": "No23", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot24", "park": "No24", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot25", "park": "No25", "currentState": "吉D95868" },
{ "parkingLotId": "ParkingLot26", "park": "No26", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot27", "park": "No27", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot28", "park": "No28", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot29", "park": "No29", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot30", "park": "No30", "currentState": "吉A46154" },
{ "parkingLotId": "ParkingLot31", "park": "No31", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot32", "park": "No32", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot33", "park": "No33", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot34", "park": "No34", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot35", "park": "No35", "currentState": "吉K23278" },
{ "parkingLotId": "ParkingLot36", "park": "No36", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot37", "park": "No37", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot38", "park": "No38", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot39", "park": "No39", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot40", "park": "No40", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot41", "park": "No41", "currentState": "吉A12378" },
{ "parkingLotId": "ParkingLot42", "park": "No42", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot43", "park": "No43", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot44", "park": "No44", "currentState": "吉K48278" },
{ "parkingLotId": "ParkingLot45", "park": "No45", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot46", "park": "No46(Ladies exclusive)", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot47", "park": "No47(Ladies exclusive)", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot48", "park": "No48(Ladies exclusive)", "currentState": "吉K49537" },
{ "parkingLotId": "ParkingLot49", "park": "No49(Ladies exclusive)", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot50", "park": "No50(Ladies exclusive)", "currentState": "吉K21541" },
{ "parkingLotId": "ParkingLot51", "park": "No51(Ladies exclusive)", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot52", "park": "No52(Ladies exclusive)", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot53", "park": "No53(Ladies exclusive)", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot54", "park": "No54(Ladies exclusive)", "currentState": "吉K11512" },
{ "parkingLotId": "ParkingLot55", "park": "No55(Ladies exclusive)", "currentState": "空闲" },
{ "parkingLotId": "ParkingLot56", "park": "No56(Ladies exclusive)", "currentState": "空闲" }]
};
代码资源
链接：https://pan.baidu.com/s/1z5wo0voZM6icVwzc5Dn7_w 提取码：ggr3