---
title: "MaplibreLayerControl"
description: "Layer control that lists titled layer groups with visibility checkboxes and opacity sliders."
canonical_url: "https://maplibre.mhaibaraai.cn/en/docs/controls/layer-control"
---
# MaplibreLayerControl

> Layer control that lists titled layer groups with visibility checkboxes and opacity sliders.

## Introduction

`MaplibreLayerControl` lists every [`MaplibreLayerGroup`](https://maplibre.mhaibaraai.cn/docs/core/layer-group) with a `title` on the map, in declaration order. Checkboxes toggle visibility and sliders set opacity, and the results are written back to each group's `v-model:visible` and `v-model:opacity`; the control never edits the style itself. It therefore stays in sync with external buttons, sidebar panels ([`useLayerTree`](https://maplibre.mhaibaraai.cn/docs/composables/use-layer-tree)) and the legend, and its state survives basemap switches.

> [!NOTE]
> 
> Layers that ship with the basemap style (labels, roads and so on) can appear in the list once a layer group adopts them through 
> 
> styleLayers
> 
> ; see 
> 
> Control basemap layers
> 
> .

## Usage

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