HTML Canvas 机房温度云图参考手册

     在物联网的大趋势下,机房的设备信息以及一些环境信息变成了数据摆在了人们面前。在这个大数据的时代，数据的可视化不仅体现在数据值本身，更应该通过数据的变化来获取一些信息。我们今天的主题，机房温度云图，它通过不同的颜色来展示机房机柜温度的高低及变化，将之形象化出来，让人们更加直观的观察温度值的变化。

    下图是我借助 heatmap.js 热力图和 HTML5 Canvas 实现的机房温度云图，这里只是模拟的一个温度值，相信有了更加真实的数据，它会变得更加炫丽。

（点击上图展示3D影像效果）

实现过程

现在让我们来一层一层揭开它的实现过程。

可以看到温度云图有个动态的改变，这里只是加了一个定时器来随机的改变温度值。

温度传感器放置在机柜间的隔层中，通过获取他们在场景中的位置点坐标和相对应的温度云图六面体（下边会讲到）的位置点坐标，用后者减去前者即得到温度点在平面云图中的坐标点位置。

（点击上图展示3D影像效果）

通过 heatmap._renderer.canvas 我们取得温度云图的 canvas，并使用 HT for Web 的 ht.Default.setImage('hm-floor1', heatmap1._renderer.canvas) 将其注册成矢量图片。

从一个简单的 3D 机房场景到拥有了可以展示温度变化的温度云图，让整个场景动了起来，还有更多有趣的东西可以加进来，让整个场景变得更加丰富，期待您和中国云一起创造新的改变。

2020年8月份，联通廊坊数据中心负责人通过网络了解到中国云是一家云数据监控系统平台，并表示联通廊坊数据中心需要定制200台主机，10000套温湿度传感器，而且第一批1300套需要在12月底完成交付。

中国联通廊坊数据中心位于廊坊经济技术开发区，是京津冀经济圈、环渤海经济圈的中心，地理位置优越，距离北京40公里。

建筑面积：合计约800亩，廊坊数据中心共11栋数据中心机房楼，总机架数：可提供总机架数42768架，出口带宽：1200G，直连CHINA169，同时具备上联省网路由，PUE值<1.5。联通廊坊数据中心负责人在联系了多家机房监控公司无果之后，找到财富公司，希望中国云能接下这个紧急的单子（此时正值疫情期间）。

重新设计产品，批量生产，还要在这么短的时间内完成，在行业内几乎是不可能完成的事情，但是个性化定制，小批量生产正是迈世的核心实力。在经过与设备厂几次沟通后，结合实际情况，决定接下接下这个看似不可能完成的任务。

在双方不断的沟通下，需求变得清晰可见，也伴随着新的一款温湿度产品的诞生，我们命名为 CL-OM-THB800，以下是这款温湿度产品的参数：

财富始终以稳定的产品和优质的服务去打动每一个客户。中国云机房监控系统—HTML5 Canvas 的机房温度云图，由财富·中国云打造。与设备厂家联合研发制造产品，出厂价格保证您的利润空间，采用完全的网络营销模式，运营成本低于同行业，把利润留给客户，与政府部门和多家家上市公司，近千家集成商共同见证了我们的机房监控产品。

每个行业都需要一朵自己的云

已经完成的项目：

1、太平洋电信（天津数据中心）

2、天津市大数据管理中心（机房）

3、天津大数据集团（数据机房）

4、雄安新区（大数据中心）

正在建设的项目：

1、兰州市大数据产业园（鲲鹏园区）

2、雅安经开区大数据中心

3、山西“天河二号”省级超算中心

中国云+由财富（天津）互联网科技有限公司提供技术支持。

合作伙伴：百度云、阿里云、华为云、腾讯云…