高德地图api，利用鼠标工具完成电子围栏-----圆形，矩形，自定义并获取坐标

需求：根据下拉框选择的不同，在地图上绘制不同的图形并获取坐标。这篇文章只完成了部分功能，电子围栏最终版在我的另一篇文章中，大家可以选择性查看。电子围栏终版

注意，这个要在全局中引入amap

1，先下载amap

2，main.js中全局注册

// 地图组件
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'key要去官网注册！！！！',
  plugin: [
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', // 地图工具条
    'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    'AMap.PolyEditor', // 编辑 折线、多边形
    'AMap.CircleEditor', // 圆形编辑器插件
    'MarkerClusterer', // 点聚合
    'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置,
    'AMap.DistrictSearch',
    'Geocoder'
  ],
  v: '1.4.15', // 默认高德 sdk 版本为 1.4.4
  uiVersion: '1.0.11'
})

页面代码：需要操作DOM，因此要把js代码放入mounted中

<template>
  <el-dialog
    :append-to-body="true"
    :visible.sync="dialog"
    :title="isAdd ? '新增' : '编辑'"
    :close-on-click-modal="false"
    :before-close="resetForm"
    width="1200px"
  >
    <div class="container">
      <div class="sidebar">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="210px"
        >
          <el-form-item label="围栏类型：" prop="fenceType">
            <el-select
              v-model="form.fenceType"
              placeholder=""
              style="width: 240px"
              @change="selChange"
            >
              <el-option
                v-for="item in supThis.dict['fenceType']"
                :key="item.id"
                :label="item.dictValue"
                :value="item.dictKey"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button :loading="loading" type="primary" @click="doSubmit"
            >提交</el-button
          >
        </div>
        <div>
          <Button @click="addFence" v-show="false">添加围栏</Button>
          <Button @click="removeFence">清除围栏</Button>
        </div>
      </div>
      <div class="map">
        <el-amap
          ref="map"
          class="amap-box"
          :zoom="12"
          :plugin="mapInfo.plugin"
          :events="mapInfo.events"
          :amap-manager="amapManager"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();

export default {
  inject: ["reload"],
  name: "Form",
  data() {
    return {
      form: {
        fenceType: null,
      },
      amapManager,
      zoom: 12,
      center: [106.5572085, 29.6154994],
      events: {
        init(o) {
          this.mapInfo.map = o;
        },
      },
      searchOption: {
        city: "重庆",
        citylimit: false,
      },
      fenceForm: {
        coordinate: [],
      },
      type: null,
      mouseTool: null,
      overlays: [],
      rules: {
        fenceType: [
          { required: true, message: "请选择围栏类型", trigger: "change" },
        ]
      },
      deptOption: [],
      point: [],
    };
  },
  created() {},
  mounted() {
    // this.init()
  },
  methods: {
    selChange(type) {
      // console.log(type);
      // console.log(typeof type);
      if (type === "1") {
        this.addFence("circle");
      } else if (type === "2") {
        this.addFence("rectangle");
      } else if (type === "3") {
        this.addFence("polygon");
      } else {
        return;
      }
    },
    addFence(type) {
      console.log(111);
      this.type = type;
      // console.log(res);
      let _this = this;
      let map = amapManager.getMap();
      if (this.fenceForm.coordinate.length > 0) {
        this.$Message.error("围栏已存在!");
        return;
      }
      if (this.type) {
        map.remove(this.type);
      }
      map.plugin(["AMap.MouseTool"], function () {
        let mouseTool = new AMap.MouseTool(map);
        _this.mouseTool = mouseTool;
        //添加事件
        if (type === "circle") {
          mouseTool.circle();
        } else if (type === "rectangle") {
          mouseTool.rectangle();
        } else if (type === "polygon") {
          mouseTool.polygon();
        } else {
          return;
        }
        AMap.event.addListener(mouseTool, "draw", function (e) {
          _this.fenceForm.coordinate = [];
          let path = e.obj.getPath();
          path.forEach((e) => {
            _this.fenceForm.coordinate.push([e.getLng(), e.getLat()]);
          });
          mouseTool.close(false);
          console.log(e.obj.getPath()); //获取路径/范围
        });
      });
    },
    removeFence() {
      this.form.fenceType = "";
      this.fenceForm.coordinate = [];
      if (this.mouseTool) {
        this.mouseTool.close(true);
      }
      if (this.type) {
        amapManager.getMap().remove(this.type);
      }
    },
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach((poi) => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length,
        };
        this.center = [center.lng, center.lat];
        this.zoom = 15;
      }
    },
    resetForm() {
      this.dialog = false;
      this.$refs["form"].resetFields();
      for (const key in this.form) {
        if (this.form[key] instanceof Array) this.form[key] = [];
        else this.form[key] = null;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .sidebar {
    width: 500px;
    margin: 0 20px 0 0;
    .dialog-footer {
      text-align: center;
    }
  }
  .map {
    flex: 1;
  }
}
</style>