如何为路径添加高程以基于Mapbox实现地形上空空中轨迹可视化？

完全可以实现，无需依赖默认地形贴合逻辑，可完全自定义路径各点位的高程值，实现你需要的类似Ayvri平台的路径可视化效果。

核心实现方式 #

• 构造带Z轴坐标的路径数据源：你可以提前处理路径的GeoJSON数据，将默认的[经度, 纬度]二维坐标扩展为[经度, 纬度, 自定义高程值]三维坐标，每个点位的高程可根据你的业务需求自行计算赋值
• 配置线图层高程规则：添加路径线图层时，将line-elevation属性设置为'source'，Mapbox会直接读取数据源中每个顶点自带的Z值作为路径高程，不会自动贴合底图地形
• 动态调整高程：如果需要运行时修改路径高程，只需更新GeoJSON数据源中对应点位的Z值，调用setData方法刷新图层即可生效

进阶优化（匹配Ayvri类视觉效果） #

• 路径平滑处理：对路径做高密度采样，给每个采样点设置对应的高程值，避免高程过渡出现锯齿
• 自定义视觉效果：可搭配line-gradient表达式，根据每个点位的高程、坡度属性生成渐变颜色，也可通过line-width属性设置随高程变化的线宽
• 3D立体路径：如果需要实现凸起的立体路径效果，可将线要素转换为多边形，使用fill-extrusion图层，自定义每个位置的拉伸高度

注意事项 #

若你需要路径在自定义高程基础上再叠加底图地形的高度，可将line-elevation设置为'terrain'，再搭配line-z-offset属性设置自定义的高程偏移值即可。

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