--- title: "MapboxDrawControl" description: "Declarative drawing control built on mapbox-gl-draw, with v-model features and mode plus imperative instance methods." canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/extensions/draw" --- # MapboxDrawControl > Declarative drawing control built on mapbox-gl-draw, with v-model features and mode plus imperative instance methods. ## Introduction `MapboxDrawControl` provides declarative drawing on top of [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw): `v-model:features` controls the feature collection (assigning imports, drawing writes back), `v-model:mode` controls the current mode; it emits create / update / delete / selectionchange / modechange events; and exposes imperative methods via `defineExpose`. Child components can inject the draw context with [useMapboxDraw](https://mapbox.mhaibaraai.cn/docs/composables/use-mapbox-draw); once the parent map sets a `map-id`, that composable can also drive drawing from outside the component tree. ## Usage Draw points, lines, and polygons with the built-in toolbar — `v-model:features` reflects the live feature count: ```vue [DrawControlExample.vue] ``` ## Examples ### Imperative Actions Access the instance via [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref) to call `changeMode` / `deleteAll` (default toolbar is disabled): ```vue [DrawControlActionsExample.vue] ``` ## API ### Props ```ts /** * Props for the MapboxDrawControl component */ interface MapboxDrawControlProps { /** * 控件停靠位置；省略用地图默认位置 */ position?: mapboxgl.ControlPosition | undefined; /** * MapboxDraw 构造选项 */ options?: MapboxDraw.MapboxDrawOptions | undefined; features?: GeoJSON.Feature[] | undefined; mode?: string | undefined; } ``` ### Emits ```ts /** * Emitted events for the MapboxDrawControl component */ interface MapboxDrawControlEmits { selectionchange: (payload: [features: GeoJSON.Feature[]]) => void; update:features: (payload: [value: GeoJSON.Feature[] | undefined]) => void; update:mode: (payload: [value: string | undefined]) => void; create: (payload: [features: GeoJSON.Feature[]]) => void; update: (payload: [features: GeoJSON.Feature[]]) => void; delete: (payload: [features: GeoJSON.Feature[]]) => void; modechange: (payload: [mode: string]) => void; } ``` ### Slots ```ts /** * Slots for the MapboxDrawControl component */ interface MapboxDrawControlSlots { default(): any; } ``` ### Expose Access the component instance via [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).

Name	Type
`draw`	`Readonly < Ref < MapboxDraw \| undefined >>` Reference to the underlying MapboxDraw instance; undefined before mount
`whenReady`	`() => Promise < MapboxDraw >` Resolves once the draw instance is ready
`getAll`	`() => FeatureCollection \| undefined` Returns all current features as a collection
`getMode`	`() => string \| undefined` Returns the current draw mode
`add`	`( geojson : Feature \| FeatureCollection \| Geometry ) => Promise < string [] >` Adds features, syncs the model, and returns their ID list
`deleteAll`	`() => Promise < void >` Clears all features and syncs the model
`changeMode`	`( mode : string ) => Promise < void >` Switches the draw mode and syncs the model
`setFeatureProperty`	`( featureId : string , property : string , value : unknown ) => Promise < void >` Sets a feature's user_* property (drives theme styles) and syncs the model

## Changelog See commit history for [src/runtime/components/extensions/DrawControl.vue](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/components/extensions/DrawControl.vue). --- - [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw) ## Sitemap See the full [sitemap](https://mapbox.mhaibaraai.cn/sitemap.md) for all pages.