高德地图热力图问题之重复创建图层

前言：

最近这半年新到了一家公司，现在主要在做大屏可视化和小程序这块的业务，最近接到了一个大屏需求，需要用到热力图展示快递揽件的相关数据，一开始想着是用Echarts自带的热力图，去实现，但是领导说我们之前的地图全部是用高德地图去做的，因此被迫营业，开始去学习高德地图API，先把热力图的相关链接给大家安排上有关图层方法的介绍，热力图的案例
由于当时时间紧张，自己也就没有太去注意一些细节问题

问题介绍：

基本功能均已实现，就是一张中国地图上显示各个省份的订单数据，由于屏幕涉及公司项目，我就不在这里做截图展示，主要问题是，我们热力图上的数据每隔3分钟要刷新一次，我在实现这个功能之后，领导发现，热力图的颜色会在一段时间之后持续变深

主要代码实现：

        //热力图订单数据
        get_expressInfo(){
            var that = this;
            // 这里的接口地址是个伪地址
            axios.get('/api/express/getData').then(res=> {
                var data = res.data.data;
                that. expressInfo = data.expressInfo;
                that.drwaHeatmap(that.expressInfo);
            })
        },
        //绘制热力图
        drwaHeatmap(heatMapData) {
            var that = this;
            that.map.plugin(["AMap.Heatmap"], function() {
            	// 初始化heatmap对象
            	that.heatmap = new AMap.Heatmap(that.map, {
                    radius: 20, // 给定半径
                    opacity: [0, 0.8],
                    gradient: {
                        0.5: "blue",
                        0.65: "rgb(117,211,248)",
                        0.7: "rgb(0, 255, 0)",
                        0.9: "#ffea00",
                        1.0: "red"
                    }
                });
                that.heatmap.setDataSet({
                    data: heatMapData
                });
            });
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

定时器

setInterval(function() {
	that.get_expressInfo()
},180000);
1
2
3

心理路程：

一：得知这个bug之后，第一时间是去测试环境复现这一问题，然后我就觉得是数据的问题，随着定时器的刷新，可能我的expressInfo中的数据发生了变化，这里做下说明：expressInfo是一个数组，数组中有若干个object类型的item，这个object有三个属性count：数值，lat：纬度，lng：经度，我怀疑是每次的负值，改动了count，在drwaHeatmap方法中的第一行打断点调试，发现不是
二：然后，我就觉得很有可能是我每一次定时器都会重新绘画一次热力图，然后把每一次都是在上一次的基础上去进行描绘，导致了颜色加深，这次想法是正确的，按照这个逻辑我直接简单粗暴的给axios请求前加了如下一行代码

that.drwaHeatmap([]);
1

完美，perfect，我特娘的真是个天才，哈哈
这样是解决了颜色加深的问题，因为每次我都绘制了一个空的热力图，给领导汇报一下吧
三：领导不死心，看了API，想找一个类似于echarts中的resize和小程序中的reset方法，结果很遗憾，API中没有，然后他又通过控制台从vue实例中找到了heatmap这个对象：在控制台输入vm.heatmap，回车可以看到它的属性和方法，还是没有，然后他想直接清除图层也没成功，此时，他想起了我之前做的另外一张大屏，出现的问题，就是循环重复添加，与这个问题类似，然后指出了我的问题，三分钟创建一张图层，如果这个屏幕保持一个月常亮，那么会创建我也不知道多少个图层，就直接卡死，大家不要觉得领导怎么怎么，在这里向领导表示感谢，我在这里半年的时间学到了很多东西，哦，对了，领导是个后端，很厉害，也很负责
四：后来，看了一下我的代码，我每次定时器调用get_expressInfo时候都会同步调用一次绘制热力图方法，然后就会新建一个图层，其实我只需要加一个判断，有heatmap时，我就不创建图层，直接调用setDataSet就可以了，也就是加一个如下代码：

if (that.heatmap == null || !that.heatmap) {
     that.heatmap = new AMap.Heatmap(that.map, {
          radius: 20, // 给定半径
          opacity: [0, 0.8],
          gradient: {
               0.5: "blue",
               0.65: "rgb(117,211,248)",
               0.7: "rgb(0, 255, 0)",
               0.9: "#ffea00",
               1.0: "red"
          }
      });
}
1
2
3
4
5
6
7
8
9
10
11
12
13