基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化

栏目: 编程工具 · 发布时间: 5年前

内容简介：前言城市管网是城市最重要的公共基础设施之一，与城市的发展和居民日常生活息息相关。根据不同的市政建设，管网分供水、排污、供暖、通信、电力等多种类别，其广泛分布遍及地下。随着城市发展建设所衍生出空间分布复杂，变化大，种类繁多等问题，可视化管理是未来发展最好的解决方案。

前言

城市管网是城市最重要的公共基础设施之一，与城市的发展和居民日常生活息息相关。根据不同的市政建设，管网分供水、排污、供暖、通信、电力等多种类别，其广泛分布遍及地下。随着城市发展建设所衍生出空间分布复杂，变化大，种类繁多等问题，可视化管理是未来发展最好的解决方案。

Demo预览

基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化

基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化

基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化

基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化

实现

第一步，加载场景

//加载场景代码
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+行还是比较简洁了（作者能力有限，已经努力精简了下文可以给作者多提意见，虚心接受）。最后附上完整代码！

基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化

基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化

完整代码

//加载场景代码
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' }];

以上所述就是小编给大家介绍的《基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
操作系统

操作系统

William Stallings / 陈向群、陈渝 / 机械工业出版社 / 2010.9 / 69.00元

本书不仅全面地讲述了操作系统的基本概念、原理和方法，还清楚地展现了当代操作系统的本质和特点。作者针对近几年操作系统领域的最新变化，对操作系统的设计原理进行深入的阐述，同时将其对操作系统整个领域全面而深入的理解呈现给读者。 本书特色 ·选择Windows Vista、UNIX和Linux三个操作系统作为示例，以帮助读者熟悉当代操作系统的设计原理和实现问题。 ·新增嵌入式操作系统一章......一起来看看 《操作系统》 这本书的介绍吧!

码农工具
XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3