物联网可视化行业应用 智慧城市地下管线3D可视化

zzzzzker 24天前 642


      在物联网不断发展的情况下,物联网可视化也成为了越来越多的企业的追求,腾讯的滨海大厦-智慧楼宇可视化应用、阿里的杭州临平智慧文化艺术长廊-数字孪生智慧建筑IBV,除了这些bat企业,还有其他企业也在使用ThingJS搭建属于自己的三维可视化应用,而管网也是城市最重要的公共基础设施之一,与城市的发展和居民日常生活息息相关。根据不同的市政建设,管网分供水、排污、供暖、通信、电力等多种类别,其广泛分布遍及地下。随着城市发展建设所衍生出空间分布复杂,变化大,种类繁多等问题,可视化管理是未来发展最好的解决方案。

Demo预览


实现

第一步,加载场景

//加载场景代码var app = new THING.App({    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Demo_地下管线",    //背景设置
    "skyBox": "BlueSky"});

第二步,创建管线以及创建管线信息面板。这里PolygonLine这种类型我们在之前的Demo中使用过没看过的同学可以点进去看一下,当然那篇比较糙还是没有这篇好看的,可以两篇对比一下效果,文章地址。这里这个renderOrder属性划重点,这里将line的visible属性设置为false,当场景加载完成后我们的管线就已经创建好了为了能更好的配合我们的面板所以给他先隐藏掉了,等到开关触发再对他进行展示。

function createLine(name, color, points) {    var line = null;
    line = app.create({
        type: 'PolygonLine',
        name: name,
        points: points,
        style: {
            color: color,
        },
    });
    line.renderOrder = -10000;
    line.scrollUV = true;
    line.visible = false;    return line;
}function createInfo(obj, position) {    var panel = new THING.widget.Panel({
        template: 'default2',
        width: '120px',
        cornerType: 'polyline'
    })    var dataObj = {
        name: obj.name,
        color: obj.style.color
    }
    panel.addString(dataObj, 'name').caption('名称');
    panel.addString(dataObj, 'color').caption('颜色');    var uiAnchor = app.create({
        type: 'UIAnchor',        parent: obj,
        element: panel.domElement,
        position: [position[0], -1, position[2]],
        pivot: [-0.2, 2.1]
    });    return uiAnchor;
}

第三步,创建功能面板以及创建各种类管线。

//管线的模拟数据var dataJson = [{ 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' },
{ 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' },
{ 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' }];
app.on('load', function () {

    // init_camera 
    app.camera.flyTo({        'position': [-6.199233956799988, 49.47465259648085, 113.74453304853118],        'target': [-4.002967317456267, 26.055382001258867, 37.65111202780902],        'time': 2000,
    });


    //创建场景
    var controlPanel = new THING.widget.Panel({
        titleText: '地下管线Demo',
        hasTitle: true, // 是否有标题
        zIndex: 999, // 设置层级
    });
    var data = {
        totalOpen: false,
        viewOpen: false,
        waterOpen: false,
        blowOffOpen: false,
        heatOpen: false
    };

    //openTotal按钮控制
    var totalOpen = controlPanel.addBoolean(data, 'totalOpen').caption('状态切换');
    totalOpen.on('change', function (ev) {        if (ev) {
            //将campus下所有的obj的opacity = 0.4,将name = Uncorrelated 的obj的visiable = false
            app.query('Campus')[0].style.opacity = 0.3;
            app.query('Uncorrelated')[0].visible = false;
        } else {
            //反之初始化
            app.query('Campus')[0].style.opacity = 1;
            app.query('Uncorrelated')[0].visible = true;
        }
    });

    //viewOpen视角控制
    var viewOpen = controlPanel.addBoolean(data, 'viewOpen').caption('2D/3D');
    viewOpen.on('change', function (ev) {        if (ev) {
            app.camera.viewMode = THING.CameraView.TopView;
        } else {
            app.camera.viewMode = THING.CameraView.Normal;
            app.skyBox = 'BlueSky';
        }
    });

    //waterOpen供水管线 color #0000FF
    var waterOpen = controlPanel.addBoolean(data, 'waterOpen').caption('供水管线');
    var waterLine = [];
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[-61.736, -1.5, 10], [74.408, -1.5, 10]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[-61.736, -1.50, 8], [-16.126, -1.50, 8], [-16.126, -1.50, -20], [-10.126, -1.50, -20], [-10.126, -1.50, 8], [74.408, -1.5, 8]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[-61.736, -1.50, 12], [-45.001, -1.5, 15.755], [-20.736, -1.5, 12], [74.408, -1.5, 12]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[4, -1.5, 46], [4, -1.50, 13.809], [4, -2, 13.809], [4, -2, 6], [4, -1.50, 6], [4, -1.5, -34]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[6, -1.50, 46], [6, -1.50, 13.809], [6, -2, 13.809], [6, -2, 6], [6, -1.50, 6], [6, -1.5, -34]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[8, -1.50, 46], [8, -1.50, 13.809], [8, -2, 13.809], [8, -2, 6], [8, -1.50, 6], [8, -1.5, -34]]));
    createInfo(waterLine[0], dataJson[0],[-28.847, -1.5, 7.957]);
    waterOpen.on('change', function (ev) {
        waterLine.forEach(function (obj) {
            obj.visible = ev;
        })
    });


    //blowOffLine排污管线 color #FFEC8B
    var blowOffOpen = controlPanel.addBoolean(data, 'blowOffOpen').caption('排污管线');
    var blowOffLine = [];
    blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-2, -3, 46], [-2, -3, -34]]));
    blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[0, -3, 46], [0, -3, -34]]));
    blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-61.736, -3, 4], [74.408, -3, 4]]));
    blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-61.736, -3, 2], [74.408, -3, 2]]));
    createInfo(blowOffLine[0], dataJson[1],[15.299, -1.5, 1.87]);
    blowOffOpen.on('change', function (ev) {
        blowOffLine.forEach(function (obj) {
            obj.visible = ev;
        })
    });

    //heatLine供热管线 color #FF7F24
    var heatOpen = controlPanel.addBoolean(data, 'heatOpen').caption('供热管线');
    var heatLine = [];
    heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-61.736, -2, 0], [65.736, -2, 0], [74.408, -2, -8]]));
    heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-61.736, -2, -2], [65.736, -2, -2], [74.408, -2, -10]]));
    heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-4, -2, 46], [-4, -2, -34]]));
    heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-6, -2, 46], [-6, -2, -34]]));
    createInfo(heatLine[0], dataJson[2],[-6.041, -1.817, 8.865]);
    heatOpen.on('change', function (ev) {
        heatLine.forEach(function (obj) {
            obj.visible = ev;
        })
    });

小结
这个取点坐标的方法在上文中没有告诉大家,只是因为我原来用的方法就比较傻了,我是自己写了一个全局的singleclick事件,触发之后打印出当前鼠标的pickedPosistion记录下来再写进数组中,这无疑的是很麻烦的操作。
其实ThingJS已经给我们写好了一个工具叫做拾取场景坐标,他的使用方式下面我会给大家贴几张图。整个代码100+行还是比较简洁了(作者能力有限,已经努力精简了下文可以给作者多提意见,虚心接受)。最后附上完整代码!

完整代码

//加载场景代码
var app = new THING.App({
    // 场景地址    "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Demo_地下管线",
    //背景设置    "skyBox": "BlueSky"});

app.on('load', function () {

    // init_camera 
    app.camera.flyTo({        'position': [-6.199233956799988, 49.47465259648085, 113.74453304853118],        'target': [-4.002967317456267, 26.055382001258867, 37.65111202780902],        'time': 2000,
    });


    //创建场景
    var controlPanel = new THING.widget.Panel({
        titleText: '地下管线Demo',
        hasTitle: true, // 是否有标题
        zIndex: 999, // 设置层级
    });
    var data = {
        totalOpen: false,
        viewOpen: false,
        waterOpen: false,
        blowOffOpen: false,
        heatOpen: false
    };

    //openTotal按钮控制
    var totalOpen = controlPanel.addBoolean(data, 'totalOpen').caption('状态切换');
    totalOpen.on('change', function (ev) {        if (ev) {
            //将campus下所有的obj的opacity = 0.4,将name = Uncorrelated 的obj的visiable = false
            app.query('Campus')[0].style.opacity = 0.3;
            app.query('Uncorrelated')[0].visible = false;
        } else {
            //反之初始化
            app.query('Campus')[0].style.opacity = 1;
            app.query('Uncorrelated')[0].visible = true;
        }
    });

    //viewOpen视角控制
    var viewOpen = controlPanel.addBoolean(data, 'viewOpen').caption('2D/3D');
    viewOpen.on('change', function (ev) {        if (ev) {
            app.camera.viewMode = THING.CameraView.TopView;
        } else {
            app.camera.viewMode = THING.CameraView.Normal;
            app.skyBox = 'BlueSky';
        }
    });

    //waterOpen供水管线 color #0000FF
    var waterOpen = controlPanel.addBoolean(data, 'waterOpen').caption('供水管线');
    
    
    var waterLine = [];
    
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[-61.736, -1.5, 10], [74.408, -1.5, 10]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[-61.736, -1.50, 8], [-16.126, -1.50, 8], [-16.126, -1.50, -20], [-10.126, -1.50, -20], [-10.126, -1.50, 8], [74.408, -1.5, 8]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[-61.736, -1.50, 12], [-45.001, -1.5, 15.755], [-20.736, -1.5, 12], [74.408, -1.5, 12]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[4, -1.5, 46], [4, -1.50, 13.809], [4, -2, 13.809], [4, -2, 6], [4, -1.50, 6], [4, -1.5, -34]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[6, -1.50, 46], [6, -1.50, 13.809], [6, -2, 13.809], [6, -2, 6], [6, -1.50, 6], [6, -1.5, -34]]));
    waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[8, -1.50, 46], [8, -1.50, 13.809], [8, -2, 13.809], [8, -2, 6], [8, -1.50, 6], [8, -1.5, -34]]));
    createInfo(waterLine[0], dataJson[0],[-28.847, 0, 7.957]);。
    waterOpen.on('change', function (ev) {
        waterLine.forEach(function (obj) {
            obj.visible = ev;
        })
    });


    //blowOffLine排污管线 color #FFEC8B
    var blowOffOpen = controlPanel.addBoolean(data, 'blowOffOpen').caption('排污管线');
    var blowOffLine = [];
    blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-2, -3, 46], [-2, -3, -34]]));
    blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[0, -3, 46], [0, -3, -34]]));
    blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-61.736, -3, 4], [74.408, -3, 4]]));
    blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-61.736, -3, 2], [74.408, -3, 2]]));
    createInfo(blowOffLine[0], dataJson[1],[15.299, 0, 1.87]);
    blowOffOpen.on('change', function (ev) {
        blowOffLine.forEach(function (obj) {
            obj.visible = ev;
        })
    });

    //heatLine供热管线 color #FF7F24
    var heatOpen = controlPanel.addBoolean(data, 'heatOpen').caption('供热管线');
    var heatLine = [];
    heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-61.736, -2, 0], [65.736, -2, 0], [74.408, -2, -8]]));
    heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-61.736, -2, -2], [65.736, -2, -2], [74.408, -2, -10]]));
    heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-4, -2, 46], [-4, -2, -34]]));
    heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-6, -2, 46], [-6, -2, -34]]));
    createInfo(heatLine[0], dataJson[2],[-6.041, 0, 8.865]);
    heatOpen.on('change', function (ev) {
        heatLine.forEach(function (obj) {
            obj.visible = ev;
        })
    });

});function createLine(name, image, points) {
    var line = null;
    line = app.create({        type: 'PolygonLine',
        name: name,
        points: points,
        image: image
    });
    line.renderOrder = -10000;
    line.scrollUV = true;
    line.visible = false;    return line;
}function createInfo(obj,json, position) {
    var panel = new THING.widget.Panel({
        template: 'default2',
        width: '200px',
        cornerType: 'polyline'
    })
    // panel.zIndex = -10000;
    panel.renderOrder = -1000;
    var dataObj = {
        name: ' ',
        id: json.id,
        starId: json.starId,
        stopId: json.stopId,
        starDeep: json.starDeep,
        stopDeep: json.stopDeep,
        material: json.material,
        pressure: json.pressure,
    }
    panel.addString(dataObj, 'name').caption(obj.name);
    panel.addString(dataObj, 'id').caption('管线编号');
    panel.addString(dataObj, 'starId').caption('起点编号');
    panel.addString(dataObj, 'stopId').caption('终点编号');
    panel.addString(dataObj, 'starDeep').caption('起点深度');
    panel.addString(dataObj, 'stopDeep').caption('终点深度');
    panel.addString(dataObj, 'material').caption('材料');
    panel.addString(dataObj, 'pressure').caption('压力');
    var uiAnchor = app.create({        type: 'UIAnchor',
        parent: obj,
        element: panel.domElement,
        position: [position[0], 0, position[2]],
        pivot: [-0.2, 2.1]
    });    return uiAnchor;
}

var dataJson = [{ 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' },
{ 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' },
{ 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' }];

        2018年由优锘科技携其主创团队开发的新一代物联网可视化PaaS平台ThingJS,使用当今热门易学的 Javascript 语言进行开发。不仅可以针对单栋或多栋建筑组成的园区场景进行可视化开发,搭载丰富插件后,也可以针对地图级别场景进行开发。广泛应用于数据中心、仓储、学校、医院、安防、预案等多种领域。拥有着卓越的眼光和优秀的物联网可视化技术,并且相比于three.js,unity,它的入门门槛极低,操作十分简单,极大的简化了开发难度、提升开发效率。

最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回