MapBox中能否利用GeoJSON的z坐标实现线路悬浮于地面？

解决思路 #

MapBox默认会把GeoJSON的LineString贴地形渲染，要用上Z坐标实现悬浮，得靠自定义样式表达式或者3D图层属性，下面是两种实用方案：

方案一：用Line图层的line-elevation属性（纯线路悬浮） #

MapBox GL JS 2.0及以上版本支持line-elevation属性，直接把这个值设为GeoJSON里的Z坐标就能让线路悬浮：

1. 导入你的GeoJSON数据源后，添加Line类型图层
2. 在paint属性里配置line-elevation，提取GeoJSON中的Z值
   示例代码：

{
  "id": "suspended-line",
  "type": "line",
  "source": "centros_lat", // 对应你的数据源名称
  "paint": {
    "line-color": "#2ecc71",
    "line-width": 3,
    // 从geometry的坐标数组中提取Z值（第三个元素）
    "line-elevation": ["map", ["get", "geometry"], (point) => ["geometry-coordinate", point, 2]]
  }
}

方案二：用Fill-Extrusion图层模拟（带宽度的悬浮线路） #

如果需要线路有一定宽度，可把LineString转成缓冲多边形，再用Fill-Extrusion图层实现悬浮：

1. 添加Fill-Extrusion图层，关联GeoJSON数据源
2. 用表达式把线路转成多边形，再设置高度为Z坐标
   示例代码：

{
  "id": "suspended-line-polygon",
  "type": "fill-extrusion",
  "source": "centros_lat",
  "paint": {
    "fill-extrusion-color": "#e74c3c",
    "fill-extrusion-height": ["map", ["get", "geometry"], (point) => ["geometry-coordinate", point, 2]],
    "fill-extrusion-base": 0, // 悬浮的基准高度，设0就是从地面开始
    "fill-extrusion-width": 4 // 线路的宽度
  }
}

额外提示 #

• 如果Z坐标是相对地形的高度（比如要悬浮在地形上方32米），把高度表达式改成["+", ["terrain-height"], 32]即可
• 确保你的MapBox GL JS版本符合要求：line-elevation需要v2.0+，低版本不支持这个属性

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