Vue DrawingManager是一個基于Vue.js和騰訊地圖API的繪制組件庫，可以幫助開發者在地圖上快速繪制圖形，并進行編輯，刪除等操作。

安裝：

npm install vue-drawingmanager --save

使用：

import Vue from 'vue'
import VueDrawingManager from 'vue-drawingmanager'
Vue.use(VueDrawingManager)

通過組件v-drawing-manager可以在地圖中添加繪制控件，繪制完成后可以將繪制的圖形傳遞給父組件，方便后續開發。

<template>
<div>
<tencent-map :center="center">
<v-drawing-manager @drawend="drawEnd" />
</tencent-map>
</div>
</template>
<script>
import { TencentMap, VDrawingManager } from "vue-drawingmanager";
export default {
components: {
TencentMap,
VDrawingManager,
},
data() {
return {
center: [106.580739, 29.615327],
result: null,
};
},
methods: {
drawEnd(e) {
this.result = e.overlay;
},
},
};
</script>

可以傳入props屬性控制繪制的類型，可以繪制多種圖形，包括折線，圓，多邊形等。

<template>
<div>
<tencent-map :center="center">
<v-drawing-manager :options="options" @drawend="drawEnd" />
</tencent-map>
</div>
</template>
<script>
import { TencentMap, VDrawingManager } from "vue-drawingmanager";
export default {
components: {
TencentMap,
VDrawingManager,
},
data() {
return {
center: [106.580739, 29.615327],
result: null,
options: {
drawingModes: ["polygon", "circle"],
},
};
},
methods: {
drawEnd(e) {
this.result = e.overlay;
},
},
};
</script>

總的來說，Vue DrawingManager是一個非常實用的地圖繪制組件庫，可以極大地方便前端開發人員的工作。希望大家喜歡！