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

ChanceWong 发布于2019-08-23 14:58 / 983人阅读

摘要：根据不同的市政建设，管网分供水排污供暖通信电力等多种类别，其广泛分布遍及地下。随着城市发展建设所衍生出空间分布复杂，变化大，种类繁多等问题，可视化管理是未来发展最好的解决方案。

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

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" }];

GPU云服务器云服务器智慧城市可视化 3d可视化 3d数据可视化城市可视化管理系统

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101439.html

ThingJS物联网3D可视化平台——智慧城市的应用

摘要：说起物联网，大家的第一反应就是智慧城市。在物联网的帮助下，得以让我们居住的城市正变得越来越有智慧。作为面向物联网的可视化开发平台有广阔的行业应用场景。随着科技的发展，5G网络的到来，将开启万物即插即慧的新时代。这就是物联网，当网络不再是阻碍，万物互联，万物可视，把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。说起物联网，大家的第一反应就是智慧城市。在物联网的帮助下...

eccozhou 2019-08-23 16:53 评论0 收藏0
从“智能”楼宇到“智慧”楼宇—ThingJS助力“智慧”升级

摘要：智慧楼宇可视化系统是综合上述手段打造出的智慧楼宇可查可管可控的一体化可视平台。智能环境可视化展示楼宇内水电气冷风等的管线含流向及设备的空间分布。集成停车引导系统，高亮展示最佳停车位及到车位的最佳路线。智慧楼宇大势所趋，从智能到智慧，一字之差，它到底有多智慧？我们可以看一下智慧楼宇3D可视应用视频：https://v.qq.com/x/page/h0767... 基于ThingJS...

hqman 2019-08-23 17:01 评论0 收藏0
基于WebGL架构的3D可视化平台ThingJS—让粮仓“智慧”升级

摘要：随着信息化技术发展，全国各地开始智慧粮仓的建设，我们可以通过一个视频看一下使用可视化平台做的可视应用，可视一体化，让粮仓智慧升级。构建粮仓内粮情的监控预警诊断分析一体化的可视化平台。首先我们先了解一下基于WebGL架构的3D可视化平台——ThingJS是什么？ ThingJS是优锘科技开发的一套面向物联网应用的在线3D可视化应用开发及运营PaaS平台，以 ThingJS云视PaaS服...

aaron 2019-08-23 16:45 评论0 收藏0
基于WebGL架构（ThingJS）3D可视化平台—停车场管理系统

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

weij 2019-08-23 14:14 评论0 收藏0
阿里云携手优锘发布智慧园区可视化产品

摘要：峰会上，阿里云与优锘科技联合发布了智慧园区可视化产品。优锘科技受邀参加此次峰会，峰会上，阿里云与优锘科技联合发布了智慧园区可视化产品，并在物联网专场论坛构建四位一体的数字园区运营体系进行了专题分享。 2019年3月21日，2019阿里云峰会在北京国家会议中心如期举行。峰会上，阿里云与优锘科技联合发布了智慧园区可视化产品。本次峰会中，围绕十年再出发的主题，阿里云首次进行全面战略解读，并...

codeKK 2019-08-26 13:44 评论0 收藏0