---
title: "MapboxTerrain"
description: "启用三维地形，基于 raster-dem 数据源并以 exaggeration 控制夸张程度。"
seo_title: "MapboxTerrain Component"
seo_description: "Enable 3D terrain from a raster-dem source with an adjustable exaggeration factor."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/environment/terrain"
---
# MapboxTerrain

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

## 简介

`MapboxTerrain` 调用 `setTerrain` 启用三维地形：`source` 缺省用 Mapbox 官方 `terrain-dem-v1`，`exaggeration` 控制夸张程度。倾斜视角下起伏最明显。

## 用法

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

```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](/sitemap.md) for all pages.