---
title: "MaplibreContourLayer"
description: "Generate contour lines from DEM tiles in the browser, with zoom-dependent intervals and elevation labels."
canonical_url: "https://maplibre.mhaibaraai.cn/en/docs/layers/contour"
---
# MaplibreContourLayer

> Generate contour lines from DEM tiles in the browser, with zoom-dependent intervals and elevation labels.

## Introduction

`MaplibreContourLayer` is built on [maplibre-contour](https://github.com/onthegomap/maplibre-contour) and turns `raster-dem` tiles into vector contour lines inside a worker. `thresholds` sets the minor and major intervals per zoom level, and major lines are labeled with their elevation. `demUrl` can share the same DEM as `MaplibreTerrain`.

> [!NOTE]
> 
> Requires the optional dependency 
> 
> maplibre-contour
> 
> . The component is composed of 
> 
> MaplibreLayer
> 
> s, so placing it in a 
> 
> MaplibreLayerGroup
> 
>  controls its visibility and opacity with the group.

## Usage

Overlay contour lines around Mount Everest:

```vue [ContourLayerExample.vue]
<script setup lang="ts">
withDefaults(defineProps<{ lineColor?: string, labels?: boolean }>(), {
  lineColor: '#fde68a',
  labels: true
})

// 公开 Terrarium 编码高程瓦片，无需 key
const demUrl = 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'
</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 }">
      <MaplibreTiandituLayer layer="img" />
      <MaplibreContourLayer :dem-url="demUrl" :line-color="lineColor" :labels="labels" />
    </MaplibreMap>
  </div>
</template>
```

> [!TIP]
> 
> Set 
> 
> multiplier
> 
>  to 
> 
> 3.28084
> 
>  and 
> 
> unit
> 
>  to 
> 
> 'ft'
> 
>  to display feet. Changing 
> 
> thresholds
> 
>  or 
> 
> multiplier
> 
>  only updates the tile URL; the layers are not recreated.

## API

### Props

```ts
/**
 * Props for the MaplibreContourLayer component
 */
interface MaplibreContourLayerProps {
  /**
   * DEM 瓦片模板（含 {z}/{x}/{y}），可与 MaplibreTerrain 共用；变更需配合 `:key` 重建
   */
  demUrl: string;
  /**
   * DEM 高程编码；变更需配合 `:key` 重建
   * @default 'terrarium'
   */
  encoding?: "terrarium" | "mapbox" | undefined;
  /**
   * DEM 瓦片最大缩放级别；变更需配合 `:key` 重建
   * @default 12
   */
  maxzoom?: number | undefined;
  /**
   * 缩放级别到 [次线间距, 主线间距] 的映射，未列出的级别沿用更低一级
   * @default { 11: [200, 1000], 12: [100, 500], 14: [50, 200], 15: [20, 100] }
   */
  thresholds?: Record<number, number | number[]> | undefined;
  /**
   * 高程换算系数，如 3.28084 将米换算为英尺
   * @default 1
   */
  multiplier?: number | undefined;
  /**
   * 标注的高程单位后缀
   * @default 'm'
   */
  unit?: string | undefined;
  /**
   * 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建
   */
  layerId?: string | undefined;
  /**
   * 线条颜色
   * @default '#a0522d'
   */
  lineColor?: string | undefined;
  /**
   * 是否沿主线标注高程
   * @default true
   */
  labels?: boolean | undefined;
  /**
   * 覆盖合并到等高线的 paint
   */
  linePaint?: Record<string, unknown> | undefined;
  /**
   * 覆盖合并到标注的 layout
   */
  labelLayout?: Record<string, unknown> | undefined;
  /**
   * 插入到该图层之前
   */
  beforeId?: string | undefined;
}
```

## Changelog

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


## Sitemap

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