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

HuskySir發表於2021-11-14
地圖API

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]範圍內

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

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

使用折線函式畫出軌跡折線，並檢視軌跡點的經緯度陣列

 1 //物件軌跡
 2 let Polyline = new AMap.Polyline({
 3   map: map, //指定目標地圖
 4   path: pathInfo, //折線的節點座標陣列
 5   showDir: true, //是否延路徑顯示白色方向箭頭,預設false(Canvas繪製時有效,建議折線寬度大於6時使用)
 6   strokeColor: "red", //線顏色
 7   strokeOpacity: 1, //線透明度
 8   strokeWeight: 6, //線寬
 9   // strokeStyle: "solid"  //線樣式
10 });
11 
12 console.log("pathInfo", pathInfo);

此時由控制檯可以看到，pathInfo陣列的元素型別已經被自動轉換為了物件，即傳入時是陣列，使用Amap.Polyline函式後自動將陣列轉換為了AMap.LngLat物件

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

對pathInfo的賦值操作進行修改

1 let pathInfo = [];
2 pathInfo.push(new AMap.LngLat(135, 21, true));
3 pathInfo.push(new AMap.LngLat(165, 23, true));
4 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經度線的目的了。軌跡效果圖如下

相關文章