如何用MapBox在地形上方显示小飞机的GPS轨迹？

Annotations确实仅支持2D平面展示，要实现轨迹在海拔高度（地形上方）显示，你需要改用GeoJSON数据源 + 3D线图层的方案，具体步骤如下：

1. 准备带海拔的轨迹数据 #

确保你的GPS轨迹数据包含每个点的海拔值，将其整理为带三维坐标的GeoJSON格式（坐标顺序为[经度, 纬度, 海拔]）：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "flight-id": "001"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [116.397222, 39.9075, 550],
          [116.400556, 39.908333, 620],
          [116.403889, 39.909167, 700]
          // 补充更多带海拔的轨迹点
        ]
      }
    }
  ]
}

2. 添加GeoJSON数据源到地图 #

将整理好的轨迹数据作为数据源添加到MapBox实例：

// 假设map是你的MapBox地图实例
map.addSource('flight-trajectory', {
  type: 'geojson',
  data: yourFlightGeoJSONData // 替换为你的轨迹GeoJSON数据
});

3. 创建3D线图层并配置海拔显示 #

添加一个line-layer，通过配置属性让轨迹基于海拔值悬浮在地形上方：

map.addLayer({
  id: 'flight-path-layer',
  type: 'line',
  source: 'flight-trajectory',
  paint: {
    'line-color': '#ff3300',
    'line-width': 3,
    // 使用坐标中的海拔值作为线的高度，若需要在地形基础上额外抬高，可做数值叠加
    'line-height': ['get', 'alt'], // 或者写固定值如500，或表达式计算：['+', ['get', 'alt'], 100]
    'line-offset': 0,
    'line-opacity': 0.8
  }
});

4. 确保地图开启地形支持 #

如果你的地图还未启用地形，需要先开启：

map.setTerrain({
  source: 'mapbox-dem',
  exaggeration: 1 // 地形夸张系数，按需调整
});

关键说明 #

• 若你的原始GPS数据没有海拔值，可通过MapBox的地形服务反向查询每个点的地形海拔，再叠加飞机的飞行高度得到最终的展示海拔。
• line-height属性支持表达式计算，你可以灵活调整轨迹的离地高度，比如固定抬高100米：['+', ['get', 'alt'], 100]。

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