还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;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 文件通常包含以下元素:
<gpx>
:根元素,必须指定版本号。<wpt>
:表示一个点(waypoint)。<rte>
:表示一条路线(route),包含多个<rtept>
元素。<trk>
:表示一条轨迹(track),包含多个<trkseg>
元素,每个<trkseg>
包含多个<trkpt>
元素。<name>
、<desc>
、<cmt>
、<time>
:分别表示名称、描述、注释和时间等元数据。<ele>
:表示海拔高度。<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