---
title: "MaplibreTerrain"
description: "启用三维地形，基于 raster-dem 数据源并以 exaggeration 控制夸张程度。"
canonical_url: "https://maplibre.mhaibaraai.cn/docs/environment/terrain"
---
# MaplibreTerrain

> 启用三维地形，基于 raster-dem 数据源并以 exaggeration 控制夸张程度。

## 简介

`MaplibreTerrain` 调用 `setTerrain` 启用三维地形：`source` 必填，传入 `raster-dem` 数据源规格（如公开的 Terrarium 编码高程瓦片），`exaggeration` 控制夸张程度。倾斜视角下起伏最明显。

## 用法

调整 `exaggeration` 查看珠峰一带的地形起伏：

```vue [TerrainExample.vue]
<script setup lang="ts">
import type { RasterDEMSourceSpecification } from '@maplibre/maplibre-gl-style-spec'

withDefaults(defineProps<{ exaggeration?: number }>(), {
  exaggeration: 1.5
})

// 公开 Terrarium 编码高程瓦片，无需 key
const dem: RasterDEMSourceSpecification = {
  type: 'raster-dem',
  tiles: ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'],
  encoding: 'terrarium',
  tileSize: 256,
  maxzoom: 15,
  attribution: '© Mapzen, AWS Terrain Tiles'
}
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap
      :options="{
        center: [86.925, 27.989],
        zoom: 12,
        pitch: 76,
        maxPitch: 85,
        bearing: 40
      }"
    >
      <MaplibreTiandituLayer layer="img" annotation />
      <MaplibreTerrain :source="dem" :exaggeration="exaggeration" />
    </MaplibreMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MaplibreTerrain component
 */
interface MaplibreTerrainProps {
  /**
   * DEM 数据源，如 Terrarium / Mapbox 编码的 raster-dem 瓦片；url / tiles 变化时原地更新
   */
  source: RasterDEMSourceSpecification;
  /**
   * 地形夸张系数
   * @default 1
   */
  exaggeration?: number | undefined;
  /**
   * DEM source id
   * @default 'movk-terrain-dem'
   */
  sourceId?: string | undefined;
}
```

## Changelog

See commit history for [src/runtime/components/environment/Terrain.vue](https://github.com/mhaibaraai/movk-maplibre/commits/main/src/runtime/components/environment/Terrain.vue).


## Sitemap

See the full [sitemap](https://maplibre.mhaibaraai.cn/sitemap.md) for all pages.