高德地图绘制矩形、多边形围栏获取坐标点

1. 安装插件包

   npm install vue-amap -S  // vue-amap 高德地图的插件包
   npm install element-ui -S  //饿了吗ui框架
   npm install node-sass        // 如果没有使用sass可不用安装
   npm install sass-loader      //如果没有使用sass可不用安装
   // tips:如果安装了sass，出现运行错误，有可能是node-sass和sass-loader的版本不匹配的问题
   

2. main.js里面引用,高德地图平台,点我试试

   import VueAMap from 'vue-amap'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   Vue.use(ElementUI)
   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'
   })
   
   

3. 页面预览图

   

4. 整体代码如下

   <template>
       <div class="container">
           <div class="sidebar">
               <el-select v-model="fenceType" placeholder="请选择围栏类型" style="width: 240px" @change="handleChange">
                   <el-option v-for="item in fenceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
               <el-button type="primary" style="margin-left:10px" @click="removeFence(true)">清除围栏</el-button>
               <el-button type="primary" style="margin-left:10px" @click="resetFence">重绘围栏</el-button>
           </div>
           <div class="map">
               <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult">
               </el-amap-search-box>
               <el-amap ref="map" :center="center" class="amap-box" :zoom="zoom" :events="events"
                   :amap-manager="amapManager" />
           </div>
       </div>
   </template>
   
   <script>
   import VueAMap from "vue-amap";
   let amapManager = new VueAMap.AMapManager();
   
   export default {
       name: "Form",
       data() {
           return {
               mouseTool: null,
               amapManager,
               zoom: 12,
               center: [106.5572085, 29.6154994],
               events: {
                   init(o) {},
               },
               searchOption: {
                   city: "全国", //范围
                   citylimit: false, //是否限制城市内搜索
               },
               coordinates: [],
               fenceType: "",
               fenceTypeOptions: [
                   {
                       label: "圆形",
                       value: "circle",
                   },
                   {
                       label: "矩形",
                       value: "rectangle",
                   },
                   {
                       label: "多边形",
                       value: "polygon",
                   },
               ],
           };
       },
       methods: {
           handleChange(type) {
               this.removeFence();
               this.addFence(type);
           },
           addFence(type) {
               let self = this;
               if (this.coordinates.length > 0) {
                   this.$message.error("围栏已存在!");
                   return;
               }
               let map = amapManager.getMap();
               if (type) {
                   map.remove(type);
               }
               map.plugin(["AMap.MouseTool"], function () {
                   let mouseTool = new AMap.MouseTool(map);
                   self.mouseTool = mouseTool;
                   //添加事件
   
                   self.fenceTypeOptions.forEach((fence) => {
                       if (fence.value === type) {
                           mouseTool[type]();
                       } else {
                           return;
                       }
                   });
   
                   AMap.event.addListener(mouseTool, "draw", function (e) {
                       self.coordinates = [];
                       let path = e.obj.getPath();
                       path.forEach((e) => {
                           self.coordinates.push([e.getLng(), e.getLat()]);
                       });
                       mouseTool.close(false);
   
                       console.group("坐标点");
                       console.log(e.obj.getPath()); //获取路径/范围
                       console.groupEnd();
                   });
               });
           },
           removeFence(isShowAlert) {
               if (!this.coordinates.length && isShowAlert) {
                   return this.$message.error("当前地图没有围栏，无需删除");
               }
               this.coordinates = [];
               if (this.mouseTool) {
                   this.mouseTool.close(true);
               }
               if (this.fenceType) {
                   amapManager.getMap().remove(this.fenceType);
               }
           },
           resetFence() {
               if (!this.fenceType) return;
               this.handleChange(this.fenceType);
           },
           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;
               }
           },
       },
   };
   </script>
   
   <style lang="scss" scoped>
   .container {
       .map {
           flex: 1;
           height: 800px;
           position: relative;
       }
   
       .sidebar {
           text-align: left;
           margin-bottom: 10px;
       }
       .search-box {
           position: absolute;
           left: 30px;
           top: 30px;
       }
   }
   </style>