高德地图绘制 GPX 数据路线
.gpx 文件是在分享地图路径时最常用的一种数据格式。里面包含了路径点的相关信息，每个点还有可能拥有自己的时间、距离等信息。
一直想自己导出自己的 gpx 路线，然后导入到地图中查看这个路线的具体信息，今天细致看了下，大体找到了方法，分享下。
因为对高德地图的操作已经很熟了，所以再看官方的文档就很轻松，不熟的可以看看我以前关于高德地图的一些文章。
Demo 网站： http://kylebing.cn/tools/map/#/index
我要实现的结果是类似这样的：
目前是这样的，当然日后会优化。
一、试验
最开始的时候我就用描点的方式显示，结果显示了4000多个点，卡，显示成了这样。
是不是很有立体感，因为这是卡片的堆叠，放大后是这样
显然，这样做是不合适的。我提了个工单给官方，官方给我的回复是：
我看了下这个例子，确实是我需要的，开整。
二、在地图上绘制曲线
先看官方的例子
例子： https://lbs.amap.com/demo/javascript-api-v2/example/overlayers/polyline-draw
官方 API 文档： https://lbs.amap.com/api/javascript-api-v2/documentation#polyline
查看官方文档，关于 AMap.Polyline 的参数如下，具体的请查看官方文档：
我给整理了下可能的参数：
let polyline = new AMap.Polyline({path: ptArray, // Array<[number, number]>isOutline: true,outlineColor: '#ffeeff', // 路线边框颜色borderWeight: 3, // 路线边框宽度strokeColor: "#3366FF", // 路线颜色strokeOpacity: 1, // 路线透明度strokeWeight: 6, // 路线宽度strokeStyle: "solid", // solid | dashedstrokeDasharray: [10, 5],// 虚线间隔lineJoin: 'round', // 折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角lineCap: 'round', // 折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头zIndex: 50,showDir: true, // 显示方向箭头， 宽度 > 6 时有效geodesic: false, // 是否显示大地线extraData: {} // any
})
map.add([polyline]);
map.setFitView();
细致说一下，这里 path 的参数类型是 Array<[lng, lat]>，如：
[["117.1028857", "36.6956868"],["117.1028860", "36.6956897"],["117.1028859", "36.6956933"],["117.1028862", "36.6956977"]
]
结果就是这样的，能看到路径发生了偏移，这个我们在后面进行处理。
三、获取 gpx 数据
现在我们需要的就只是获取到 gpx 文件中的 gps 坐标点的数据了。
比如从我高驰 Apex 手表中导出的一条 gpx 的数据内容是这样的：
<?xml version="1.0" encoding="UTF-8"?>
<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:gpxdata="http://www.cluetrust.com/XML/GPXDATA/1/0" xmlns="http://www.topografix.com/GPX/1/0" xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd http://www.cluetrust.com/XML/GPXDATA/1/0 http://www.cluetrust.com/Schemas/gpxdata10.xsd" creator="Coros Wearables"><metadata><time>2023-11-18T12:08:29Z</time><link href="https://www.coros.com">COROS</link></metadata><trk><name>济南市 徒步</name><type>running</type><trkseg><trkpt lat="36.7426527" lon="117.0671413"><ele>18</ele><time>2023-11-18T12:08:53Z</time><extensions><heartrate>96</heartrate><distance>13</distance></extensions></trkpt><trkpt lat="36.7426560" lon="117.0671390"><ele>18</ele><time>2023-11-18T12:08:54Z</time><extensions><heartrate>96</heartrate><distance>13</distance></extensions></trkpt>...
1. 分析 gpx 文件内部的数据格式
能看到 gpx 文件不过是个 xml 文件，并且里面有 lng lat 数据。
能看到它的内部结构是这样的：
https://www.jsont.run/
2. 添加 xml 转义工具
在项目中添加 xml 转义工具，这里用 fast-xml-parser
yarn add fast-xml-parser
# 或
npm i fast-xml-parser
3. 转义数据
页面中 import 它
import {XMLParser, XMLBuilder, XMLValidator} from "fast-xml-parser"
使用它
// 新建 parser
let xmlParser = new XMLParser({ignoreAttributes: false, // 读取xml节点的属性值，这里需要读取节点属性值，因为经纬度在那上面attributeNamePrefix : "_"
})
let xmlObj = xmlParser.parse(xmlContentString)
这样的结果就是
单点数据结构是：
{"ele": 18,"time": "2023-11-18T12:08:53Z","extensions": {"heartrate": 96,"distance": 13},"_lat": "36.7426527","_lon": "117.0671413"
}
这样我们目前需要的数据就是 _lat _lon ，其它数据可以在日后优化功能的时候使用。
4. 生成需要的 path array
let pointers = this.xmlObj.gpx.trk.trkseg.trkpt
let pathPointers = pointers.map(item => [item._lon, item._lat])
__注意：__当然，这里摘取数据点的操作是非常死的，如果想兼容其它 gpx 文件，还需要进一步作相关的判断操作。
再继续第二步的操作，将这值传入就能绘制出路线了。
我的页面中是通过选择 gpx 文件的方式传入的数据，具体如何实现的可以看我已开源的内容。
四、实现需要的
我最终要实现的是类似这样的效果：
让我我们拆分一下它的内容：
- 路线绘制，就是本文所说的
- 标点显示，就是上面的 1.2.3.4.5 它跟路径不是在一个图层。
这样两个结合起来就能做出想要的效果了。
