---
title: "movkDrawModes"
description: "movk 自定义绘制模式集合（圆/椭圆/矩形/扇形），合并进 MapboxDraw.modes 使用。"
seo_title: "movkDrawModes"
seo_description: "Custom mapbox-gl-draw modes (circle, ellipse, rectangle, sector) merged into MapboxDraw.modes."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/extensions/draw-modes"
---
# movkDrawModes

> movk 自定义绘制模式集合（圆/椭圆/矩形/扇形），合并进 MapboxDraw.modes 使用。

## 简介

`movkDrawModes` 是 movk 提供的自定义绘制模式集合（圆 / 椭圆 / 矩形 / 扇形），与 `MapboxDraw.modes` 合并后注入 [MapboxDrawControl](/docs/extensions/draw) 的 `options.modes`，再经 `changeMode` 切换。

从 `@movk/mapbox` 自动导入，无需手写 import。

> \[\!NOTE\]
> 
> 未启用自动导入时（关闭 unplugin、或在纯 
> 
> .ts
> 
>  脚本与测试中使用），可从 
> 
> @movk/mapbox/draw-modes
> 
>  显式导入。

## 用法

合并自定义模式后，用按钮切换绘制圆 / 椭圆 / 矩形 / 扇形：

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

模式集合对象，键为模式名（传给 `changeMode`），值为 mapbox-gl-draw 模式对象。各模式也可从 `@movk/mapbox/draw-modes` 单独具名导入（`drawRectangleMode` / `drawCircleMode` / `drawEllipseMode` / `drawSectorMode`）。

**draw\_rectangle** (`DrawCustomMode`): 矩形绘制模式。

**draw\_circle** (`DrawCustomMode`): 圆绘制模式。

**draw\_ellipse** (`DrawCustomMode`): 椭圆绘制模式。

**draw\_sector** (`DrawCustomMode`): 扇形绘制模式。

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


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.