當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/3/12 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了基于WebGL架构的3D可视化平台—城市地下管线3D可视化小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

Demo預覽

實現

第一步，加載場景

//加載場景代碼 var app = new THING.App({// 場景地址"url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Demo_地下管線",//背景設置"skyBox": "BlueSky" });

第二步，創建管線以及創建管線信息面板。這里PolygonLine這種類型我們在之前的Demo中使用過沒看過的同學可以點進去看一下，當然那篇比較糙還是沒有這篇好看的，可以兩篇對比一下效果，文章地址。這里這個renderOrder屬性劃重點，這里將line的visible屬性設置為false，當場景加載完成后我們的管線就已經創建好了為了能更好的配合我們的面板所以給他先隱藏掉了，等到開關觸發再對他進行展示。

第三步，創建功能面板以及創建各種類管線。

//管線的模擬數據 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 = falseapp.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 #0000FFvar 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 #FFEC8Bvar 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 #FF7F24var 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 = falseapp.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 #0000FFvar 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 #FFEC8Bvar 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 #FF7F24var 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架构的3D可视化平台—城市地下管线3D可视化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：我用Python逆向登录世界上最大的游戏
下一篇： Java引用界的四大天王