基于 HTML5 的机房温度云图动态 Canvas 展示

 1 var values = [50, 60, 70, 80, 90, 100];
 2 var timer1 = setInterval(function() {
 3 　　var points = [];
 4 　　// 获取场景中 3 个温度传感器的位置，设置模拟的温度值
 5 　　for(var i = 1; i < 4; i++) {
 6 　　　　var tag = ‘at‘ + i;
 7 　　　　data = dataModel.getDataByTag(tag);
 8 　　　　var index = Math.floor(Math.random() * 6);
 9 　　　　if (data) {
10 　　　　　　// 设置温度点位置
11 　　　　　　points.push({
12 　　　　　　　　x: data.p3()[0] - floor1Position[0],
13 　　　　　　　　y: data.p3()[2] - floor1Position[2],
14 　　　　　　　　value: values[index]
15 　　　　　　});
16 　　　　}
17 　　}
18 　　// 通过设置温度点信息，来绘制温度云图
19 　　heatmap1.setData({ data: points, max: 100, min: 0 });
20 　　g3d.invalidateData(floor1);
21 }, 2000);

 1 // 创建一张温度云图
 2 heatmap1 = createHeatMap(930, 820);
 3 ht.Default.setImage(‘hm-floor1‘, heatmap1._renderer.canvas);
 4 var floor1 = dataModel.getDataByTag(‘floor1‘);
 5 floor1Position = floor1.p3();
 6 floor1.s({
 7 　　‘top.image‘: ‘hm-floor1‘
 8 });
 9 
10 // 温度云图的生成函数
11 function createHeatMap(width, height) {
12 　　heatmap = h337.create({
13 　　　　width: width,
14 　　　　height: height,
15 　　　　radius: 450,
16 　　　　maxOpacity: 1,
17 　　　　minOpacity: 0
18 　　});
19 　　heatmap._renderer.canvas.dynamic = true;
20 　　return heatmap;
21 }