MapboxDrawControl

基于 mapbox-gl-draw 的声明式绘制控件，v-model 受控要素与模式，并暴露命令式实例方法。

简介

MapboxDrawControl 基于 mapbox-gl-draw 提供声明式绘制：v-model:features 受控要素集合（赋值即导入、绘制即回写）、v-model:mode 当前模式；触发 create / update / delete / selectionchange / modechange 事件；并经 defineExpose 暴露命令式方法。子组件可用 useMapboxDraw 注入实例。

用法

用内置工具栏绘制点 / 线 / 面，v-model:features 实时回写要素数：

<script setup lang="ts">
import type { Feature } from 'geojson'

const features = ref<Feature[]>([])
</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" />
    </MapboxMap>
    <div
      class="absolute top-2 right-2 z-10 rounded bg-default/90 px-2 py-1 text-xs text-default ring ring-default"
    >
      已绘制 {{ features.length }} 个要素
    </div>
  </div>
</template>

示例

命令式操作

经 useTemplateRef 取实例，调用 changeMode / deleteAll（已关闭默认工具栏）：

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import type { Feature } from 'geojson'

const features = ref<Feature[]>([])
const drawRef = useTemplateRef('drawRef')

function draw(mode: string) {
  drawRef.value?.changeMode(mode)
}
</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="draw('draw_point')"> 点 </UButton>
      <UButton size="xs" color="neutral" variant="subtle" @click="draw('draw_line_string')">
        线
      </UButton>
      <UButton size="xs" color="neutral" variant="subtle" @click="draw('draw_polygon')">
        面
      </UButton>
      <UButton size="xs" color="error" variant="subtle" @click="drawRef?.deleteAll()">
        清空
      </UButton>
      <span class="ml-auto text-xs text-muted">{{ features.length }} 个要素</span>
    </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="{ displayControlsDefault: false }"
        />
      </MapboxMap>
    </div>
  </div>
</template>

API

Props

Prop	Default	Type
`position`		`"top-left" \| "top" \| "top-right" \| "right" \| "bottom-right" \| "bottom" \| "bottom-left" \| "left"` 控件停靠位置；省略用地图默认位置
`options`		`any` MapboxDraw 构造选项 https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/API.md
`features`		`GeoJSON.Feature<GeoJSON.Geometry, { [name: string]: any; }>[]`
`mode`		`string`

Emits

Event	Type
`update:features`	`[value: GeoJSON.Feature<GeoJSON.Geometry, { [name: string]: any; }>[]]`
`update:mode`	`[value: string]`
`create`	`[features: GeoJSON.Feature<GeoJSON.Geometry, { [name: string]: any; }>[]]`
`update`	`[features: GeoJSON.Feature<GeoJSON.Geometry, { [name: string]: any; }>[]]`
`delete`	`[features: GeoJSON.Feature<GeoJSON.Geometry, { [name: string]: any; }>[]]`
`selectionchange`	`[features: GeoJSON.Feature<GeoJSON.Geometry, { [name: string]: any; }>[]]`
`modechange`	`[mode: string]`

Slots

Slot	Type
`default`	`{}`

Expose

通过 useTemplateRef 访问组件实例。

Name	Type
`draw`	`() => MapboxDraw \| undefined` 获取底层 MapboxDraw 实例
`getAll`	`() => FeatureCollection \| undefined` 当前全部要素集合
`add`	`(geojson: Feature \| FeatureCollection \| Geometry) => string[] \| undefined` 添加要素，返回要素 id 列表
`deleteAll`	`() => void` 清空全部要素并同步模型
`changeMode`	`(next: string) => void` 切换绘制模式并同步模型
`setFeatureProperty`	`(featureId: string, property: string, value: unknown) => void` 设置要素 user_* 属性（驱动主题样式）并同步模型

Changelog

No recent changes

MapboxSnow

为地图添加降雪效果，options 透传 mapbox snow 规格。

movkDrawModes

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