vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物

可以使用高德地图 JavaScript API 中提供的绘制工具库来实现这些功能。以下是简单的封装实现：

1. 引入高德地图 JavaScript API 和绘制工具库：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>

2. 定义绘制工具类：

class AMapDrawTool {
  constructor(map) {
    this.map = map;
    this.tool = new AMap.MouseTool(map);
    this.listeners = [];
  }

  addListener(eventType, handler) {
    this.listeners.push({ eventType, handler });
    this.tool.on(eventType, handler);
  }

  removeListeners() {
    this.listeners.forEach(({ eventType, handler }) => {
      this.tool.off(eventType, handler);
    });
    this.listeners = [];
  }

  drawRectangle() {
    this.tool.rectangle();
  }

  drawCircle() {
    this.tool.circle();
  }

  drawPolygon() {
    this.tool.polygon();
  }

  drawMarker() {
    this.tool.marker();
  }

  drawPolyline() {
    this.tool.polyline();
  }
}

3. 创建地图实例和绘制工具实例：

const map = new AMap.Map('map-container', {
  center: [116.397428, 39.90923],
  zoom: 13,
});

const drawTool = new AMapDrawTool(map);

4. 添加绘制完成事件监听器并处理绘制结果：

drawTool.addListener('draw', (e) => {
  const overlay = e.obj;
  console.log('绘制完成', overlay);

  // 处理绘制结果
});

// 移除事件监听器
drawTool.removeListeners();

5. 调用绘制方法开始绘制：

drawTool.drawRectangle();
drawTool.drawCircle();
drawTool.drawPolygon();
drawTool.drawMarker();
drawTool.drawPolyline();

以上是一个简单的封装实现，你可以根据自己的需求进行修改和扩展。