GPX格式详解，javascript写入读取GPX示例

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

GPX（GPS eXchange Format）是一种基于 XML 的文件格式，主要用于存储 GPS 轨迹数据。GPX 文件通常包含点（waypoints）、路径（routes）和轨迹（tracks）。这种格式广泛应用于户外活动，如徒步旅行、自行车骑行、登山等，因为它能够精确地记录和分享地理信息。

一、GPX 格式的基本结构

一个基本的 GPX 文件通常包含以下元素：

1. <gpx>：根元素，必须指定版本号。
2. <wpt>：表示一个点（waypoint）。
3. <rte>：表示一条路线（route），包含多个 <rtept> 元素。
4. <trk>：表示一条轨迹（track），包含多个 <trkseg> 元素，每个 <trkseg> 包含多个 <trkpt> 元素。
5. <name>、<desc>、<cmt>、<time>：分别表示名称、描述、注释和时间等元数据。
6. <ele>：表示海拔高度。
7. <sym>、<type>、<fix>、<sat>、<hdop>、<vdop>、<pdop>、<ageofdgpsdata>、<dgpsid>：用于表示 GPS 设备的状态信息。

二、示例 GPX 文件

<gpx version="1.1" creator="Example GPX Creator">
  <trk>
    <name>Example Track</name>
    <trkseg>
      <trkpt lat="37.4222898" lon="-122.0822035">
        <ele>0</ele>
        <time>2024-08-06T10:00:00Z</time>
      </trkpt>
      <trkpt lat="37.4224898" lon="-122.0824035">
        <ele>0</ele>
        <time>2024-08-06T10:01:00Z</time>
      </trkpt>
      <trkpt lat="37.4226898" lon="-122.0826035">
        <ele>0</ele>
        <time>2024-08-06T10:02:00Z</time>
      </trkpt>
    </trkseg>
  </trk>
</gpx>

三、GPX在gis中实战示例

1、cesium加载GPX文件，显示图形

https://dajianshi.blog.csdn.net/article/details/129839516

2、vue+openlayers上传GPX文件，导出geojson文件

https://dajianshi.blog.csdn.net/article/details/129463128

3、vue+leaflet 加载gpx数据，导出为geoJson文件

https://dajianshi.blog.csdn.net/article/details/129401528

四、使用 JavaScript 处理 GPX 文件

在 JavaScript 中处理 GPX 文件通常需要借助于一些第三方库，因为原生的 JavaScript API 不直接支持 GPX 文件的读写。下面我们将使用 Node.js 环境以及 xml-js 和 xml2js 库来演示如何读取和写入 GPX 文件。

1、安装所需的库

首先，确保你已经安装了 Node.js 和 npm，然后运行以下命令来安装必要的库：

npm install xml-js xml2js

2、写入 GPX 文件

const fs = require('fs');
const xmlBuilder = require('xml-js');

const gpxData = {
  "gpx": {
    "@_version": "1.1",
    "@_creator": "Example GPX Creator",
    "trk": {
      "name": "Example Track",
      "trkseg": [
        {
          "trkpt": [
            {
              "@_lat": "37.4222898",
              "@_lon": "-122.0822035",
              "ele": "0",
              "time": "2024-08-06T10:00:00Z"
            },
            {
              "@_lat": "37.4224898",
              "@_lon": "-122.0824035",
              "ele": "0",
              "time": "2024-08-06T10:01:00Z"
            },
            {
              "@_lat": "37.4226898",
              "@_lon": "-122.0826035",
              "ele": "0",
              "time": "2024-08-06T10:02:00Z"
            }
          ]
        }
      ]
    }
  }
};

const options = { compact: true, spaces: 4 };
const xml = xmlBuilder.js2xml(gpxData, options);

fs.writeFile('example.gpx', xml, (err) => {
  if (err) throw err;
  console.log('GPX file has been written.');
});

3、读取 GPX 文件

const fs = require('fs');
const xmlParser = require('xml2js');

fs.readFile('example.gpx', 'utf8', (err, data) => {
  if (err) throw err;
  
  xmlParser.parseString(data, (parseErr, result) => {
    if (parseErr) throw parseErr;
    
    // 获取轨迹信息
    const trkseg = result.gpx.trk[0].trkseg[0];
    const trackPoints = trkseg.trkpt;
    
    trackPoints.forEach((point, index) => {
      const lat = point['_$']['@_lat'];
      const lon = point['_$']['@_lon'];
      const ele = point.ele[0];
      const time = point.time[0];
      
      console.log(`Point ${index + 1}: Lat=${lat}, Lon=${lon}, Ele=${ele}, Time=${time}`);
    });
  });
});

示例输出
当运行上述读取代码时，控制台将输出：

Point 1: Lat=37.4222898, Lon=-122.0822035, Ele=0, Time=2024-08-06T10:00:00Z
Point 2: Lat=37.4224898, Lon=-122.0824035, Ele=0, Time=2024-08-06T10:01:00Z
Point 3: Lat=37.4226898, Lon=-122.0826035, Ele=0, Time=2024-08-06T10:02:00Z