基于WebGL架構的ThingJS可視化平臺—城市地下管線3D可視化

ChanceWong 發布于2019-08-23 14:58 / 760人閱讀

摘要：根據不同的市政建設，管網分供水排污供暖通信電力等多種類別，其廣泛分布遍及地下。隨著城市發展建設所衍生出空間分布復雜，變化大，種類繁多等問題，可視化管理是未來發展最好的解決方案。

前言
城市管網是城市最重要的公共基礎設施之一，與城市的發展和居民日常生活息息相關。根據不同的市政建設，管網分供水、排污、供暖、通信、電力等多種類別，其廣泛分布遍及地下。隨著城市發展建設所衍生出空間分布復雜，變化大，種類繁多等問題，可視化管理是未來發展最好的解決方案。

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數據可視化城市可視化管理系統

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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