DrawControl

Example

Example Source Code

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map>
      <mb-tianditu-layer />
      <mb-draw-control position="top-right" />
    </mb-map>
  </div>
</template>

<script setup lang="ts"></script>

API

PROPS

Name	Description	Type	Default
functions	Functions	array（"point", "polyline", "polygon", "trash"）	["point", "polyline", "polygon", "trash"]
position	Position	string('top-left' ， 'top-right' ， 'bottom-left' ，'bottom-right')	top-right

EVENTS

Name	Description	Parameters
created	Map initialization completed event	-
draw.created	Drawing completed event	features: AnyArr
draw.delete	Delete element(s) event	features: AnyArr
draw.update	Drawing element(s) updated event	object — Contains action property and features

SLOTS

Name	Description

METHODS

Name	Description	Definition
add	Returns: Array — featureIds	geojson: object — geojson
get	Returns: object — feature geojson	featureId: string
getSelectedIds	Gets the IDs of the currently selected features	() => string[]
getSelected	Gets the currently selected features in GeoJSON format (as a FeatureCollection)	() => object — featureCollection
getAll	Gets all drawn features in GeoJSON format (as a FeatureCollection)	() => object — geojson featureCollection
delete	Deletes features based on their IDs	(ids: string[]) => void
deleteAll	Deletes all drawn features	() => void