高德地图API中折线polyline不能跨越180度经度线的解决方案高德地图API中折线polyline不能跨

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({ 3map: map, //指定目标地图 4path: pathInfo, //折线的节点坐标数组 5showDir: true, //是否延路径显示白色方向箭头,默认false(Canvas绘制时有效,建议折线宽度大于6时使用) 6strokeColor: "red", //线颜色 7strokeOpacity: 1, //线透明度 8strokeWeight: 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数组的值