高德地图绘制 GPX 数据路线

高德地图绘制 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 | dashed
    strokeDasharray: [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. 标点显示，就是上面的 1.2.3.4.5 它跟路径不是在一个图层。

这样两个结合起来就能做出想要的效果了。

五、<未完待续>