高德地圖畫漸變線，思路是將線和顏色均分為多個小線段和小顏色，實現漸變，類似于下圖。
?如果需要多段線，自己循環拼一下就可以了，方法返回多個小線段組成的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],//線條pathstrokeColor: 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()格式色值，如需要傳十六進制色值需要轉換下，網上好多方法
