---
title: "MaplibreContourLayer"
description: "由 DEM 瓦片在浏览器端实时生成等高线，主次线按缩放切换间距并沿线标注高程。"
canonical_url: "https://maplibre.mhaibaraai.cn/docs/layers/contour"
---
# MaplibreContourLayer

> 由 DEM 瓦片在浏览器端实时生成等高线，主次线按缩放切换间距并沿线标注高程。

## 简介

`MaplibreContourLayer` 基于 [maplibre-contour](https://github.com/onthegomap/maplibre-contour)，在 worker 中把 `raster-dem` 瓦片实时转为矢量等高线：`thresholds` 按缩放级别设定次线与主线间距，主线沿线标注高程。`demUrl` 可与 `MaplibreTerrain` 共用同一套 DEM。

> [!NOTE]
> 
> 需额外安装可选依赖 
> 
> maplibre-contour
> 
> 。组件内部由 
> 
> MaplibreLayer
> 
>  组成，放入 
> 
> MaplibreLayerGroup
> 
>  即可随组控制显隐与透明度。

## 用法

在珠峰一带叠加等高线：

```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]
> 
> multiplier
> 
>  设为 
> 
> 3.28084
> 
>  并把 
> 
> unit
> 
>  设为 
> 
> 'ft'
> 
>  即可按英尺显示；
> 
> thresholds
> 
>  与 
> 
> multiplier
> 
>  变化时仅更新瓦片地址，不重建图层。

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