vue中高德地图绘制多边形并编辑

好的，您提到的问题是关于在 Vue 中绘制多边形并进行编辑的问题，对吗？那么，您可以使用高德地图 JavaScript API 中提供的绘制工具类来实现这一功能。具体步骤如下：

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

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>

2. 在 Vue 组件中创建地图容器，生成地图实例，并加载绘制工具类库：

<template>
  <div id="mapContainer"></div>
</template>

<script>
export default {
  name: 'Map',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new AMap.Map('mapContainer', {
        zoom: 10,
        center: [116.397428, 39.90923],
      });
      AMap.plugin(['AMap.MouseTool'], () => {
        // 初始化鼠标绘制工具
        const mouseTool = new AMap.MouseTool(map);
        // 监听draw事件，获取绘制的图形对象
        AMap.event.addListener(mouseTool, 'draw', (e) => {
          console.log(e.obj); // e.obj为绘制出来的图形对象
          // TODO: 将图形对象保存到state中，用于后续编辑
        });
      });
    },
  },
};
</script>

3. 在绘制完成后，将绘制的图形对象保存到 state 中，以便进行后续编辑：

// 将绘制的图形对象保存到state中
// state.polygons为一个数组，保存所有已绘制的多边形对象
state.polygons.push(e.obj);

4. 对已绘制的多边形对象进行编辑：

// 对已绘制的多边形对象进行编辑
const drawPolygon = (polygon) => {
  // 使用多边形编辑插件
  const polygonEditor = new AMap.PolyEditor(map, polygon);
  // 开启编辑模式
  polygonEditor.open();
  // 监听编辑完成事件，保存编辑后的多边形对象到state中
  AMap.event.addListener(polygonEditor, 'end', (e) => {
    console.log(e.target); // e.target为当前编辑的多边形对象
    // TODO: 保存编辑后的多边形对象到state中
  });
};

希望这个回答能够帮助您解决问题。如果您还有其他问题，可以继续向我提出。