drawThemeStyles
生成 mapbox-gl-draw 主题样式数组，支持要素级 user_color 覆盖。
简介
drawThemeStyles 依据主题选项生成完整的 mapbox-gl-draw styles 数组，配合 userProperties: true 使用；颜色取 coalesce(user_color, 主题色)，要素级 user_color 可覆盖主题色。
从 @movk/mapbox 自动导入，无需手写 import。
用法
切换主色生成主题样式（预置多边形即时呈现）：
<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.9],
[116.41, 39.9],
[116.41, 39.92],
[116.38, 39.92],
[116.38, 39.9]
]
]
}
}
])
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 的 options.styles。
color
string
非激活态主色，默认
#3b82f6。activeColor
string
激活态（绘制 / 选中）主色，默认
#f59e0b。fillOpacity
number
多边形填充不透明度，默认
0.1。lineWidth
number
线宽，默认
2。vertexRadius
number
顶点圆半径，默认
5。Changelog
No recent changes