首页 / MapLibre / 使用示例
3D 地形倾斜
地图倾斜到 62 度,叠加高程瓦片后山脊有了起伏。 夸张系数控制在 1 附近最接近真实比例,调得过高会显得像沙盘。
源码与运行效果
说明
地形需要两样东西:一个 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 或降低俯仰角可以缓解;移动端还会明显增加耗电。