经纬志
首页 / MapLibre / 使用示例

3D 地形倾斜

地图倾斜到 62 度,叠加高程瓦片后山脊有了起伏。 夸张系数控制在 1 附近最接近真实比例,调得过高会显得像沙盘。

MapLibre GL JS 4.x · 更新 2026-10-27
源码与运行效果
运行效果

说明

地形需要两样东西:一个 raster-dem 高程源, 以及 setTerrain 调用。示例使用公开的 AWS 高程瓦片, encoding 必须与瓦片编码一致,该数据集是 terrarium,写成 mapbox 会得到错误的高程。

map.addSource('terrain', {
  type: 'raster-dem',
  tiles: ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'],
  tileSize: 256,
  encoding: 'terrarium',
  maxzoom: 12
});

map.setTerrain({ source: 'terrain', exaggeration: 1.4 });
参数含义注意
encoding高程编码方式terrarium 与 mapbox 不通用
exaggeration垂直夸张倍数1 为实际比例
pitch俯仰角超过 60 度需要设 maxPitch
hillshade晕渲图层让起伏在没有影像时也能看出来

demo 底图没有城市细节,画面里只有国界与高程起伏, 用来观察地形本身反而更清楚。生产环境通常配影像或完整矢量底图。

取消勾选时调用 setTerrain(null) 关闭地形, 同时隐藏晕渲图层;否则底层高程仍被渲染,性能开销不会下降。

地形会让低缩放的画面边缘出现裁切,因为地平线进入了视野。 调高 padding 或降低俯仰角可以缓解;移动端还会明显增加耗电。