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

最新推荐文章于 2024-08-14 17:22:45 发布

_Ginkgo

最新推荐文章于 2024-08-14 17:22:45 发布

阅读量2.4k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/nioooom/article/details/86626687

版权

本文介绍了一种基于WebGL的城市地下管线3D可视化解决方案。通过加载场景、创建管线及信息面板，实现复杂管网的高效管理。利用PolygonLine类型创建管线，并通过设置renderOrder属性实现管线的隐藏与显示。同时，文章提到ThingJS提供的拾取场景坐标工具，简化了取点坐标操作，使得整体代码更加简洁。

摘要由CSDN通过智能技术生成

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

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')