使用JavaScript从点创建GPX文件并下载

Question

我希望能够从一系列的纬度和经度点创建一个gpx文件。 我的数组长这样：

const lineSegments = [[[34.12877, -117.65464], [34.12878, -117.65391]], ....];

我希望将其转换成像这样的GPX文件：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<gpx version="1.1" creator="https://mywebsite.com" xmlns="http://www.topografix.com/GPX/1/1">
  <metadata>
    <name>0.62 mi route</name>
    <link href="https://mywebsite.com">
      <text>My Website</text>
    </link>
    <time>2020-04-22T20:10:34.445Z</time>
    <copyright author="My Web Site, OpenStreetMap Contributors">
      <year>2020</year>
    </copyright>
  </metadata>
  <rte>
    <name>0.62 mi route</name>
    <rtept lat="34.12877" lon="-117.65464"/>
    <rtept lat="34.12878" lon="-117.65391"/>
    <rtept lat="34.12878" lon="-117.65368"/>
    <rtept lat="34.12878" lon="-117.6531"/>
    <rtept lat="34.12878" lon="-117.65231"/>
    <rtept lat="34.12878" lon="-117.65142"/>
    <rtept lat="34.12879" lon="-117.65127"/>
    <rtept lat="34.12879" lon="-117.65111"/>
    <rtept lat="34.12879" lon="-117.65045"/>
    <rtept lat="34.12879" lon="-117.64991"/>
    <rtept lat="34.12879" lon="-117.6493"/>
    <rtept lat="34.12879" lon="-117.64872"/>
    <rtept lat="34.1288" lon="-117.64816"/>
    <rtept lat="34.1288" lon="-117.64758"/>
    <rtept lat="34.1288" lon="-117.64583"/>
    <rtept lat="34.1288" lon="-117.64514"/>
    <rtept lat="34.1288" lon="-117.64485"/>
    <rtept lat="34.12879" lon="-117.64477"/>
    <rtept lat="34.12879" lon="-117.64411"/>
    <rtept lat="34.1286" lon="-117.64411"/>
  </rte>
</gpx>

我不是很确定如何编写.gpx文件。有什么建议吗？

- erik_g

Answer 1

我的解决方案：

const createXmlString = (lines: number[][][]): string => {
  let result = '<gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd" version="1.1" creator="runtracker"><metadata/><trk><name></name><desc></desc>'
  result += lines.reduce((accum, curr) => {
    let segmentTag = '<trkseg>';
    segmentTag += curr.map((point) => `<trkpt lat="${point[1]}" lon="${point[0]}"><ele>${point[2]}</ele></trkpt>`).join('');
    segmentTag += '</trkseg>'

    return accum += segmentTag;
  }, '');
  result += '</trk></gpx>';
  return result;
}

const downloadGpxFile = (
  lines: number[][][],
  distance: number[],
  units: 'miles' | 'kilometers'
) => {
  const xml = createXmlString(lines);
  const url = 'data:text/json;charset=utf-8,' + xml;
  const link = document.createElement('a');
  link.download = `${distance[distance.length - 1]}-${units}.gpx`;
  link.href = url;
  document.body.appendChild(link);
  link.click();
};

第一个函数通过迭代每行并为行中的每个点创建 <div> 标记来创建表示 xml 的字符串。第二个函数创建一个链接标记，其中 href 属性表示 xml 字符串，download 属性用于下载文件。将链接添加到页面中，然后点击它以下载文件。

- erik_g