解决关于 Mapv - 地理信息可视化开源库 使用网格热力图时 gradient属性只能设置[0,1]的渐变色，无法满足通过值区间来定义网格颜色的问题

记录下业务需求：需要使用echarts和百度地图展示网格热力图 并且可以通过自定义分档区间来控制网格颜色

找了下echarts发现并没有相关例子，但是发现了热力图扩展的例子还是使用的百度地图的

  所以想法就来了。。。首先创建shi一个这样的热力图然后获取地图实例，再通过实例将mpav生成的栅格热力图渲染到地图上

这里要注意：visualMap视觉映射组件 属性一定要添加不然无法渲染地图

接着往下写问题就来了，我要通过分位数来个数据分档不同挡位展示不同颜色，但是一看官方文档发现并没有这样的属性

 官方只给了gradient这个属性只能设置0-1区间的渐变色不满足需求

翻看了下issues发现已经有人提了这样的问题

但是官方没有修复 

那就只能自己修复

看来下choropleth类型有我需要的属性，可惜grid无法使用

 所以我们就模仿splitList属性给grid也加一个

下载下来mapv.js文件开始添加

 

 可以看到每个色块的颜色是给到 context.fillStyle的，在 if (!enableCluster) 上面加上这个方法

  var intensity = new Intensity({
            min: options.min || 0,
            max: options.max || 100,
            gradient: options.gradient
        });


 // 添加splitList属性，设置按值区间修改栅格颜色
      var customColorList = options?.customColorList || []

      function getColorByValue(value, splitList) {
        for (var i = 0; i < splitList.length; i++) {
          var split = splitList[i]
          if (typeof split.end === 'undefined') {
            if (value >= split.start) {
              return split.color
            }
          } else {
            if (value > split.start && value <= split.end) {
              return split.color
            }
          }
        }
      }

   if (!enableCluster) { .....

enableCluster默认是true，所以要修改else{}里面的context.fillStyle

  if (!enableCluster) {
     省略......
      } else {
        let tempgridKey = []
       
        for (var _i = 0; _i < data.length; _i++) {
          var coordinates =
            data[_i].geometry._coordinates || data[_i].geometry.coordinates
          // console.log((coordinates[0] - offset.x) / 300) + ',' + Math.floor((coordinates[1] - offset.y) / 300);
          var gridKey =
            Math.floor((coordinates[0] - offset.x) / size) +
            ',' +
            Math.floor((coordinates[1] - offset.y) / size)
          if (!grids[gridKey]) {
            grids[gridKey] = 0
            tempgridKey[gridKey] = 0
          }
          grids[gridKey] += ~~data[_i].count
          tempgridKey[gridKey] = data[_i].cnt
        }
        // console.log(grids, "grids");
        for (var _gridKey2 in grids) {
          let _gridKey3 = _gridKey2
          _gridKey2 = _gridKey2.split(',')
          context.beginPath()
          context.rect(
            _gridKey2[0] * size + 0.5 + offset.x,
            _gridKey2[1] * size + 0.5 + offset.y,
            size,
            size,
          )


         //这里判断options是否添加了customColorList属性
          let reslutColor
          if (customColorList.length) {

         //有customColorList调用之前定义的getColorByValue方法设置颜色
            reslutColor = getColorByValue(grids[_gridKey3], customColorList)
          } else {
            reslutColor = intensity.getColor(grids[_gridKey3])
          }

         //最后将颜色给到 context.fillStyle
          context.fillStyle = reslutColor


          context.fill()
          if (options.strokeStyle && options.lineWidth) {
            context.stroke()
          }
        }
      }

到这里引入mapv.js就可以使用customColorList 属性了

使用方法跟splitList一样，注意start，end是左开右闭(start，end] ：

{
    draw: 'grid',
    // 按数值区间来展示不同颜色的点
    customColorList : [
        {
            start: 0,
            end: 2,
            color: randomColor()
        },{
            start: 2,
            end: 4,
            color: randomColor()
        },{
            start: 4,
            end: 6,
            color: randomColor()
        },{
            start: 6,
            end: 8,
            color: randomColor()
        },{
            start: 8,
            color: randomColor()
        }
    ]
}