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

黄飞鸿 2019-06-30

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

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' }];
黄飞鸿

黄飞鸿

相关推荐

Docker使用Portainer搭建可视化界面的方法

Portainer是Docker的图形化管理工具，提供状态显示面板、应用模板快速部署、容器镜像网络数据卷的基本操作、事件日志显示、容器控制台操作、Swarm集群和服务等集中管理和操作、登录用户管理和控制等功能。功能十分全面，基本能满足中小型单位对容器管理的

魅惑青花瓷 / 0评论 2020-11-11

用Python构建和可视化决策树

决策树是当今最强大的监督学习方法的组成部分。决策树基本上是一个二叉树的流程图，其中每个节点根据某个特征变量将一组观测值拆分。决策树的目标是将数据分成多个组，这样一个组中的每个元素都属于同一个类别。在这种情况下，树将进行拆分，使每个组的均方误差最小。决策树的

赶路人儿 / 0评论 2020-11-02

Sampler：Shell命令执行可视化和告警工具

Sampler是一个用于shell命令执行，可视化和告警的工具。其配置使用的是一个简单的YAML文件。为什么我需要它？你可以直接从终端对任意动态进程进行采样 – 观察数据库中的更改，监控MQ动态消息，触发部署脚本并在完成后获取通知。如果有一种方法可以使用s

liujianhua / 0评论 2020-10-22

JVM：可视化 JVM 故障处理工具

JConsole: 最古老的工具，早在 JDK 5 时期就已经存在的虚拟机监控工具。在 JDK 7 Update 40 时开始随 JDK 一起发布，后来 Java SE Advanced 产品线建立， Oracle 明确区分了 Oracle OpenJDK

Locksk / 0评论 2020-10-12

详解python实现可视化的MD5、sha256哈希加密小工具

本文主要介绍了详解python实现可视化的MD5、sha256哈希加密小工具，分享给大家，具体如下：。windowss.resizable#宽度可变，高度可变。label2=tk.Label.grid#生成结果固定label. T4 = tk.Label(

菜鸟 / 0评论 2020-09-14

谷歌开源NLP模型可视化工具LIT，模型训练不再「黑箱」

深度学习模型的训练就像是「黑箱操作」，知道输入是什么、输出是什么，但中间过程就像个黑匣子，这使得研究人员可能花费大量时间找出模型运行不正常的原因。假如有一款可视化的工具，能够帮助研究人员更好地理解模型行为，这应该是件非常棒的事。近日，Google 研究人员

yyhhlancelot / 0评论 2020-08-26

Python爬取数据并实现可视化代码解析

labels=[item[0] +'码'for item in lst_total] #使用列表生成式，得到饼图的标签。pit.rcParams['font.family']=['SimHei'] #单独的表格乱码的处理方式。#所涉及到的是requests

dayslrk / 0评论 2020-08-16

可视化监控大型集群，这一个工具就够了！

许多企业使用Kubernetes来快速发布新功能并提高服务的可靠性。Rancher使团队能够减少管理其云原生工作负载的操作成本——但获得这些环境的持续可见性可能是一个挑战。在这篇文章中，我们将探讨如何利用Rancher内置支持的Prometheus和Gra

MrFuWen / 0评论 2020-08-15

Python Selenium实现无可视化界面

有时候我们爬取网页数据，并不希望看其中的过程，只想看到最后的数据结果就可以了，这时候，***面就很有必要了！

letheashura / 0评论 2020-08-14

操作ElasticSearch插件和可视化工具 Kibana

当 ElasticSearch 的实例并运行，您可以使用 localhost:9200,基于 JSON 的 REST API 与ElasticSearch 进行通信。在 ElasticSearch 自己的文档中，所有示例都使用 curl。但是，当使用 AP

molong0 / 0评论 2020-08-06

漂亮又好用的Redis可视化客户端汇总

因为 Redis 官方只提供了命令行版的 Redis 客户端 redis-cli，以至于我们在使用的时候会比较麻烦，通常要输入一堆命令，而且命令行版的客户端看起来也不够直观，基于以上两个原因我们需要找一个可视化的 Redis 客户端，下面是我这些年使用过的

redis / 0评论 2020-08-02

6个优秀可视化Python库

对使用哪个可视化工具感到困惑?我为您分解了每个库的优缺点。如果您有一个等待可视化的DataFrame，应该选择哪一个?在某些情况下，某些库可能比其他库更好。到本文结尾，您应该能够区分每个库的不同功能，并可以更轻松地选择优秀库。一些库将可视化效果呈现为图像。

zlfing / 0评论 2020-07-27

使用可视化工具redis-desktop-manager管理查询缓存。

使用可视化工具redis-desktop-manager管理查询缓存。Redis的可视化管理工具有很多，分享一篇文章大家都可以手动去试试，几款开源的图形化Redis客户端管理软件推荐。点击windows平台“redis-desktop-manager-0.

guoyun0 / 0评论 2020-07-19

3.redis desktop manager--redis 可视化工具安装及使用

下载。安装。双击exe:. 3.连接。4.Redis Desktop Manager的使用。补充：

anglehearts / 0评论 2020-07-18

这款NLP神器火了！关键词提取、结果可视化，从小白进阶大神

如何快速优雅地处理你的NLP数据集？试试这款号称「从小白到大神」的Texthero的工具包。不仅编写界面友好美观，而且功能全面，预处理、表征、可视化样样精通，在Reddit上17个小时内就获得了近1.1k的热度。事实上，Texthero的优雅绝不仅仅在于界

yyhhlancelot / 0评论 2020-07-06

12个写论文必备的神经网络可视化工具

即将开播：6月19日，互联网银行架构师魏生谈互联网开放银行实施路径的探索与思考。本文介绍了了12个将神经网络画地更好看的工具。一个用于画卷积神经网络的Python脚本。使用latex 来展示神经网络

walegahaha / 0评论 2020-06-15

通过Flink+NBI可视化构建实时大数据分析系统

Flink主要特点：1、高吞吐、低延迟、纯流式架构；2、支持对乱序事件的处理；3、有状态、提供exactly-once计算；4、高度灵活的窗口机制；5、失败恢复、故障转移、水平扩展；6、批处理、流处理统一的APINBI大数据可视化：

Leonwey / 0评论 2020-06-11

智慧城市可视化管理平台设计分析

公司依靠BI工具出示的可视化大数据展开剖析评定，务求做到最好的商业服务管理决策。而云蛛系统作为数据可视化中的一员也是义不容辞，云蛛系统是蛛网时代历经2年自主研发出的一套数据可视化开发工具，经过市场检测以后大受好评。因而，云蛛系统是彻底自主可控的，拥有 很高

bingdata / 0评论 2020-06-09

工业互联网可视化系统风格的抉择：线框模式之 3D 数据中心机房的实现

3D 可视化，就是把复杂抽象的数据信息，以合适的视觉元素及视角去呈现，方便系统的展示、维护和管理。而在可视化系统的搭建选择上，所呈现的风格样式效果多种多样，各自所突出的适用场合也不尽相同。对于科技风格上的体现，线框模式可能是最具有代表性意义的实现方式之一。

wndong / 0评论 2020-06-04

linux安装docker以及可视化管理界面

You could try using --skip-broken to work around the problem. You could try running: rpm -Va --nofiles --nodigest. 切记切记。。。。。每行是有

TaoTaoFu / 0评论 2020-06-03

13个Mongodb GUI可视化管理工具，总有一款适合你

MongoDB数据库默认的管理工具是Shell命令行，对于专业的DBA来说比较容易上手，但是对于普通人员GUI可视化工具更方便使用。MongoDB官方提供了社区版的Compass，可以独立安装使用，也提供了云服务器版本MongoDB Atlas。商业版本的

fangxiaoji / 0评论 2020-05-31

QuickRedis 是一款 Redis 可视化管理工具

QuickRedis 是一款 Redis 可视化管理工具。它支持直连、哨兵、集群，支持亿万数量级的key，还有令人兴奋的UI。

fsl / 0评论 2020-05-26

智慧城市交通的要素：路口监管可视化系统的解决方案

交通作为城市发展的动脉，与人们下日常息息相关，而在这一系列的监管作用下，成为了一个“公安治安视频监控系统”，关乎人们日常的安全治安管理。城市交通的主要方式体现在城市道路、公交、轨道交通等设施上，但随着城市化进程的加快和经济社会发展的推动下，机动车保有量迅速

bktest / 0评论 2020-05-18

实战｜Python数据分析可视化并打包

大家好，关于Python数据分析的工具我们已经讲了很多了，相信一直关注的读者对于Pandas、NumPy、Matplotlib的各种操作一定不陌生，今天我们就用一份简单的数据来学习如何使用Python进行数据分析，本文主要涉及下面三个部分：。今天分享的案例

Cocainebai / 0评论 2020-05-14

12项工具使Kubernetes更易用：可视化、监视、命令行、多集群管理...

利用这些Kubernetes 工具的优势来改善监视，命令行操作，多集群管理等。Kubernetes已成为大规模部署容器化应用程序的标准方法。随着Kubernetes的发展壮大，毫无疑问，它的许多问题都将在项目内部得到驯服。但是有些用户并没有等着Kubern

zhangxxxww / 0评论 2020-05-13

12项工具使Kubernetes更易用：可视化、监视、命令行、多集群管理...

利用这些Kubernetes 工具的优势来改善监视，命令行操作，多集群管理等。Kubernetes已成为大规模部署容器化应用程序的标准方法。随着Kubernetes的发展壮大，毫无疑问，它的许多问题都将在项目内部得到驯服。但是有些用户并没有等着Kubern

85560694 / 0评论 2020-05-13

Docker安装Redis并介绍可视化客户端进行操作

Redis是使用ANSI C语言开发的基于Key-Value的高性能NoSQL数据库，在解决高并发、高可用等一系列问题中，它扮演着重要的角色。它的优势主要有：。本文将简单介绍如何通过Docker安装Redis，并简单使用与操作。建议配置成阿里云的镜像，速度

滴水穿石点石成金 / 0评论 2020-04-23

fprobe参数 -n -k

网络流量分析利器-可视化网络-netflow-基础原理 网络流量分析利器-可视化网络-netflow-Cisco NetFlow 工作原理介绍及配置 网络流量分析利器-可视化网络-netflow-netflow版本5和版本9区别 网络流量分析利器-可

onlykg / 0评论 2020-05-11

fprobe参数 -e

默认fprobe缓存300秒信息，如果使用sftp进行传输，ip和port都不改变的情况下，fprobe会汇总这个数据，直到300秒或者本次传输结束再把统计好的数据发送到接收器中。虽然对统计流量没什么影响，但是不能实时了解到流量。我们这里取一分钟为单位时间

Proudoffaith / 0评论 2020-05-11

03 JVisualVM(本地和远程可视化监控)

插件安装Tools>Plugins>Settings根据自身版本更新插件中心地址，各版本查询地址：。以上是本地的JAVA进程监控，还可以进行远程的监控，在上图左侧导航的 Applications 下的 Remote 处右击Add Remote

流量监控lookman / 0评论 2020-05-06

科学计算和可视化

NumPy 是 Python 语言的一个扩展程序库，支持大量的维度数组与矩阵运算，此外也针对数组运算提供大量的数学函数库。NumPy 通常与 SciPy和 Matplotlib（绘图库）一起使用， 这种组合广泛用于替代 MatLab，是一个强大的科学计算环

duanlove技术路途 / 0评论 2020-05-06

科学计算与可视化

NumPy 是 Python 语言的一个扩展程序库，支持大量的维度数组与矩阵运算，此外也针对数组运算提供大量的数学函数库。matplotlib是python上的一个2D绘图库，它可以在夸平台上边出很多高质量的图像。综旨就是让简单的事变得更简单，让复杂的事变

assastor / 0评论 2020-05-06

Python科学计算与可视化

numpy 是用于处理含有同种元素的多维数组运算的第三方库，支持N维数组运算、处理大型矩阵、成熟的广播函数库、矢量运算、线性代数、傅里叶变换、随机数生成，并可与C++/Fortran语言无缝结合。数组中所有元素的类型必须相同，数组中元素可以用整数索引，序号

举 / 0评论 2020-05-06

一位中国博士把整个CNN都给可视化了，每次卷积池化都清清楚楚

美国有线电视新闻网吗？每一个对AI抱有憧憬的小白，在开始的时候都会遇到CNN这个词。但每次，当小白们想了解CNN到底是怎么回事，为什么就能聪明的识别人脸、听辨声音的时候，就懵了，只好理解为玄学：。这个名叫CNN解释器在线交互可视化工具，把CNN拆开了揉碎了

玉来愈宏的随笔 / 0评论 2020-05-02

Docker安装Redis并介绍漂亮的可视化客户端进行操作

Redis是使用ANSI C语言开发的基于Key-Value的高性能NoSQL数据库，在解决高并发、高可用等一系列问题中，它扮演着重要的角色。它的优势主要有：。本文将简单介绍如何通过Docker安装Redis，并简单使用与操作。建议配置成阿里云的镜像，速度

wangxiaoxue / 0评论 2020-04-21

揭开黑盒一角！OpenAI发布“显微镜”，可视化神经网络内部结构

本文转自雷锋网，如需转载请至雷锋网官网申请授权。躺尸接近三个月的OpenAI博客终于有了更新，这次它为AI研究者带来的作品是“OpenAI Microscope”，中文译名OpenAI 显微镜。意为可以像实验室中的显微镜一样工作，帮助AI研究人员更好地理解

86357811 / 0评论 2020-04-15

Docker Swarm（十）Portainer 集群可视化管理

搭建好我们的容器编排集群，那我们总不能日常的时候也在命令行进行操作，所以我们需要使用到一些可视化的工具，Docker图形化管理提供了很多工具，有Portainer、Docker UI、Shipyard等等，本文主要介绍Portainer。Portainer

kuzilala / 0评论 2020-03-06

全国疫情统计可视化（图表）

sql = "select sum,sum,sum,sum from info where Date like ‘". sql = "select * from info where Date like ‘"+dat

sailxu00 / 0评论 2020-03-06

网络流量分析利器-可视化网络-netflow【1】-基础原理

网络流量分析利器-可视化网络-netflow-基础原理 网络流量分析利器-可视化网络-netflow-Cisco NetFlow 工作原理介绍及配置 网络流量分析利器-可视化网络-netflow-netflow版本5和版本9区别 网络流量分析利器-可

hongsheyoumo / 0评论 2020-03-01

Python的可视化库超全盘点，有你中意的一款吗？

使用Python创建图形的方法有很多，但是哪种方法最好呢?当我们进行可视化时，问一些关于图形目标的问题是很重要的:您是否试图对数据的外观有一个初步的感觉?也许你是想在演示中给人留下深刻印象?在这篇文章中，我将介绍一些流行的Python可视化包，它们的优缺点

chaigang / 0评论 2020-02-29

Elasticsearch 可视化管理工具

ES和Solr是2个比较常见的搜索引擎，但是Solr有控制台页面,ES就没有自带的，下面就推荐2个毕竟使用的工具。ElasticHD 支持 ES监控、实时搜索、Index template快捷替换修改、索引列表信息查看， SQL converts to D

心丨悦 / 0评论 2020-02-22

【Python可视化】超详细Pyecharts 1.x教程，让你的图表动起来～

pyecharts 是一个用于生成 Echarts 图表的Python库。Echarts是百度开源的一个数据可视化 JS 库，可以生成一些非常酷炫的图表。当然如果你更习惯使用0.5X版本的可以通过如下语句来进行安装：pip install pyechart

meylovezn / 0评论 2020-02-19

visualization of filters keras 基于Keras的卷积神经网络（CNN）可视化

It is well known that convolutional neural networks have been the source of many major breakthroughs in the field of Deep learn

hnyzyty / 0评论 2020-02-15

北京市民信件大数据简单分析可视化（附加源码） 同含爬虫代码

含有最简单的页面ajax 申请数据库数据，echarts显示

spb / 0评论 2020-01-31

基于Bootstrap和jQuery的可视化页面布局程序

但源网站使用起来有一些bug, 于是基于原网站程序作了一下如下优化:. 增加HTML5的localStorage本地化储存功能, 关闭网页重新打开能恢复之前的编辑界面。增加"撤销/重做" 操作。增加IE的兼容处理。修复iOS设备上的可用

zh000 / 0评论 2013-05-10

C# WPF 嵌入网页版WebGL油田三维可视化监控

最近做的一个项目，是一个油田三维可视化监控的场景编辑和监控的系统，和三维组态有些类似，不过主要用于油田上。效果如下图所示：。首先当然是上模型，设计人员跟进。一切进展的都很顺利。直到客户说，我们有一个WPF开发的桌面端程序，我们需要把你们的三维嵌入到桌面端。

teliduxing0 / 0评论 2020-01-14

C# WPF 嵌入网页版WebGL油田三维可视化监控

最近做的一个项目，是一个油田三维可视化监控的场景编辑和监控的系统，和三维组态有些类似，不过主要用于油田上。效果如下图所示：。首先当然是上模型，设计人员跟进。一切进展的都很顺利。直到客户说，我们有一个WPF开发的桌面端程序，我们需要把你们的三维嵌入到桌面端。

ixshells / 0评论 2020-01-14

python的matplotlib的热门可视化动图

[‘India‘, ‘Europe‘, ‘Asia‘, ‘Latin America‘,‘Middle East‘, ‘North America‘, ‘Africa‘],[‘#adb0ff‘, ‘#ffb3ff‘, ‘#90d595‘, ‘#e48381

Laozizuiku / 0评论 2020-01-13

docker可视化工具

介绍两款Docker可视化工具

一一空 / 0评论 2020-01-13

RocketMQ的集群部署以及可视化监控界面

RocketMQ is a distributed messaging and streaming platform with low latency, high performance and reliability, trillion-level ca

LCFlxfldy / 0评论 2020-01-12