leaflet利用hotline实现河流差值渲染热力图

实现效果（这里做了1条主河道和5个支流）：

 

 

 

 核心代码使用了Leaflet.hotline插件，github下载地址链接

详情见我之前整理的一篇文章介绍河流热力图

核心代码逻辑：

// 处理河流数据以及渲染热线图
      let coorObj = this.handleRiverData(this.waterPolType)
      //渲染热力图
      this.setHotline(coorObj)

//处理河流的数据
    handleRiverData(type) {
      const coordinateObj = {
        //分离出坐标数组,同时将各个河流的经纬度进行调换
        riverJson: riverJson.geometries.map(item => [item.coordinates[1], item.coordinates[0]]),
        branch1: branch1.geometries.map(item => [item.coordinates[1], item.coordinates[0]]),
        branch2: branch2.geometries.map(item => [item.coordinates[1], item.coordinates[0]]),
        branch3: branch3.geometries.map(item => [item.coordinates[1], item.coordinates[0]]),
        branch4: branch4.geometries.map(item => [item.coordinates[1], item.coordinates[0]]),
        branch5: branch5.geometries.map(item => [item.coordinates[1], item.coordinates[0]])
      }
      let riverSiteObj = {} //站点在各个河流中的所分属的分段的索引信息
      //通过riverNameArr河流名称数组将各个河流的坐标点以站点进行分段，以及计算监测因子在不同河段的值
      this.riverNameArr.forEach(key => {
        let arr = [] //获取站点在河流上所属河段索引起始数值和结尾的数值
        if (this.siteInfoObj[key].length > 1) {
          this.siteInfoObj[key].reduce((pre, val, index) => {
            let startIndex = coordinateObj[key].findIndex(el => el[1] == pre.lon2 && el[0] == pre.lat2) //计算前一个站点在当前河流中的索引
            let endIndex = coordinateObj[key].findIndex(el => el[1] == val.lon2 && el[0] == val.lat2) //计算后一个站点在当前河流中的索引
            let startValue = pre[type] !== '-' ? getNumber(pre[type]) : val[type] !== '-' ? getNumber(val[type]) : 4 //河段的监测因子开始数值
            let endValue = val[type] !== '-' ? getNumber(val[type]) :pre[type] !=='-'? getNumber(pre[type]) : 4 //河段的监测因子结束数值
            let diff = startValue - endValue //河段首尾监测因子的差值
            let obj = {
              startIndex: startIndex,
              endIndex: endIndex,
              startValue: startValue,
              endValue: endValue,
              diff: diff
            }
            if (index == 1 && startIndex !== 0) {
              //由于河流的首段没有站点提取出来分段，所以截取河流首段
              let newobj = {
                startIndex: 0,
                endIndex: startIndex,
                startValue: startValue,
                endValue: startValue,
                diff: 0
              }
              arr.push(newobj)
            }
            arr.push(obj)
            if (index == this.siteInfoObj[key].length - 1) {
              //由于河流的最后一段没有末尾站点提取出来分段，所以截取河流末段
              let newobj = {
                startIndex: endIndex,
                endIndex: coordinateObj[key].length,
                startValue: endValue,
                endValue: endValue,
                diff: 0
              }
              arr.push(newobj)
            }
            return val
          })
        } else {
          //由于数组方法reduce无法对只有一项的数组进行运算，单独提取出来进行分段
          this.siteInfoObj[key].forEach(item => {
            let index = coordinateObj[key].findIndex(el => el[1] == item.lon2 && el[0] == item.lat2)
            let value = item[type] !== '-' ? getNumber(item[type]) : 4
            //当前河流首段分段的索引
            if (index !== 0) {
              let obj = {
                startIndex: 0,
                endIndex: index,
                startValue: value,
                endValue: value,
                diff: 0
              }
              arr.push(obj)
            }
            //当前河流末尾分段的河流索引
            let endobj = {
              startIndex: index,
              endIndex: coordinateObj[key].length,
              startValue: value,
              endValue: value,
              diff: 0
            }
            arr.push(endobj)
          })
        }
        riverSiteObj[key] = arr
      })

      let riverCoordinateObj = {} //每段河流完成了分段监测因子数值赋值合并后的新数组
      //通过上述站点对各个河流的中的分段索引开始进行对河流分割，riverNameArr为各个河流名称数组
      this.riverNameArr.forEach(key => {
        let sectionRiverArr = [] //当前河流分段数组
        //将当前河流数组进行分段处理并给该段河流的各个点位赋值监测因子数值
        riverSiteObj[key].forEach(item => {
          let arr = coordinateObj[key].slice(item.startIndex, item.endIndex)
          let i = item.startValue
          arr.forEach((el, index) => {
            if (index !== arr.length - 1) {
              el[2] = Number(i).toFixed(2)
              i = i - item.diff / arr.length
            } else {
              el[2] = Number(item.endValue).toFixed(2)
            }
          })
          sectionRiverArr.push(arr)
        })
        //将当前河流的分段河流合并为完整河流
        let riverCoordinateArr = []
        sectionRiverArr.forEach(item => {
          riverCoordinateArr = [...riverCoordinateArr, ...item]
        })
        riverCoordinateObj[key] = riverCoordinateArr
      })
      //返回当前河流
      return riverCoordinateObj
    },

//设置热力图
    setHotline(coorObj) {
      let hotlineArr = []
      this.riverNameArr.forEach(key => {
        // hotline接收lnglat格式
        let hotlineLayer = L.hotline(coorObj[key], {
          min: 1, //z值的最小值
          max: 6, //z值的最大值
          palette: {
            0.0: systemSet.water_rank_color['Ⅰ类'],
            0.2: systemSet.water_rank_color['Ⅱ类'],
            0.4: systemSet.water_rank_color['Ⅲ类'],
            0.6: systemSet.water_rank_color['Ⅳ类'],
            0.8: systemSet.water_rank_color['Ⅴ类'],
            1.0: systemSet.water_rank_color['劣Ⅴ类']
          },
          weight: key == 'riverJson' ? 10 : 8, //线条粗细，主流是10，支流是8
          outlineColor: '#888888', //边框线颜色
          outlineWidth: 1 //边框线粗细
        })
        hotlineArr.push(hotlineLayer)
      })
      this.hotlineLayerGroup = L.layerGroup(hotlineArr)
      this.hotlineLayerGroup.addTo(this.map)
    },