---
title: "drawThemeStyles"
description: "生成 mapbox-gl-draw 主题样式数组，支持要素级 user_color 覆盖。"
seo_title: "drawThemeStyles"
seo_description: "Generate a mapbox-gl-draw styles array from theme options, with per-feature user_color overrides."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/extensions/draw-theme"
---
# drawThemeStyles

> 生成 mapbox-gl-draw 主题样式数组，支持要素级 user\_color 覆盖。

## 简介

`drawThemeStyles` 依据主题选项生成完整的 mapbox-gl-draw `styles` 数组，配合 `userProperties: true` 使用；颜色取 `coalesce(user_color, 主题色)`，要素级 `user_color` 可覆盖主题色。

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

## 用法

切换主色生成主题样式（预置多边形即时呈现）：

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

const props = withDefaults(defineProps<{ color?: string }>(), {
  color: '#8b5cf6'
})

// 预置多边形，主题色即时可见
const features = ref<Feature[]>([{
  type: 'Feature',
  properties: {},
  geometry: {
    type: 'Polygon',
    coordinates: [[[116.38, 39.90], [116.41, 39.90], [116.41, 39.92], [116.38, 39.92], [116.38, 39.90]]]
  }
}])

const options = computed(() => ({
  displayControlsDefault: false,
  userProperties: true,
  styles: drawThemeStyles({ color: props.color })
}))
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.395, 39.91], zoom: 12 }">
      <!-- color 变化经 :key 重建控件按新主题重绘 -->
      <MapboxDrawControl :key="color" v-model:features="features" :options="options" />
    </MapboxMap>
  </div>
</template>
```

## API

### `drawThemeStyles()`

入参 `options: DrawThemeOptions`（省略用默认值），返回 `StyleSpec[]`，可直接传给 [MapboxDrawControl](/docs/extensions/draw) 的 `options.styles`。

**color** (`string`): 非激活态主色，默认 #3b82f6。

**activeColor** (`string`): 激活态（绘制 / 选中）主色，默认 #f59e0b。

**fillOpacity** (`number`): 多边形填充不透明度，默认 0.1。

**lineWidth** (`number`): 线宽，默认 2。

**vertexRadius** (`number`): 顶点圆半径，默认 5。

## Changelog

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


## Sitemap

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