ThingStudio森工厂开发者社区

发帖
分享
查看: 4682|回复: 0

[发布] 物联网可视化行业应用 智慧城市地下管线3D可视化

[复制链接]

物联网可视化行业应用 智慧城市地下管线3D可视化

发表于 2019-9-29 11:48:58 来自 发布 阅读模式 倒序浏览
zzv_icon4682 zzr_icon0 查看全部


在物联网不断发展的情况下，物联网可视化也成为了越来越多的企业的追求，腾讯的滨海大厦-智慧楼宇可视化应用、阿里的杭州临平智慧文化艺术长廊-数字孪生智慧建筑IBV，除了这些bat企业，还有其他企业也在使用ThingJS搭建属于自己的三维可视化应用，而管网也是城市最重要的公共基础设施之一，与城市的发展和居民日常生活息息相关。根据不同的市政建设，管网分供水、排污、供暖、通信、电力等多种类别，其广泛分布遍及地下。随着城市发展建设所衍生出空间分布复杂，变化大，种类繁多等问题，可视化管理是未来发展最好的解决方案。

Demo预览

物联网可视化行业应用 智慧城市地下管线3D可视化


实现

第一步，加载场景

  1. //加载场景代码var app = new THING.App({ // 场景地址
  2. "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Demo_地下管线", //背景设置
  3. "skyBox": "BlueSky"});
复制代码

第二步，创建管线以及创建管线信息面板。这里PolygonLine这种类型我们在之前的Demo中使用过没看过的同学可以点进去看一下，当然那篇比较糙还是没有这篇好看的，可以两篇对比一下效果，文章地址。这里这个renderOrder属性划重点，这里将line的visible属性设置为false，当场景加载完成后我们的管线就已经创建好了为了能更好的配合我们的面板所以给他先隐藏掉了，等到开关触发再对他进行展示。

  1. function createLine(name, color, points) { var line = null;
  2. line = app.create({
  3. type: 'PolygonLine',
  4. name: name,
  5. points: points,
  6. style: {
  7. color: color,
  8. },
  9. });
  10. line.renderOrder = -10000;
  11. line.scrollUV = true;
  12. line.visible = false; return line;
  13. }function createInfo(obj, position) { var panel = new THING.widget.Panel({
  14. template: 'default2',
  15. width: '120px',
  16. cornerType: 'polyline'
  17. }) var dataObj = {
  18. name: obj.name,
  19. color: obj.style.color
  20. }
  21. panel.addString(dataObj, 'name').caption('名称');
  22. panel.addString(dataObj, 'color').caption('颜色'); var uiAnchor = app.create({
  23. type: 'UIAnchor', parent: obj,
  24. element: panel.domElement,
  25. position: [position[0], -1, position[2]],
  26. pivot: [-0.2, 2.1]
  27. }); return uiAnchor;
  28. }
复制代码

第三步，创建功能面板以及创建各种类管线。

  1. //管线的模拟数据var dataJson = [{ 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' },
  2. { 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' },
  3. { 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' }];
复制代码
  1. app.on('load', function () {
  3. // init_camera
  4. app.camera.flyTo({ 'position': [-6.199233956799988, 49.47465259648085, 113.74453304853118], 'target': [-4.002967317456267, 26.055382001258867, 37.65111202780902], 'time': 2000,
  5. });
  8. //创建场景
  9. var controlPanel = new THING.widget.Panel({
  10. titleText: '地下管线Demo',
  11. hasTitle: true, // 是否有标题
  12. zIndex: 999, // 设置层级
  13. });
  14. var data = {
  15. totalOpen: false,
  16. viewOpen: false,
  17. waterOpen: false,
  18. blowOffOpen: false,
  19. heatOpen: false
  20. };
  22. //openTotal按钮控制
  23. var totalOpen = controlPanel.addBoolean(data, 'totalOpen').caption('状态切换');
  24. totalOpen.on('change', function (ev) { if (ev) {
  25. //将campus下所有的obj的opacity = 0.4，将name = Uncorrelated 的obj的visiable = false
  26. app.query('Campus')[0].style.opacity = 0.3;
  27. app.query('Uncorrelated')[0].visible = false;
  28. } else {
  29. //反之初始化
  30. app.query('Campus')[0].style.opacity = 1;
  31. app.query('Uncorrelated')[0].visible = true;
  32. }
  33. });
  35. //viewOpen视角控制
  36. var viewOpen = controlPanel.addBoolean(data, 'viewOpen').caption('2D/3D');
  37. viewOpen.on('change', function (ev) { if (ev) {
  38. app.camera.viewMode = THING.CameraView.TopView;
  39. } else {
  40. app.camera.viewMode = THING.CameraView.Normal;
  41. app.skyBox = 'BlueSky';
  42. }
  43. });
  45. //waterOpen供水管线 color #0000FF
  46. var waterOpen = controlPanel.addBoolean(data, 'waterOpen').caption('供水管线');
  47. var waterLine = [];
  48. waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[-61.736, -1.5, 10], [74.408, -1.5, 10]]));
  49. 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]]));
  50. 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]]));
  51. 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]]));
  52. 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]]));
  53. 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]]));
  54. createInfo(waterLine[0], dataJson[0],[-28.847, -1.5, 7.957]);
  55. waterOpen.on('change', function (ev) {
  56. waterLine.forEach(function (obj) {
  57. obj.visible = ev;
  58. })
  59. });
  62. //blowOffLine排污管线 color #FFEC8B
  63. var blowOffOpen = controlPanel.addBoolean(data, 'blowOffOpen').caption('排污管线');
  64. var blowOffLine = [];
  65. blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-2, -3, 46], [-2, -3, -34]]));
  66. blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[0, -3, 46], [0, -3, -34]]));
  67. blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-61.736, -3, 4], [74.408, -3, 4]]));
  68. blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-61.736, -3, 2], [74.408, -3, 2]]));
  69. createInfo(blowOffLine[0], dataJson[1],[15.299, -1.5, 1.87]);
  70. blowOffOpen.on('change', function (ev) {
  71. blowOffLine.forEach(function (obj) {
  72. obj.visible = ev;
  73. })
  74. });
  76. //heatLine供热管线 color #FF7F24
  77. var heatOpen = controlPanel.addBoolean(data, 'heatOpen').caption('供热管线');
  78. var heatLine = [];
  79. heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-61.736, -2, 0], [65.736, -2, 0], [74.408, -2, -8]]));
  80. heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-61.736, -2, -2], [65.736, -2, -2], [74.408, -2, -10]]));
  81. heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-4, -2, 46], [-4, -2, -34]]));
  82. heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-6, -2, 46], [-6, -2, -34]]));
  83. createInfo(heatLine[0], dataJson[2],[-6.041, -1.817, 8.865]);
  84. heatOpen.on('change', function (ev) {
  85. heatLine.forEach(function (obj) {
  86. obj.visible = ev;
  87. })
  88. });
复制代码

小结
这个取点坐标的方法在上文中没有告诉大家，只是因为我原来用的方法就比较傻了，我是自己写了一个全局的singleclick事件，触发之后打印出当前鼠标的pickedPosistion记录下来再写进数组中，这无疑的是很麻烦的操作。
其实ThingJS已经给我们写好了一个工具叫做拾取场景坐标，他的使用方式下面我会给大家贴几张图。整个代码100+行还是比较简洁了（作者能力有限，已经努力精简了下文可以给作者多提意见，虚心接受）。最后附上完整代码！

完整代码

  1. //加载场景代码
  2. var app = new THING.App({
  3. // 场景地址 "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/Demo_地下管线",
  4. //背景设置 "skyBox": "BlueSky"});
  6. app.on('load', function () {
  8. // init_camera
  9. app.camera.flyTo({ 'position': [-6.199233956799988, 49.47465259648085, 113.74453304853118], 'target': [-4.002967317456267, 26.055382001258867, 37.65111202780902], 'time': 2000,
  10. });
  13. //创建场景
  14. var controlPanel = new THING.widget.Panel({
  15. titleText: '地下管线Demo',
  16. hasTitle: true, // 是否有标题
  17. zIndex: 999, // 设置层级
  18. });
  19. var data = {
  20. totalOpen: false,
  21. viewOpen: false,
  22. waterOpen: false,
  23. blowOffOpen: false,
  24. heatOpen: false
  25. };
  27. //openTotal按钮控制
  28. var totalOpen = controlPanel.addBoolean(data, 'totalOpen').caption('状态切换');
  29. totalOpen.on('change', function (ev) { if (ev) {
  30. //将campus下所有的obj的opacity = 0.4，将name = Uncorrelated 的obj的visiable = false
  31. app.query('Campus')[0].style.opacity = 0.3;
  32. app.query('Uncorrelated')[0].visible = false;
  33. } else {
  34. //反之初始化
  35. app.query('Campus')[0].style.opacity = 1;
  36. app.query('Uncorrelated')[0].visible = true;
  37. }
  38. });
  40. //viewOpen视角控制
  41. var viewOpen = controlPanel.addBoolean(data, 'viewOpen').caption('2D/3D');
  42. viewOpen.on('change', function (ev) { if (ev) {
  43. app.camera.viewMode = THING.CameraView.TopView;
  44. } else {
  45. app.camera.viewMode = THING.CameraView.Normal;
  46. app.skyBox = 'BlueSky';
  47. }
  48. });
  50. //waterOpen供水管线 color #0000FF
  51. var waterOpen = controlPanel.addBoolean(data, 'waterOpen').caption('供水管线');
  54. var waterLine = [];
  56. waterLine.push(createLine('供水管线', 'https://thingjs.com/static/images/poly_line_04.png', [[-61.736, -1.5, 10], [74.408, -1.5, 10]]));
  57. 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]]));
  58. 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]]));
  59. 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]]));
  60. 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]]));
  61. 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]]));
  62. createInfo(waterLine[0], dataJson[0],[-28.847, 0, 7.957]);。
  63. waterOpen.on('change', function (ev) {
  64. waterLine.forEach(function (obj) {
  65. obj.visible = ev;
  66. })
  67. });
  70. //blowOffLine排污管线 color #FFEC8B
  71. var blowOffOpen = controlPanel.addBoolean(data, 'blowOffOpen').caption('排污管线');
  72. var blowOffLine = [];
  73. blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-2, -3, 46], [-2, -3, -34]]));
  74. blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[0, -3, 46], [0, -3, -34]]));
  75. blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-61.736, -3, 4], [74.408, -3, 4]]));
  76. blowOffLine.push(createLine('排污管线', 'https://thingjs.com/static/images/poly_line_03.png', [[-61.736, -3, 2], [74.408, -3, 2]]));
  77. createInfo(blowOffLine[0], dataJson[1],[15.299, 0, 1.87]);
  78. blowOffOpen.on('change', function (ev) {
  79. blowOffLine.forEach(function (obj) {
  80. obj.visible = ev;
  81. })
  82. });
  84. //heatLine供热管线 color #FF7F24
  85. var heatOpen = controlPanel.addBoolean(data, 'heatOpen').caption('供热管线');
  86. var heatLine = [];
  87. heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-61.736, -2, 0], [65.736, -2, 0], [74.408, -2, -8]]));
  88. heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-61.736, -2, -2], [65.736, -2, -2], [74.408, -2, -10]]));
  89. heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-4, -2, 46], [-4, -2, -34]]));
  90. heatLine.push(createLine('供热管线', 'https://thingjs.com/static/images/poly_line_02.png', [[-6, -2, 46], [-6, -2, -34]]));
  91. createInfo(heatLine[0], dataJson[2],[-6.041, 0, 8.865]);
  92. heatOpen.on('change', function (ev) {
  93. heatLine.forEach(function (obj) {
  94. obj.visible = ev;
  95. })
  96. });
  98. });function createLine(name, image, points) {
  99. var line = null;
  100. line = app.create({ type: 'PolygonLine',
  101. name: name,
  102. points: points,
  103. image: image
  104. });
  105. line.renderOrder = -10000;
  106. line.scrollUV = true;
  107. line.visible = false; return line;
  108. }function createInfo(obj,json, position) {
  109. var panel = new THING.widget.Panel({
  110. template: 'default2',
  111. width: '200px',
  112. cornerType: 'polyline'
  113. })
  114. // panel.zIndex = -10000;
  115. panel.renderOrder = -1000;
  116. var dataObj = {
  117. name: ' ',
  118. id: json.id,
  119. starId: json.starId,
  120. stopId: json.stopId,
  121. starDeep: json.starDeep,
  122. stopDeep: json.stopDeep,
  123. material: json.material,
  124. pressure: json.pressure,
  125. }
  126. panel.addString(dataObj, 'name').caption(obj.name);
  127. panel.addString(dataObj, 'id').caption('管线编号');
  128. panel.addString(dataObj, 'starId').caption('起点编号');
  129. panel.addString(dataObj, 'stopId').caption('终点编号');
  130. panel.addString(dataObj, 'starDeep').caption('起点深度');
  131. panel.addString(dataObj, 'stopDeep').caption('终点深度');
  132. panel.addString(dataObj, 'material').caption('材料');
  133. panel.addString(dataObj, 'pressure').caption('压力');
  134. var uiAnchor = app.create({ type: 'UIAnchor',
  135. parent: obj,
  136. element: panel.domElement,
  137. position: [position[0], 0, position[2]],
  138. pivot: [-0.2, 2.1]
  139. }); return uiAnchor;
  140. }
  142. var dataJson = [{ 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' },
  143. { 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' },
  144. { 'id': 'BJ002', 'starId': '2TAG001', 'stopId': '2TAG002', 'starDeep': '-1.5', 'stopDeep': '-1.5', 'material': 'ASTNX01', 'pressure': '120' }];
复制代码

2018年由优锘科技携其主创团队开发的新一代物联网可视化开发平台ThingJS，使用当今热门易学的 Javascript 语言进行开发。不仅可以针对单栋或多栋建筑组成的园区场景进行可视化开发，搭载丰富插件后，也可以针对地图级别场景进行开发。广泛应用于数据中心、仓储、学校、医院、安防、预案等多种领域。拥有着卓越的眼光和优秀的物联网可视化技术，并且相比于three.js，unity，它的入门门槛极低，操作十分简单，极大的简化了开发难度、提升开发效率。

物联网, 联网, 可视, 可视化, 行业

相关帖子
回复

举报

avatar
游客~
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

avatar
zzzzzker

注册会员

  • 主题

    84

  • 帖子

    102

  • 粉丝

    0

关注 发私信
Ta的新帖
130700ppkpl8x3t7tt1b1t

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4