高德地图画渐变线

高德地图画渐变线，思路是将线和颜色均分为多个小线段和小颜色，实现渐变，类似于下图。

 如果需要多段线，自己循环拼一下就可以了，方法返回多个小线段组成的polyline数组。

/*
    * 高德地图画渐变线
    * author: liyun
    * params：
    *   polygonArr线段两点坐标，必传
    *   color线两点间的渐变颜色（只能两个颜色渐变，如需要多个渐变色，就将线段切割为多个小线段，只能传rgb()格式色值，如需要传十六进制色值需要转换下），必传
    * */
function drawLinearGradientPolyline(polygonArr, color) {
      var dis = AMap.GeometryUtil.distance(polygonArr[0], polygonArr[1]);//计算两点件距离
      var granularity = Math.round(dis / 80);//计算粒度，如果想粒度精细些就将80改小，越小越精细

      var x_cz = polygonArr[1][0] - polygonArr[0][0]; //两点间横坐标差
      var y_cz = polygonArr[1][1] - polygonArr[0][1]; //两点间纵坐标差

      var x1 = x_cz / granularity; //分解为多个小点后，两小点间的横坐标差值
      var y1 = y_cz / granularity; //分解为多个小点后，两小点间的纵坐标差值

      //取出rbg颜色值，用于后面计算
      var colorList = [];
      color.forEach(item => {
        colorList.push(item.substring(4, item.length - 1).split(','));
      })

      var r_cz = colorList[1][0] - colorList[0][0]; //两颜色r值差
      var g_cz = colorList[1][1] - colorList[0][1]; //两颜色g值差
      var b_cz = colorList[1][2] - colorList[0][2]; //两颜色b值差

      var r1 = r_cz / granularity; //分解为多个小颜色后，两小颜色r值差
      var g1 = g_cz / granularity; //分解为多个小颜色后，两小颜色g值差
      var b1 = b_cz / granularity; //分解为多个小颜色后，两小颜色b值差

      var polygonArr_detail = [];
      var colorList_detail = [];

      //分解为多个点和多个对应的颜色
      for(var i = 0; i < (granularity + 1); i++) {
        polygonArr_detail.push([
          polygonArr[0][0] + (x1*i),
          polygonArr[0][1] + (y1*i)
        ])
        colorList_detail.push([
          parseInt(Number(colorList[0][0]) + (r1*i)),
          parseInt(Number(colorList[0][1]) + (g1*i)),
          parseInt(Number(colorList[0][2]) + (b1*i))
        ])
      }
      //将颜色值加上rbg()
      var colorList_detail1 = colorList_detail.map(item => {
        return 'rgb(' + item.join(",") + ')';
      })

      var polylineArr = polygonArr_detail.map((item, index) => {//创建线
        var polyline1 = new AMap.Polyline({
          path: [item, polygonArr_detail[index + 1]? polygonArr_detail[index + 1]: item],//线条path
          strokeColor: colorList_detail1[index], //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 8,    //线宽
          isOutLine: true,
          borderWeight: 4,
          outlineColor: '#000000',
          lineCap: 'round'
        })
        return polyline1
      })

      return polylineArr;
}

//调用
var polylineGroup = drawLinearGradientPolyline([[116.403322, 39.920255],
        [116.410703, 39.897555]], ['rgb(255,255,0)', 'rgb(255,0,0)']);

//画在地图图层上,map是地图对象
var mapOverLayer= new AMap.OverlayGroup();
map.mapOverLayer(mapOverLayer);//新建图层，将图层添加到地图上
mapOverLayer.addOverlay(polylineGroup);//将处理好的线添加到图层上
map.setFitView(polylineGroup);//定位到线的位置

注意：只能两个颜色渐变，如需要多个渐变色，就将线段切割为多个小线段，只能传rgb()格式色值，如需要传十六进制色值需要转换下，网上好多方法