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

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

## Introduction

`MapboxTerrain` calls `setTerrain` to enable 3D terrain. The `source` defaults to Mapbox's official `terrain-dem-v1`, 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">
withDefaults(defineProps<{ exaggeration?: number }>(), {
  exaggeration: 1.5
})
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{
        style: 'mapbox://styles/mapbox/satellite-streets-v12',
        center: [86.925, 27.989],
        zoom: 12,
        pitch: 76,
        bearing: 40
      }"
    >
      <MapboxTerrain :exaggeration="exaggeration" />
    </MapboxMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MapboxTerrain component
 */
interface MapboxTerrainProps {
  /**
   * 地形夸张系数
   * @default "1"
   */
  exaggeration?: number | undefined;
  /**
   * DEM 数据源，缺省用 Mapbox 官方 terrain-dem-v1
   */
  source?: mapboxgl.RasterDEMSourceSpecification | 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-mapbox/commits/main/src/runtime/components/environment/Terrain.vue).


## Sitemap

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