vue 高德地图api 利用mousetool绘制矢量图形

Vue 高德地图 API 提供了 `AMap.MouseTool` 类，可以用来绘制矢量图形。下面是一个简单的示例：

<template>
  <div id="map-container" style="height: 500px;"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      mouseTool: null
    };
  },
  mounted() {
    // 加载地图
    this.map = new AMap.Map('map-container', {
      zoom: 13, // 缩放级别
      center: [116.397428, 39.90923] // 地图中心点
    });

    // 创建 MouseTool 实例
    this.mouseTool = new AMap.MouseTool(this.map);

    // 监听绘制事件
    AMap.event.addListener(this.mouseTool, 'draw', e => {
      // 获取绘制的矢量图形对象
      const shape = e.obj;

      // 在地图上显示矢量图形
      this.map.add(shape);
    });
  },
  methods: {
    // 开始绘制矢量图形
    startDraw(type) {
      this.mouseTool[type]();
    }
  }
};
</script>

在上面的示例中，我们首先创建了一个地图实例并将其渲染到页面上。然后，我们创建了一个 MouseTool 实例，并在绘制事件中获取绘制的矢量图形对象并将其添加到地图上。最后，我们提供了一个 `startDraw` 方法，用于开始绘制不同类型的矢量图形。

可以通过调用 `startDraw` 方法来开始绘制矢量图形。例如，要绘制一个圆形，可以在模板中添加一个按钮并将其与 `startDraw` 方法关联：

<template>
  <div>
    <div id="map-container" style="height: 500px;"></div>
    <button @click="startDraw('circle')">绘制圆形</button>
  </div>
</template>

这将在地图上启动圆形绘制工具。其他可用的绘制工具包括 `rectangle`（矩形）、`polygon`（多边形）和 `polyline`（折线）。