VDrawControl
VDrawControl 组件用于绘制和编辑地图要素。基于 mapbox-gl-draw 扩展了以下模式：
扩展的绘制模式如下：所有的要素与属性都是实时更新的。
- 内置模式 ：
simple_select,direct_select,draw_point,draw_line_string,draw_polygon,draw_trash,draw_combine,draw_uncombine - 静态 ：
static - 绘制矩形 ：
draw_rectangle - 绘制圆形 ：
draw_circle - 绘制涂鸦 ：
draw_paint - 测距 ：
draw_line_measurement - 测面 ：
draw_area_measurement
完整示例
vue
<script lang="ts" setup>
import type { DrawDefaultDrawModeKey } from '@movk-repo/mapbox'
import type { FeatureCollection } from 'geojson'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VDrawControl, VMapbox, VTianditu, VUIControl } from '@movk-repo/mapbox'
import { drawData } from './draw-data'
const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()
const featureCollection = ref<FeatureCollection>(drawData)
const mode = ref<DrawDefaultDrawModeKey>('static')
</script>
<template>
<VMapbox
:access-token="accessToken" :default-options="{
center: [120.10, 30.21],
zoom: 12,
pitch: 41,
bearing: 0,
}"
>
<VTianditu :token="token" type="img_w" terrain />
<VDrawControl v-model="featureCollection" v-model:mode="mode" />
<VUIControl position="top-right">
{{ mode }}
</VUIControl>
</VMapbox>
</template>ts
import type { FeatureCollection } from 'geojson'
export const drawData = {
type: 'FeatureCollection',
features: [
{
id: '2tfK6aGd9mPRQ73a3L4QWOTKD5o4epBG',
type: 'Feature',
properties: {
draw_circle: true,
units: 'kilometers',
center: [
120.07152499624937,
30.22642833885307,
],
radius: 0.8,
},
geometry: {
coordinates: [
[
[
120.07152499624935,
30.233622901762864,
],
[
120.07070878445276,
30.23358825544717,
],
[
120.06990043493383,
30.233484650235884,
],
[
120.06910773418637,
30.233313084119565,
],
[
120.06833831786889,
30.23307520972405,
],
[
120.0675995972107,
30.232773318381277,
],
[
120.06689868758657,
30.23241031804439,
],
[
120.06624233994991,
30.23198970526044,
],
[
120.06563687578625,
30.23151553147158,
],
[
120.06508812621465,
30.230992363970103,
],
[
120.06460137582448,
30.23042524188449,
],
[
120.06418131178833,
30.22981962762142,
],
[
120.06383197874133,
30.22918135423249,
],
[
120.06355673986026,
30.22851656921358,
],
[
120.0633582445162,
30.227831675279,
],
[
120.06323840281092,
30.227133268681772,
],
[
120.06319836723983,
30.22642807567469,
],
[
120.06323852165589,
30.225722887724498,
],
[
120.06335847763897,
30.22502449610364,
],
[
120.06355707830203,
30.224339626489357,
],
[
120.06383240949602,
30.223674874200047,
],
[
120.06418181830225,
30.22303664069227,
],
[
120.06460193863259,
30.222431071929265,
],
[
120.06508872368859,
30.2218639992141,
],
[
120.06563748496536,
30.22134088305618,
],
[
120.06624293742382,
30.22086676061088,
],
[
120.06689925039471,
30.22044619719738,
],
[
120.06760010372463,
30.22008324236056,
],
[
120.0683387486236,
30.21978139089893,
],
[
120.06910807262817,
30.219543549233023,
],
[
120.06990066805659,
30.219372007437002,
],
[
120.07070890329773,
30.21926841720208,
],
[
120.07152499624935,
30.219233775943284,
],
[
120.07234108920098,
30.21926841720208,
],
[
120.07314932444213,
30.219372007437002,
],
[
120.07394191987053,
30.219543549233023,
],
[
120.0747112438751,
30.21978139089893,
],
[
120.07544988877406,
30.22008324236056,
],
[
120.076150742104,
30.22044619719738,
],
[
120.07680705507487,
30.22086676061088,
],
[
120.07741250753334,
30.22134088305618,
],
[
120.07796126881011,
30.2218639992141,
],
[
120.07844805386611,
30.222431071929265,
],
[
120.07886817419644,
30.22303664069227,
],
[
120.07921758300269,
30.223674874200047,
],
[
120.07949291419666,
30.224339626489357,
],
[
120.07969151485973,
30.22502449610364,
],
[
120.0798114708428,
30.225722887724498,
],
[
120.07985162525885,
30.22642807567469,
],
[
120.07981158968776,
30.227133268681772,
],
[
120.07969174798251,
30.227831675279,
],
[
120.07949325263844,
30.22851656921358,
],
[
120.07921801375737,
30.22918135423249,
],
[
120.07886868071037,
30.22981962762142,
],
[
120.07844861667421,
30.23042524188449,
],
[
120.07796186628406,
30.230992363970103,
],
[
120.07741311671245,
30.23151553147158,
],
[
120.07680765254878,
30.23198970526044,
],
[
120.07615130491213,
30.23241031804439,
],
[
120.075450395288,
30.232773318381277,
],
[
120.07471167462981,
30.23307520972405,
],
[
120.07394225831231,
30.233313084119565,
],
[
120.07314955756488,
30.233484650235884,
],
[
120.07234120804594,
30.23358825544717,
],
[
120.07152499624935,
30.233622901762864,
],
],
],
type: 'Polygon',
},
},
{
id: 'DDtQHNxsebpWMmz2FG6iewZIdIrFeeOT',
type: 'Feature',
properties: {
draw_polygon: true,
},
geometry: {
coordinates: [
[
[
120.094366462469,
30.224382945970262,
],
[
120.10273718950197,
30.223378630566216,
],
[
120.10172267390504,
30.214838196315824,
],
[
120.09016660131795,
30.21651972087338,
],
[
120.09016398634714,
30.222236531268422,
],
[
120.094366462469,
30.224382945970262,
],
],
],
type: 'Polygon',
},
},
{
id: 'QYHOyh4ziFW6dSIBCZuzMKSbSIZBuMza',
type: 'Feature',
properties: {
draw_line_string: true,
},
geometry: {
coordinates: [
[
120.07459167402243,
30.209954909910948,
],
[
120.07593643405653,
30.199446734999555,
],
[
120.08353889058151,
30.20037640503729,
],
[
120.08828852122076,
30.19256004768114,
],
],
type: 'LineString',
},
},
{
id: 'QSFbwj5K7DxFDRCiXIxnqj2UMRPWkvs3',
type: 'Feature',
properties: {},
geometry: {
coordinates: [
120.10279555158803,
30.201491489598837,
],
type: 'Point',
},
},
{
id: 'dzEVpMjqeQEE8gqK4N9iT7bGZ5P5CUGG',
type: 'Feature',
properties: {
draw_paint: true,
},
geometry: {
coordinates: [
[
120.1148980698531,
30.220421122268064,
],
[
120.1148980698531,
30.220421122268064,
],
[
120.11490209609309,
30.220580259809665,
],
[
120.11490612454793,
30.220739484638287,
],
[
120.11491418810965,
30.221058196444886,
],
[
120.11510085262364,
30.221218920246102,
],
[
120.11510240978669,
30.22137655245909,
],
[
120.11528853630034,
30.221536932564078,
],
[
120.11566116689528,
30.2218580173286,
],
[
120.11566116689528,
30.2218580173286,
],
[
120.11566116689528,
30.2218580173286,
],
[
120.11566116689528,
30.2218580173286,
],
[
120.11603264406119,
30.222021553649128,
],
[
120.11640454607101,
30.222185276727387,
],
[
120.11696231840955,
30.22235209939616,
],
[
120.11733179746739,
30.222670633203023,
],
[
120.11785610037765,
30.222969191967067,
],
[
120.11801791896977,
30.223424559538884,
],
[
120.11800164785251,
30.223881531241673,
],
[
120.1179908169928,
30.224185713011238,
],
[
120.1172640658973,
30.224652288754058,
],
[
120.11617683129549,
30.225276051054266,
],
[
120.11474226249959,
30.225602526113022,
],
[
120.11420258250496,
30.225763016337837,
],
[
120.11402403008822,
30.225765978981087,
],
[
120.11402403008822,
30.225765978981087,
],
[
120.11420258250496,
30.225763016337837,
],
[
120.11473784041942,
30.225754135033583,
],
[
120.11544841471022,
30.225896310298864,
],
[
120.11635579960159,
30.22668088672178,
],
[
120.11654498499456,
30.227158578536617,
],
[
120.11619304546429,
30.227325936276387,
],
[
120.11513456219694,
30.22782927491221,
],
[
120.1137106346016,
30.228180365547516,
],
[
120.11170834375702,
30.22849076226754,
],
[
120.11043026981753,
30.228480466576116,
],
[
120.10971005796591,
30.228493257202956,
],
[
120.10971005796591,
30.228493257202956,
],
[
120.11006976542012,
30.228799906954052,
],
[
120.1104418259398,
30.229287350213,
],
[
120.11081769063469,
30.229938928006405,
],
[
120.11100854916094,
30.230427669180926,
],
[
120.11100993503845,
30.23074527212019,
],
[
120.11100861028666,
30.23090015908093,
],
[
120.11045801346057,
30.23104958093012,
],
[
120.10753349695153,
30.23117841821862,
],
[
120.10007629673464,
30.230648778045506,
],
[
120.09935624376186,
30.23064426441985,
],
[
120.0982771450038,
30.23032244634841,
],
[
120.0980974482631,
30.230164808483764,
],
[
120.0980974482631,
30.230164808483764,
],
[
120.0980974482631,
30.230164808483764,
],
[
120.0980974482631,
30.230164808483764,
],
[
120.09827725460343,
30.230165863018243,
],
[
120.09845697999282,
30.230323509190114,
],
[
120.09845688033539,
30.230480117814665,
],
[
120.09827519770437,
30.23096500849671,
],
[
120.09809351271156,
30.231291867796983,
],
[
120.09773232202116,
30.23145371532344,
],
[
120.09773133043296,
30.23161802076382,
],
[
120.09755111850973,
30.23161683756824,
],
[
120.09719075350955,
30.231614471563404,
],
[
120.09628935730416,
30.231613088582023,
],
[
120.09538519976786,
30.231624544355682,
],
[
120.0946590153003,
30.231642161846224,
],
[
120.09393277389984,
30.231499846786605,
],
[
120.09265862400724,
30.23137042638743,
],
[
120.09211096985587,
30.231383517611917,
],
[
120.09120486257632,
30.231229635977485,
],
[
120.09030352724903,
30.231065106830343,
],
[
120.08885661144438,
30.230750998187276,
],
[
120.08831410336114,
30.230594073216793,
],
[
120.08741105595732,
30.23027875018245,
],
[
120.08741105595732,
30.23027875018245,
],
],
type: 'LineString',
},
},
{
id: 'XQjlGJFr0ytOxnPrWoCUqHaPNAS7psV2',
type: 'Feature',
properties: {
draw_area_measurement: true,
units: 'kilometers',
area: 1.42,
},
geometry: {
coordinates: [
[
[
120.09391403315425,
30.211558560715545,
],
[
120.10096353179688,
30.205352736656167,
],
[
120.09623202576614,
30.200728639637603,
],
[
120.0887158961732,
30.198995999305154,
],
[
120.08358518701363,
30.209452974220696,
],
[
120.09391403315425,
30.211558560715545,
],
],
],
type: 'Polygon',
},
},
{
id: 'k5v0QA3VoLrAVGYpwztPs8Wmzv0dxbQ0',
type: 'Feature',
properties: {
draw_line_measurement: true,
units: 'kilometers',
total_distance: 3.4,
initial_distances: [
0,
0.6,
1.72,
3.4,
],
vertex: [
'B0P9c8cpo9QPs5ChpLtmKHMSnysucoRU',
'494maR5UUWGbhYHiMBIjiuFdWqvV44Z4',
'V1CMuvgbr2Nwg5MFH2xT2ADGVsOWb0Gq',
'U08qeb6seCV3kIdiaIDAtQftobhBrD3R',
'Zm39dwlcFwnmdyZaJD0IUCp1k9tyh5bF',
],
},
geometry: {
coordinates: [
[
120.11037172977308,
30.195921943380952,
],
[
120.1153273971895,
30.199187554302682,
],
[
120.1222938287313,
30.207239592643703,
],
[
120.12560932103429,
30.222099995711503,
],
],
type: 'LineString',
},
},
{
id: 'B0P9c8cpo9QPs5ChpLtmKHMSnysucoRU',
type: 'Feature',
properties: {
parent: 'k5v0QA3VoLrAVGYpwztPs8Wmzv0dxbQ0',
draw_line_measurement: true,
distance: 0,
units: 'kilometers',
},
geometry: {
coordinates: [
120.11037172977308,
30.195921943380952,
],
type: 'Point',
},
},
{
id: '494maR5UUWGbhYHiMBIjiuFdWqvV44Z4',
type: 'Feature',
properties: {
parent: 'k5v0QA3VoLrAVGYpwztPs8Wmzv0dxbQ0',
draw_line_measurement: true,
distance: 0.6,
units: 'kilometers',
},
geometry: {
coordinates: [
120.1153273971895,
30.199187554302682,
],
type: 'Point',
},
},
{
id: 'V1CMuvgbr2Nwg5MFH2xT2ADGVsOWb0Gq',
type: 'Feature',
properties: {
parent: 'k5v0QA3VoLrAVGYpwztPs8Wmzv0dxbQ0',
draw_line_measurement: true,
distance: 1.72,
units: 'kilometers',
},
geometry: {
coordinates: [
120.1222938287313,
30.207239592643703,
],
type: 'Point',
},
},
{
id: 'U08qeb6seCV3kIdiaIDAtQftobhBrD3R',
type: 'Feature',
properties: {
parent: 'k5v0QA3VoLrAVGYpwztPs8Wmzv0dxbQ0',
draw_line_measurement: true,
distance: 3.4,
units: 'kilometers',
},
geometry: {
coordinates: [
120.12560932103429,
30.222099995711503,
],
type: 'Point',
},
},
],
} as FeatureCollection隐藏源代码
自定义绘制 UI
将 controls 的值设置为 []，通过改变 mode 值来切换绘制模式。
draw-control-ui.vue
vue
<script lang="ts" setup>
import type { FeatureCollection } from 'geojson'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VDrawControl, VMapbox, VTianditu, VUIControl } from '@movk-repo/mapbox'
const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()
const modesOpt = [
{ label: '静态', value: 'static' },
{ label: '点', value: 'draw_point' },
{ label: '线', value: 'draw_line_string' },
{ label: '面', value: 'draw_polygon' },
{ label: '矩形', value: 'draw_rectangle' },
{ label: '圆', value: 'draw_circle' },
{ label: '涂鸦', value: 'draw_paint' },
{ label: '测距', value: 'draw_line_measurement' },
{ label: '测面', value: 'draw_area_measurement' },
{ label: '简单选择', value: 'simple_select' },
{ label: '直接选择', value: 'direct_select' },
{ label: '合并', value: 'draw_combine' },
{ label: '拆分', value: 'draw_uncombine' },
{ label: '删除', value: 'draw_trash' },
]
const featureCollection = ref<FeatureCollection>()
const mode = ref()
</script>
<template>
<VMapbox :access-token="accessToken">
<VTianditu :token="token" />
<VDrawControl v-model="featureCollection" v-model:mode="mode" :controls="[]" />
<VUIControl style="padding: 0;" flex="~ col">
<ElButton
v-for="opt in modesOpt" :key="opt.value" :type="mode === opt.value ? 'primary' : 'default'" size="small"
style="margin-left: 0;"
plain
@click="mode = opt.value"
>
{{ opt.label }}
</ElButton>
</VUIControl>
<VUIControl position="top-right">
{{ mode }}
</VUIControl>
</VMapbox>
</template>隐藏源代码
自定义绘制样式
通过 drawStyles 属性来覆盖默认样式。
draw-control-style.vue
vue
<script lang="ts" setup>
import type { DrawControlProps, DrawDefaultDrawModeKey } from '@movk-repo/mapbox'
import type { FeatureCollection } from 'geojson'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VDrawControl, VMapbox, VSprite, VTianditu, VUIControl } from '@movk-repo/mapbox'
const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()
const featureCollection = ref<FeatureCollection>({
type: 'FeatureCollection',
features: [
{
id: 'XsG3nReDd3lVJ3Nz52pPy3Q7bQeTIiD3',
type: 'Feature',
properties: {
draw_area_measurement: true,
units: 'kilometers',
area: 1.62,
},
geometry: {
coordinates: [
[
[
120.30632221495608,
30.313036541252416,
],
[
120.30803919981116,
30.306810935760154,
],
[
120.3222901741093,
30.30770033218444,
],
[
120.32074488773941,
30.317631377352456,
],
[
120.30477692858614,
30.316890289328867,
],
[
120.30632221495608,
30.313036541252416,
],
],
],
type: 'Polygon',
},
},
],
})
const mode = ref<DrawDefaultDrawModeKey>('draw_area_measurement')
const drawStyles: DrawControlProps['drawStyles'] = [
{
id: 'gl-draw-polygon-fill',
type: 'fill',
filter: ['all', ['==', '$type', 'Polygon']],
paint: {
'fill-pattern': 'diagonal_stripes',
'fill-opacity': 0.6,
},
},
{
id: 'gl-draw-line',
type: 'line',
paint: {
'line-color': '#e63946',
'line-width': 2,
},
},
{
id: 'gl-draw-label',
type: 'symbol',
layout: {
'text-field': '{user_area}',
'text-size': 18,
'text-allow-overlap': true,
'text-font': ['Roboto Medium'],
},
paint: {
'text-color': '#303133',
'text-halo-color': '#ffffff',
'text-halo-width': 2,
},
},
{
id: 'gl-draw-midpoint',
type: 'circle',
filter: [
'all',
['==', 'meta', 'vertex'],
],
paint: {
'circle-radius': 3,
'circle-color': '#e63946',
},
},
]
</script>
<template>
<VMapbox :access-token="accessToken" :center="[120.31652749233064, 30.312748263581724]" :zoom="12.226930267722977">
<VSprite id="diagonal_stripes" icon-color="#252422" image="/mapbox/sprite/diagonal_stripes_texture.svg" />
<VTianditu type="ter_w" :token="token" />
<VDrawControl
v-model="featureCollection"
v-model:mode="mode" :controls="['area_measurement']"
:draw-styles="drawStyles"
/>
<VUIControl position="top-right">
{{ mode }}
</VUIControl>
</VMapbox>
</template>隐藏源代码
API
drawControlProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelValue | 绘制的所有要素 | object | - |
| mode | 绘制模式 | string | simple_select |
| controls | 显示的控件 | Array | - |
| extraModes | 自定义控件 | object | - |
| displayControlsDefault | 显示默认控件 | boolean | true |
| midpoints | 是否创建中点 | boolean | false |
| keybindings | 是否启用键盘交互绘图 | boolean | true |
| touchEnabled | 是否启用触摸交互绘图 | boolean | true |
| boxSelect | 是否启用 shift+ click 拖动框选特征 | boolean | true |
| clickBuffer | 点击缓冲区 | number | 2 |
| touchBuffer | 触摸缓冲区 | number | 25 |
| userProperties | 是否启用用户样式属性 | boolean | true |
| suppressAPIEvents | 是否启用 API 事件 | boolean | true |
| drawStyles | 用于覆盖默认样式 | Array | - |
| drawUnits | 绘制单位（测距、测面、圆形） | string | kilometers |
| defaultOptions | 配置项 （覆盖同名属性） | object | - |
drawControlEmits
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 更新绘制要素 | Function |
| update:mode | 更新绘制模式 | Function |
| add | 控件添加完成后触发 | Function |
| remove | 控件移除完成后触发 | Function |
| drawCreate | 绘制要素创建后触发 | Function |
| drawDelete | 绘制要素删除后触发 | Function |
| drawUpdate | 绘制要素更新后触发 | Function |
| drawSelectionchange | 绘制选择变更后触发 | Function |
| drawRender | 绘制渲染后触发 | Function |
| drawCombine | 克隆要素合并后触发 | Function |
| drawUncombine | 克隆要素拆分后触发 | Function |
| drawModechange | 模式变更后触发 | Function |
| drawActionable | 动作状态更新后触发 | Function |
Inject
hooks/symbol.ts
typescript
export const drawKey: InjectionKey<ShallowRef<MapboxDraw | undefined>> = Symbol('Draw')hooks/useDraw.ts
ts
export function useDraw() {
const draw = inject(drawKey)
if (!draw) {
consola.warn('No Draw provided')
}
return unref(draw)
}类型定义
DrawControlLoadEvent
typescript
export interface DrawControlLoadEvent {
type: 'draw'
control: MapboxDraw
map: Map
}