GPX格式详解，javascript写入读取GPX示例
CSDN 2024-08-19 08:05:02 阅读 64
还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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 格式的基本结构二、示例 GPX 文件三、GPX在gis中实战示例1、cesium加载GPX文件，显示图形2、vue+openlayers上传GPX文件，导出geojson文件3、vue+leaflet 加载gpx数据，导出为geoJson文件
四、使用 JavaScript 处理 GPX 文件1、安装所需的库2、写入 GPX 文件3、读取 GPX 文件
GPX（GPS eXchange Format）是一种基于 XML 的文件格式，主要用于存储 GPS 轨迹数据。GPX 文件通常包含点（waypoints）、路径（routes）和轨迹（tracks）。这种格式广泛应用于户外活动，如徒步旅行、自行车骑行、登山等，因为它能够精确地记录和分享地理信息。
一、GPX 格式的基本结构
一个基本的 GPX 文件通常包含以下元素：
<code><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">code>
<trk>
<name>Example Track</name>
<trkseg>
<trkpt lat="37.4222898" lon="-122.0822035">code>
<ele>0</ele>
<time>2024-08-06T10:00:00Z</time>
</trkpt>
<trkpt lat="37.4224898" lon="-122.0824035">code>
<ele>0</ele>
<time>2024-08-06T10:01:00Z</time>
</trkpt>
<trkpt lat="37.4226898" lon="-122.0826035">code>
<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 环境以及 <code>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
上一篇： CORDIC算法解释及verilog HDL实现（圆坐标系）
下一篇： 【Java】Windows系统中Java环境变量配置指南：详细配置JAVA_HOME和CLASSPATH（全网最详细的图文教程，建议收藏）
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。