高德地圖API中折線polyline不能跨越180度經度線的解決方案

1、問題

最近在使用高德地圖的API，有一個需求是畫出對象的歷史軌跡，采用了高德地圖API中的折線polyline函數。但如果需要跨180度經度線的折線，會出現不能跨越的情況，如下圖所示：

 圖中有三個標記點，從西向東坐標點依次為[135, 21],[165, 23],[195, 25]。我們想要畫出對象的歷史軌跡方向應該一直是從西向東，依次連接三個點，由圖可知第一個點到第二個點是從西向東，但是第二個點到第三個點是從東向西，繞了大半個地球到達第三個點

2、解決方案

首先需要了解一下高德地圖中的坐標系是如何建立的：

在高德地圖中，坐標用類AMap.LngLat表示，為了方便理解，我們用[longitude,latitude]表示AMap.LngLat類中的經緯度，longitude為經度，latitude為緯度，[0,0]為坐標原點，經度范圍為[-180,180]，緯度范圍為[-90,90]

AMap.LngLat的構造函數為AMap.LngLat(lng:Number,lat:Number,noAutofix:bool)。其中noAutoFix表示是否自動將經度修正到 [-180,180] 區間內，缺省為false，此時會自動將經度修正到[-180,180]范圍內

 在問題的例子中，我們傳入的軌跡點的經緯度數組為

let pathInfo = [[135, 21],[165, 23],[195, 25]];

使用折線函數畫出軌跡折線，並查看軌跡點的經緯度數組

//對象軌跡
let Polyline = new AMap.Polyline({
  map: map, //指定目標地圖
  path: pathInfo, //折線的節點坐標數組
  showDir: true, //是否延路徑顯示白色方向箭頭,默認false(Canvas繪制時有效,建議折線寬度大於6時使用)
  strokeColor: "red", //線顏色
  strokeOpacity: 1, //線透明度
  strokeWeight: 6, //線寬
  // strokeStyle: "solid"  //線樣式
});

console.log("pathInfo", pathInfo);

此時由控制台可以看到，pathInfo數組的元素類型已經被自動轉換為了對象，即傳入時是數組，使用Amap.Polyline函數后自動將數組轉換為了AMap.LngLat對象

pathInfo仍然為一個數組，但是數組元素轉換為了AMap.LngLat對象，可以看到第三個點，即pathInfo[2]元素的經度從195修改為了-165。造成這種情況的原因就是pathInfo的數組元素在自動轉換時默認將經度修改到了[-180,180]范圍內。解決這種問題的方法很簡單，即Amap.Polyline類的path屬性我們直接傳入的是對象數組，而不是二維數組

對pathInfo的賦值操作進行修改

let pathInfo = [];
pathInfo.push(new AMap.LngLat(135, 21, true));
pathInfo.push(new AMap.LngLat(165, 23, true));
pathInfo.push(new AMap.LngLat(195, 25, true));

pathInfo仍為數組，只不過數組元素手動創建為Amap.LngLat對象，而不交給程序自動轉換。此處注意AMap.LngLat(lng:Number,lat:Number,noAutofix:bool)第三個參數即noAutofix設為true，表示不需要自動將經度修正到[-180,180]范圍內

此時查看pathInfo數組的值

 第三個點，即pathInfo[2]元素的經度仍然為195，那么就可以達成跨越180經度線的目的了。軌跡效果圖如下