备案控制台
探索云世界
开发者社区 物联网 文章 正文

基于ThingJS开发的WebGL H5停车场三维可视化管理Demo

2019-01-19 4091
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 随着社会的发展，城市中的汽车越来越多。车辆集中存放管理的场所被人类提出车辆进出的秩序、车辆存放的安全性、车辆存放管理的有偿性等要求。停车场系统应用现代机械电子及通讯科学技术，集控制硬件、软件于一体。随着科技的发展，停车场管理系统也日新月异，目前最为专业化的停车场系统为免取卡停车场。

前言

随着社会的发展，城市中的汽车越来越多。车辆集中存放管理的场所被人类提出车辆进出的秩序、车辆存放的安全性、车辆存放管理的有偿性等要求。停车场系统应用现代机械电子及通讯科学技术，集控制硬件、软件于一体。随着科技的发展，停车场管理系统也日新月异，目前最为专业化的停车场系统为免取卡停车场。下面我们就用ThingJs平台来搭建一个3d可视化的停车场管理系统。

点击查看：DEMO 

效果

停车场总览

车辆信息

车辆行动轨迹监控

车位信息展示

下面我们就用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 =
        `<div class="sign1" id="board1" style="font-size: 12px;width: 230px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 3px;">车辆进入</span>
				<span class="span-r point" style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;width:70px;margin: 0px 10px 0px 10px;">进车时间</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">车牌号</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">9:15</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉K49278</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">10:15</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉A46154</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">10:17</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉D95868</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">10:25</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉B46278</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">10:39</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">黑B77865</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">11:19</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉CJ87821</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">11:21</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉A4U278</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">11:35</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉A98378</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">12:50</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉A98778</span>
			</div>
			<div class="point-top" style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></div>
		</div>`
    $('#div3d').append($(sign1));
}
function create_html_exit() {
    var sign2 =
        `<div class="sign2" id="board2" style="font-size: 12px;width: 230px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
			<div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
				<span class="span-l icon" style="float: left;width: 30px;height: 30px;"></span>
				<span class="span-l font" style="float: left;margin: 0px 0px 0px 3px;">车辆进入</span>
				<span class="span-r point" style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;width:70px;margin: 0px 10px 0px 10px;">出车时间</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">车牌号</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">7:15</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">黑B77865</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">8:45</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉A4U278</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">8:57</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉A98378</span>
			</div>
			<div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
				<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">10:01</span>
				<span class="span-l font2" style="float: left;width: 140px;background-color: #2480E3;">吉A98778</span>
			</div>
			<div class="point-top" style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></div>
		</div>`
    $('#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] // 界面的重心
    });
}

演示地址

文章标签：
物联网平台
JavaScript
数据可视化
移动开发
相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台，通过云产品流转到函数计算FC，调用钉钉群机器人API，实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品，7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前，请先开通下方两个云产品，让学习更流畅： IoT物联网平台：https://iot.console.aliyun.com/ LinkWAN物联网络管理平台：https://linkwan.console.aliyun.com/service-open
thingjs
目录
相关文章
lyshark
|
4月前
|
数据可视化 数据挖掘 API
C++ Qt开发：Charts绘制各类图表详解
Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍`TreeWidget`与`QCharts`的常用方法及灵活运用。在之前的文章中笔者介绍了如何使用`QCharts`模块来绘制简单的折线图并对通用API接口进行了概括，本章我们通过在`TreeWidget`组件中提取数据，并依次实现柱状图、饼状图、堆叠图、百分比图、散点图等。
lyshark
61 5
C++ Qt开发：Charts绘制各类图表详解
漏刻有时
|
9月前
|
数据可视化
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
漏刻有时
67 1
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
漏刻有时
|
9月前
|
搜索推荐 JavaScript 数据可视化
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
漏刻有时
381 0
GIS技术杂谈
|
9月前
|
JavaScript API
Cesium开发：模拟建筑楼板数据
Cesium开发：模拟建筑楼板数据
GIS技术杂谈
158 0
前端的路人丁
|
9月前
|
JavaScript 定位技术
从零开始vue项目使用cesium开发三维地图（一）
从零开始vue项目使用cesium开发三维地图（一）
前端的路人丁
409 0
GIS技术杂谈
|
10月前
|
定位技术
Cesium开发：二三维联动
Cesium开发：二三维联动
GIS技术杂谈
1129 0
长沙红胖子Qt
|
数据可视化
Qt开发技术：Q3D图表开发笔记（二）：Q3DBar三维柱状图介绍、Demo以及代码详解
qt提供了q3d进行三维开发，虽然这个框架没有得到大量运用也不是那么成功，性能上也有很大的欠缺，但是普通的点到为止的应用展示还是可以的。   其中就包括华丽绚烂的三维图表，数据量不大的时候是可以使用的。   上一篇介绍了基础的q3d散点图，本篇介绍基础的柱状图。
长沙红胖子Qt
160 0
Qt开发技术：Q3D图表开发笔记（二）：Q3DBar三维柱状图介绍、Demo以及代码详解
夜郎king
|
移动开发 JavaScript 数据可视化
基于Three.js的全景展示框架-TPano
在一些全景展示类应用中，经常需要对采集到全景照片进行展示，一般情况下，可以通过制作人员使用pano2vr进行数据处理（教程可参见：实战!使用pano2vr生成html5全景页面），将处理好的数据发布至静态服务器，再关联相应位置即可完成全景展示（详情见基于Leaflet的全景综合展示实战）
夜郎king
589 1
基于Three.js的全景展示框架-TPano
夜郎king
|
数据可视化 JavaScript 前端开发
gis信息可视化之一Leaflet组件介绍
二维地理信息可视化是展示平面世界的基础，本文将将介绍开源界中的轻量级可视化基础框架Leaflet，介绍其主要功能以及如何使用，最后给出一个简单演示实例。
夜郎king
366 0
gis信息可视化之一Leaflet组件介绍
游客izoamw2f43amu
|
JSON 数据可视化 前端开发
带你入门three.js——从0到1实现一个3d可视化地图(二)
可视化地图——three.js实现 场景的搭建 我先不管地图不地图的，地图的这些形状肯定是放置到场景中的。跟着我的脚步一步一步去搭建一个场景。场景的搭建就照相机，渲染器。我用一个map类来表示代码如下： class chinaMap { constructor() { this.init() } init() { // 第一步新建一个场景 this.scene = new THREE.Scene() this.setCamera() this.setRenderer() } // 新建透视相机
游客izoamw2f43amu
2123 0
带你入门three.js——从0到1实现一个3d可视化地图(二)

物联网

热门文章

最新文章

  • 1
    阿里云物联网无线连接服务：做好菜鸟无人车黑科技的幕后英雄
  • 2
    使用MQTT客户端连接阿里云MQTT服务器
  • 3
    物联网发展的三大编程语言
  • 4
    NB-IOT物联网平台是如何工作的
  • 5
    MongoDB数据建模小案例：物联网时序数据库建模
  • 6
    如何 3 行代码使用 arduino 接入阿里云物联网平台
  • 7
    阿里云IoT2018年度十佳合作伙伴20强入围企业公布
  • 8
    AliOS Things 技术架构
  • 9
    业务系统从阿里云物联网平台获取设备数据的3种方案
  • 10
    Link Vision 打破传统视频监控模式，开启新型物联网智能视频服务
  • 1
    hibernate二级缓存
    6
  • 2
    LoadRunner如何监控Linux系统资源
    3
  • 3
    如何入门做物联网系统压测？
    34
  • 4
    Linux设置PPPOE
    17
  • 5
    持续提升敏捷度，你需要实施Sitecore DevOps
    38
  • 6
    数据、AI涌现的年代，迭代数字平台，更需关注安全合规问题
    27
  • 7
    不惜血本、重金打造的数据平台为何效果平平？
    30
  • 8
    Ruby：软件外包开发的强大利器
    28
  • 9
    驾驭数据的能力，如同使用ChatGPT一样，是现代职场人的必修课
    32
  • 10
    04 深度解析物联网架构与技术应用于农业大棚系统
    39

    • 相关电子书

    更多
  • WebGL 在前端可视化中的实践
  • 复杂环境下的视觉同时定位与地图构建
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码

    • 相关实验场景

    更多
  • 基于Kibana Lens进行数据可视化，灵活分析航班信息
  • Gazebo环境下基于ROS和OpenCV的阿克曼小车综合实验
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    阿里云oss简介和使用流程
    为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
    产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
    解决方案技术解决方案
    文档与社区文档开发者社区天池大赛培训与认证
    权益中心免费试用高校计划企业扶持计划推荐返现计划
    支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
    关注阿里云
    关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
    阿里云APP阿里云微信
    联系我们：4008013260
    法律声明Cookies政策廉正举报安全举报联系我们加入我们
    阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
    © 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
    浙公网安备 33010602009975号浙B2-20080101-4