vue使用el-amap手动绘制折线方法

在 Vue 中使用 `el-amap` 组件库手动绘制折线，可以通过引入其中的 `AmapManager` 组件来实现。以下是一个简单的实现方法：

1. 安装 `el-amap` 组件库：

npm install el-amap --save

2. 在 Vue 中引入 `AmapManager` 组件：

<template>
  <el-amap class="map-container">
    <el-amap-manager :plugin="plugin"></el-amap-manager>
    <el-button @click="drawPolyline">绘制折线</el-button>
  </el-amap>
</template>

<script>
import { AmapManager } from 'el-amap';

export default {
  components: {
    AmapManager,
  },
  data() {
    return {
      plugin: ['AMap.PolyEditor'],
      polyline: null,
    };
  },
  methods: {
    drawPolyline() {
      const editor = new AMap.PolyEditor(this.map, this.polyline);
      editor.open();

      editor.on('end', () => {
        const path = this.polyline.getPath();
        console.log('绘制完成', path);

        // 处理绘制结果
      });
    },
  },
};
</script>

3. 在 Vue 中创建地图实例和折线实例：

<script>
import { AmapManager } from 'el-amap';

export default {
  components: {
    AmapManager,
  },
  data() {
    return {
      plugin: ['AMap.PolyEditor'],
      mapOptions: {
        center: [116.397428, 39.90923],
        zoom: 13,
      },
      polylineOptions: {
        path: [],
        strokeColor: '#3366FF',
        strokeWeight: 5,
      },
      polyline: null,
    };
  },
  mounted() {
    this.polyline = new AMap.Polyline(this.polylineOptions);
    this.polyline.setMap(this.$amap.getMap());

    this.$amap.plugin('AMap.MouseTool', () => {
      const tool = new AMap.MouseTool(this.$amap.getMap());
      tool.on('draw', (e) => {
        const path = e.obj.getPath();
        console.log('绘制完成', path);

        // 处理绘制结果
        this.polyline.setPath(path);
        this.polyline.setMap(this.$amap.getMap());
      });
    });
  },
  methods: {
    drawPolyline() {
      const tool = new AMap.MouseTool(this.$amap.getMap());
      tool.polyline();
    },
  },
};
</script>

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