高德经度跨时区连线不对处理丨技术开发分享录

高德经度跨时区连线不对处理

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"**从中国到美国**\n\n处理前效果:\n\n![image.png](/images/articles/image20201221153321.png)\n\n处理后的效果:\n\n![image.png](/images/articles/image20201221153420.png)\n\n坐标数据(**从美国到中国**):\n\n![image.png](/images/articles/image20201221153503.png)\n\n```\nvar coordList = [[113.327964,26.177582],[137.409995,34.797978],[165.007652,42.603607],[-155.793129,56.982383],[-116.418129,41.559942]];\n```\n\n> **处理规则:**\n经度由正到负:前一点先连到180,再-180连到下一点\n经度由负到正:前一点先连到-180,再180连到下一点\n再辅助以大致的纬度即可\n\n```{4,26}\ncoordList.forEach(function(coord, i) {\n    if(i) {\n        if(coordList[i-1][0]>0 && coord[0]<0) { // 经度由正到负(中国到美国)\n            var center = turf.midpoint(turf.point(coordList[i-1]), turf.point(coord)); // 中点位置\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    coordList[i-1],\n                    [180, center.geometry.coordinates[1]]\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"dashed\",\n            });\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    [-180, center.geometry.coordinates[1]],\n                    coord\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"dashed\",\n            });\n        } else if(coordList[i-1][0]<0 && coord[0]>0) { // 经度由负到正(美国到中国)\n            var center = turf.midpoint(turf.point(coordList[i-1]), turf.point(coord)); // 中点位置\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    coordList[i-1],\n                    [-180, center.geometry.coordinates[1]]\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"dashed\",\n            });\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    [180, center.geometry.coordinates[1]],\n                    coord\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"dashed\",\n            });\n        } else {\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    coordList[i-1],\n                    coord\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"solid\",\n            });\n        }\n    }\n});\n```\n\n或者使用**纬度平均值**\n\n```{4,26}\ncoordList.forEach(function(coord, i) {\n    if(i) {\n        if(coordList[i-1][0]>0 && coord[0]<0) { // 经度由正到负(中国到美国)\n            var avgLat= (coordList[i-1][1] + coord[1]) / 2; // 纬度平均值\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    coordList[i-1],\n                    [180, avgLat]\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"dashed\",\n            });\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    [-180, avgLat],\n                    coord\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"dashed\",\n            });\n        } else if(coordList[i-1][0]<0 && coord[0]>0) { // 经度由负到正(美国到中国)\n            var avgLat= (coordList[i-1][1] + coord[1]) / 2; // 纬度平均值\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    coordList[i-1],\n                    [-180, avgLat]\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"dashed\",\n            });\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    [180, avgLat],\n                    coord\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"dashed\",\n            });\n        } else {\n            new AMap.Polyline({\n                map: map,\n                path: [\n                    coordList[i-1],\n                    coord\n                ],\n                strokeColor: '#F7C631',\n                strokeWeight: 1.8,\n                strokeStyle: \"solid\",\n            });\n        }\n    }\n});\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看