百度地图实现热力图的添加、移除

效果：

需求：实现热力图和医院点图叠加显示

 watch: {
    selectMapKeys: { // 监听选中的checkbox是否发生变化
      handler: function (val) {
        if (this.earthquakeInfo.id) {
          this.addLayers(val)
        }
      },
      deep: true
    },
    earthquakeInfo: {
      handler: function (val) { // 监听地震事件是否被切换
        this.mapKeys = val.mapKeys
        this.center = {
          lng: val.longitude,
          lat: val.latitude
        }
        this.dist = null
        this.map.clearOverlays()
        // 切换事件后，先清除影响场图层
        this.heatMapLayer = null
        this.getPlace(val.place) // 获取省市区
        this.initMap(true, val.place, true)
      },
      deep: true
    }
  },

地图初始化：

if (!this.map) {
          this.map = new BMapGL.Map('map')
          this.map.enableScrollWheelZoom(true)
        }
        this.map.centerAndZoom(new BMapGL.Point(this.center.lng, this.center.lat), this.zoom); //三个参数分别为经度，纬度，缩放等级。

切换选项：

 if (mapKeys.indexOf('effect') !== -1) { // 影响场-热力图
        if (!this.heatMapLayer) {
          let res = await getEarthquakeSphere({ id: this.earthquakeInfo.einfoId })
          var points = res.data
          console.log('获取到影响场的数据', points)
          if (this.isSupportCanvas()) {
            this.sphereData = [];
            for (var i = 0; i < points.length; i++) {
              var item = points[i];
              this.sphereData.push({
                geometry: {
                  type: 'Point',
                  coordinates: [item.lng, item.lat]
                },
                properties: {
                  count: item.count
                }
              });
            }
            this.heatDataSet = new mapv.DataSet(this.sphereData);
            var options = {
              size: 30,
              gradient: {
                0.25: 'rgba(0, 0, 255, 1)',
                0.55: 'rgba(0, 255, 0, 1)',
                0.85: 'rgba(255, 255, 0, 1)',
                1: 'rgba(250, 50, 56, 1)'
              },
              max: 10,
              draw: "heatmap",
            };
            this.options_heatmap = options;
            this.heatMapLayer = new mapv.baiduMapLayer(
              this.map,
              this.heatDataSet,
              this.options_heatmap
            );
          } else {
            alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
          }
        }
      } else {
        if (this.heatMapLayer) {
          this.heatMapLayer.destroy();
          this.heatMapLayer = null;
        }
      }