---
title: "MaplibreLayerControl"
description: "图层控件，列出带标题的图层组，勾选控制显隐、滑块控制透明度。"
canonical_url: "https://maplibre.mhaibaraai.cn/docs/controls/layer-control"
---
# MaplibreLayerControl

> 图层控件，列出带标题的图层组，勾选控制显隐、滑块控制透明度。

## 简介

`MaplibreLayerControl` 列出地图中所有带 `title` 的 [`MaplibreLayerGroup`](https://maplibre.mhaibaraai.cn/docs/core/layer-group)，顺序即声明顺序。勾选框控制显隐，滑块控制透明度，操作结果写回各组的 `v-model:visible` 与 `v-model:opacity`，控件本身不修改样式。因此它与外部按钮、侧栏面板（[`useLayerTree`](https://maplibre.mhaibaraai.cn/docs/composables/use-layer-tree)）、图例始终同步，切换底图后状态也会保留。

> [!NOTE]
> 
> 底图样式自带的图层（注记、道路等）可以通过图层组的 
> 
> styleLayers
> 
>  认领后出现在列表中，见 
> 
> 控制底图图层
> 
> 。

## 用法

```vue [LayerControlExample.vue]
<script setup lang="ts">
import type { FeatureCollection } from 'geojson'

const stations: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [116.397, 39.908] } },
    { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [116.45, 39.93] } }
  ]
}

const zone: FeatureCollection = {
  type: 'FeatureCollection',
  features: [{ type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [[[116.36, 39.95], [116.44, 39.95], [116.44, 39.89], [116.36, 39.89], [116.36, 39.95]]] } }]
}

const open = ref(true)
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap :options="{ style: 'https://tiles.openfreemap.org/styles/positron', center: [116.41, 39.92], zoom: 11 }">
      <MaplibreLayerGroup title="规划片区">
        <MaplibreLayer layer-id="lc-zone" type="fill" :source="{ type: 'geojson', data: zone }" :paint="{ 'fill-color': '#f59e0b', 'fill-opacity': 0.4 }" />
      </MaplibreLayerGroup>
      <MaplibreLayerGroup title="站点">
        <MaplibreLayer layer-id="lc-stations" type="circle" :source="{ type: 'geojson', data: stations }" :paint="{ 'circle-radius': 8, 'circle-color': '#3b82f6', 'circle-stroke-width': 2, 'circle-stroke-color': '#fff' }" />
      </MaplibreLayerGroup>
      <MaplibreLayerControl v-model:open="open" position="top-left" />
    </MaplibreMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MaplibreLayerControl component
 */
interface MaplibreLayerControlProps {
  /**
   * 控件停靠位置；省略用地图默认位置
   */
  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
  /**
   * 是否显示透明度滑块
   * @default true
   */
  opacity?: boolean | undefined;
  /**
   * 折叠按钮的无障碍标签
   * @default 'Layers'
   */
  label?: string | undefined;
  /**
   * 面板是否展开
   * @default false
   */
  open?: boolean | undefined;
}
```

### Emits

```ts
/**
 * Emitted events for the MaplibreLayerControl component
 */
interface MaplibreLayerControlEmits {
  update:open: (payload: [value: boolean]) => void;
}
```

### Slots

```ts
/**
 * Slots for the MaplibreLayerControl component
 */
interface MaplibreLayerControlSlots {
  /**
   * 自定义单个图层组的行内容
   */
  item(): any;
}
```

## Changelog

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


## Sitemap

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