如何调整3D场景中基础DEM地形的不透明度以显示山后路线？

核心原因 #

Mapbox GL JS 原生没有开放直接修改DEM基础地形不透明度的配置项。3D地形渲染时默认会写入深度缓冲区，完全不透明的地形会遮挡后方所有元素，所以直接修改样式无法实现地形半透效果。

可落地实现方案 #

方案1：关闭路线图层深度测试（最简方案，优先选用） #

Mapbox GL JS v2.10及以上版本支持为线图层关闭深度检测，不需要调整地形透明度，即可让路线不被前方山体遮挡。修改你的路线图层配置即可：

map.addLayer({
  type: "line",
  source: "trace",
  id: "line",
  paint: {
    "line-color": "orange",
    "line-width": 4,
    // 新增配置：关闭深度测试，路线不会被前方地形遮挡
    "line-depth-test": false
  },
  layout: {
    "line-cap": "round",
    "line-join": "round"
  }
});

如果需要区分山前和山后的路线，可以将line-color设置为带透明度的RGBA值，比如rgba(255,165,0,0.6)，被遮挡的路线会以半透明状态显示，视觉区分更明显。

方案2：自定义地形表面实现地形半透明 #

如果确实需要地形本身呈现半透明效果，可以取消默认地形表面渲染，新增自定义栅格层作为地形表面，直接调整该图层的透明度即可：

// 原有地形配置保留，用于提供3D高度数据
map.addSource("mapbox-dem", {
  type: "raster-dem",
  url: "mapbox://mapbox.mapbox-terrain-dem-v1",
  tileSize: 512,
  maxzoom: 14
});
map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });

// 新增地形阴影层作为可视化表面，可自定义透明度
map.addSource("terrain-hillshade", {
  type: "raster-dem",
  url: "mapbox://mapbox.mapbox-terrain-dem-v1",
  tileSize: 512,
  maxzoom: 14
});
map.addLayer({
  id: "terrain-surface",
  type: "hillshade",
  source: "terrain-hillshade",
  paint: {
    // 调整该值控制地形透明度，取值范围0-1
    "hillshade-opacity": 0.5,
    "hillshade-exaggeration": 1.5
  }
}, "line"); // 地形层放在路线图层下方

这个方案完全适配你当前使用的空样式配置，不需要额外修改其他参数。

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