如何在CesiumJS中加载解析并显示GPX格式文件

Cesium没有内置GPX格式的直接解析能力，你需要先把GPX文件的XML结构解析后提取坐标信息，转成Cesium支持的坐标格式即可，具体步骤如下：

步骤1：解析GPX文件的XML结构 #

GPX是标准XML格式，轨迹点存放在trkpt（轨迹点）、wpt（独立标记点）、rtept（规划路线点）三类标签中，每个点默认携带lon（经度）、lat（纬度）属性，大部分文件还会通过<ele>子标签存储高程值。可以直接用浏览器原生DOMParser解析，不需要引入第三方依赖：

// 先读取GPX文件得到文本内容gpxContentStr
const parser = new DOMParser();
const gpxDom = parser.parseFromString(gpxContentStr, "text/xml");
// 提取所有轨迹点，可根据需要换成wpt或rtept选择器
const gpxPointList = gpxDom.querySelectorAll("trkpt");

步骤2：转成Cesium可识别的坐标格式 #

遍历解析得到的GPX点列表，提取属性转成你参考示例的坐标对象格式，也可以直接转成Cesium原生Cartesian3坐标：

const cesiumCoordinateList = [];
gpxPointList.forEach(gpxPoint => {
  const longitude = parseFloat(gpxPoint.getAttribute("lon"));
  const latitude = parseFloat(gpxPoint.getAttribute("lat"));
  // 读取高程，无高程值可默认设为0
  const height = gpxPoint.querySelector("ele") ? parseFloat(gpxPoint.querySelector("ele").textContent) : 0;
  // 转成你示例中的对象格式
  cesiumCoordinateList.push({
    longitude: longitude,
    latitude: latitude,
    height: height
  });
  // 也可以选择直接转成Cesium笛卡尔坐标，后续直接用于绘制
  // cesiumCoordinateList.push(Cesium.Cartesian3.fromDegrees(longitude, latitude, height));
});

步骤3：在Cesium Viewer中加载显示 #

转换完成的坐标可以直接用来绘制点、线、面等实体，比如绘制GPX轨迹线的示例代码：

viewer.entities.add({
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights(
      cesiumCoordinateList.flatMap(item => [item.longitude, item.latitude, item.height])
    ),
    width: 3,
    material: Cesium.Color.RED.withAlpha(0.8)
  }
});

如果你需要实现带时间轴的轨迹动态回放，可以把转换后的坐标和对应的时间信息组装成CZML格式，Cesium原生支持CZML格式的加载和动态渲染。

内容的提问来源于stack exchange，提问作者Naydz