useMapboxDraw
注入当前 MapboxDrawControl 的绘制实例，在子组件中程序化控制绘制。
简介
useMapboxDraw 注入最近 <MapboxDrawControl> 提供的 MapboxDraw 实例（ShallowRef 包装），用于在子组件中程序化切换绘制模式、增删要素等。
必须在
<MapboxDrawControl> 子树内调用，否则抛错。实例在控件挂载后才赋值，使用前判空。用法
子组件经 useMapboxDraw() 注入实例并切换绘制模式；要素数量由控件的 v-model:features 回写：
<script setup lang="ts">
import { defineComponent, h } from 'vue'
import type { Feature } from 'geojson'
const features = ref<Feature[]>([])
// 子组件位于 <MapboxDrawControl> 子树内，经 useMapboxDraw() 注入绘制实例并切换模式
const DrawModes = defineComponent({
name: 'DrawModes',
setup() {
const draw = useMapboxDraw()
const setMode = (mode: string) => draw.value?.changeMode(mode as never)
const button = (label: string, mode: string) =>
h(
'button',
{
class:
'rounded bg-default/90 px-2 py-1 text-xs text-default ring ring-default hover:bg-elevated',
onClick: () => setMode(mode)
},
label
)
return () =>
h('div', { class: 'absolute bottom-2 left-2 z-10 flex gap-1' }, [
button('画点', 'draw_point'),
button('画线', 'draw_line_string'),
button('画面', 'draw_polygon')
])
}
})
</script>
<template>
<div class="relative h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.397, 39.908], zoom: 11 }"
>
<MapboxDrawControl v-model:features="features" position="top-left">
<DrawModes />
</MapboxDrawControl>
</MapboxMap>
<div
class="absolute right-2 top-2 z-10 rounded bg-default/90 px-2 py-1 text-xs text-default ring ring-default"
>
已绘制 {{ features.length }} 个要素
</div>
</div>
</template>
API
useMapboxDraw()
注入当前绘制实例，无参数。
返回 ShallowRef<MapboxDraw | undefined>：当前 MapboxDrawControl 的绘制实例；控件挂载前为 undefined。
Changelog
No recent changes