movkDrawModes
movk 自定义绘制模式集合（圆/椭圆/矩形/扇形），合并进 MapboxDraw.modes 使用。
简介
movkDrawModes 是 movk 提供的自定义绘制模式集合（圆 / 椭圆 / 矩形 / 扇形），与 MapboxDraw.modes 合并后注入 MapboxDrawControl 的 options.modes，再经 changeMode 切换。
从 @movk/mapbox 自动导入，无需手写 import。
用法
合并自定义模式后，用按钮切换绘制圆 / 椭圆 / 矩形 / 扇形：
<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 模式对象。各模式也可单独具名导入（drawRectangleMode / drawCircleMode / drawEllipseMode / drawSectorMode）。
draw_rectangle
DrawCustomMode
矩形绘制模式。
draw_circle
DrawCustomMode
圆绘制模式。
draw_ellipse
DrawCustomMode
椭圆绘制模式。
draw_sector
DrawCustomMode
扇形绘制模式。
Changelog
No recent changes