---
title: "movkDrawModes"
description: "Custom mapbox-gl-draw modes (circle, ellipse, rectangle, sector) merged into MapboxDraw.modes."
canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/extensions/draw-modes"
---
# movkDrawModes

> Custom mapbox-gl-draw modes (circle, ellipse, rectangle, sector) merged into MapboxDraw.modes.

## Introduction

`movkDrawModes` is a collection of custom draw modes provided by movk (circle / ellipse / rectangle / sector). Merge it with `MapboxDraw.modes` and pass the result to [MapboxDrawControl](https://mapbox.mhaibaraai.cn/docs/extensions/draw) via `options.modes`, then switch between modes using `changeMode`.

Auto-imported from `@movk/mapbox` — no manual import needed.

> [!NOTE]
> 
> When auto-import is not enabled (unplugin disabled, or usage inside plain 
> 
> .ts
> 
>  scripts and tests), import explicitly from 
> 
> @movk/mapbox/draw-modes
> 
> .

## Usage

After merging the custom modes, use buttons to switch between drawing circle, ellipse, rectangle, and sector:

```vue [DrawModesExample.vue]
<script setup lang="ts">
import { useTemplateRef } from 'vue'
import MapboxDraw from '@mapbox/mapbox-gl-draw'
import type { Feature } from 'geojson'

const features = ref<Feature[]>([])
const drawRef = useTemplateRef('drawRef')

// 合并内置模式与 movk 自定义模式
const options = { displayControlsDefault: false, modes: { ...MapboxDraw.modes, ...movkDrawModes } }
</script>

<template>
  <div class="flex h-115 w-full flex-col gap-2">
    <div class="flex flex-wrap items-center gap-2">
      <UButton size="xs" color="neutral" variant="subtle" @click="drawRef?.changeMode('draw_rectangle')">
        矩形
      </UButton>
      <UButton size="xs" color="neutral" variant="subtle" @click="drawRef?.changeMode('draw_circle')">
        圆
      </UButton>
      <UButton size="xs" color="neutral" variant="subtle" @click="drawRef?.changeMode('draw_ellipse')">
        椭圆
      </UButton>
      <UButton size="xs" color="neutral" variant="subtle" @click="drawRef?.changeMode('draw_sector')">
        扇形
      </UButton>
      <UButton size="xs" color="error" variant="subtle" @click="drawRef?.deleteAll()">
        清空
      </UButton>
    </div>
    <div class="relative flex-1 overflow-hidden rounded-(--ui-radius) border border-default">
      <MapboxMap :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.397, 39.908], zoom: 11 }">
        <MapboxDrawControl ref="drawRef" v-model:features="features" :options="options" />
      </MapboxMap>
    </div>
  </div>
</template>
```

## API

### `movkDrawModes`

A mode collection object where each key is a mode name (passed to `changeMode`) and each value is a mapbox-gl-draw mode object. Individual modes can also be imported by name from `@movk/mapbox/draw-modes` (`drawRectangleMode` / `drawCircleMode` / `drawEllipseMode` / `drawSectorMode`).

**draw_rectangle** (`DrawCustomMode`): Rectangle draw mode.

**draw_circle** (`DrawCustomMode`): Circle draw mode.

**draw_ellipse** (`DrawCustomMode`): Ellipse draw mode.

**draw_sector** (`DrawCustomMode`): Sector draw mode.

## Changelog

See commit history for [src/runtime/draw-modes/index.ts](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/draw-modes/index.ts).

---

- [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw)


## Sitemap

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