---
title: "MaplibreTerrain"
description: "Enable 3D terrain from a raster-dem source with an adjustable exaggeration factor."
canonical_url: "https://maplibre.mhaibaraai.cn/en/docs/environment/terrain"
---
# MaplibreTerrain

> Enable 3D terrain from a raster-dem source with an adjustable exaggeration factor.

## Introduction

`MaplibreTerrain` calls `setTerrain` to enable 3D terrain. The required `source` takes a `raster-dem` source specification (such as public Terrarium-encoded elevation tiles), and `exaggeration` controls how pronounced the relief appears. The effect is most striking with a tilted camera angle.

## Usage

Adjust `exaggeration` to explore the terrain relief around Mount Everest:

```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.