vue+高德地图系列三覆盖物相关(考勤围栏)前言一、新增围栏二、展示、编辑围栏总结

71 阅读 0 评论 47 点赞

我是靠谱客的博主野性巨人，最近开发中收集的这篇文章主要介绍vue+高德地图系列三覆盖物相关(考勤围栏)前言一、新增围栏二、展示、编辑围栏总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

前言
一、新增围栏
二、展示、编辑围栏
总结

前言

项目主要与考勤相关，所以需要围栏做考勤范围，主要利用高德地图的覆盖物，鼠标工具来展示、新增、编辑围栏.

本章只讲围栏相关，至于前期工作，可以看这里，怎么在vue项目里引入高德地图

一、新增围栏

新增围栏，其实就是在地图上添加覆盖物，高德地图的覆盖物分为点，圆形，矩形，多边形等，本章说的是多边形覆盖物；

而添加多边形覆盖物，要用到高德插件的鼠标工具 AMap.MouseTool

具体可参照JS API 示例，鼠标工具-绘制覆盖物

代码如下（示例）：

<template>
  <div class="common-containar">
      <!-- 地图 开始-->
      <div class="map_container">
        <div id="container"></div>
        <div class="input-card">
          <el-button id="clear" type="danger" @click="clear" plain size="small"
            >清除围栏</el-button
          >
        </div>
      </div>
      <!-- 地图 结束 -->
  </div>
</template>

<script>
import MapLoader from "@/assets/js/AMap.js";

export default {
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: [],
    };
  },
  mounted() {
    this.$nextTick(function () {
      let that = this;
      MapLoader().then(
        (AMap) => {
          that.map = new AMap.Map("container", {
            zoom: 12,
          });
          that.mouseTool = new AMap.MouseTool(that.map);
          // 监听draw事件可获取画好的覆盖物
          that.mouseTool.on("draw", function (e) {
          	// 这个判断是确保只能绘制一个覆盖物
            if (that.overlays.length == 0) {
              that.overlays.push(e.obj.getPath()); //获取路径/范围
            } else {
              that.clear();
            }
          });
          // 绘制围栏
          that.draw();
        },
        (e) => {
          console.log("地图加载失败", e);
        }
      );
    });
  },
  methods: {
    // 绘制覆盖物
    draw() {
      this.mouseTool.polygon({
        fillColor: "#00b0ff",
        strokeColor: "#80d8ff",
        //同Polygon的Option设置
      });
    },
    // 清除覆盖物
    clear() {
      // 清除地图上所有添加的覆盖物
      this.map.clearMap();
      // 清除路径数据
      this.overlays = [];
    },
  },
};
</script>

<style scoped>
/* map */
.map_container {
  position: relative;
  height: 100vh;
  background-color: #ffffff;
  padding: 5px;
}
#container {
  height: 100%;
}
.input-card {
  position: absolute;
  top: 15px;
  left: 15px;
}
</style>

总结：新增围栏这块儿没什么特别的，基本上照着例子来，就可以了

二、展示、编辑围栏

展示围栏，AMap.Polygon；
编辑围栏，AMap.PolyEditor

使用AMap.Polygon和AMap.PolyEditor插件绘制和编辑多边形

具体可参照JS API 示例，多边形的绘制和编辑

代码如下（示例）：

<template>
  <div class="common-containar" style="margin-bottom: 15px">
      <!-- 地图 开始-->
      <div class="map_container">
        <div id="container"></div>
        <div class="input-card">
          <el-button type="primary" size="small" id="open">开始编辑</el-button>
          <el-button type="danger" size="small" id="end">结束编辑</el-button>
        </div>
      </div>
      <!-- 地图 结束 -->
  </div>
</template>
<script>
import MapLoader from "@/assets/js/AMap.js";

export default {
  data() {
    return {
      map: null,
      polygon: null,
      polyEditor: null,
      overlays: [],
      path: [],
    };
  },
  mounted() {
    this.$nextTick(function () {
      let that = this;
      that.updateUser(); //初始化方法
      
 	  // 加载地图
      MapLoader().then(
        (AMap) => {
          that.map = new AMap.Map("container", {
            zoom: 12,
          });
          
          // 定时器，为了拿到后台返回的数据->that.path
          setTimeout(() => {
           // 展示围栏
            that.polygon = new AMap.Polygon({
              path: that.path,  
              strokeColor: "#FF33FF",
              strokeWeight: 6,
              strokeOpacity: 0.2,
              fillOpacity: 0.4,
              fillColor: "#1791fc",
              zIndex: 50,
            });
            that.map.add(that.polygon);
    		that.map.setFitView();
    		
           	// 编辑围栏
            that.polyEditor = new AMap.PolyEditor(that.map, that.polygon);
            that.polyEditor.on("end", function (event) {
              // 获取路径数据
              that.overlays.push(event.target.getPath());
            });
            document.getElementById("open").onclick = function () {
              that.polyEditor.open();
            };
            document.getElementById("end").onclick = function () {
              that.polyEditor.close();
            };
          }, 1000);
        },
        (e) => {
          console.log("地图加载失败", e);
        }
      );
    });
  },
  methods: {
  	/* 获取初始化数据 开始 */
    updateUser() {
   	  ...  
   	  ...        
   	  // 处理后台返回的数据
   	  this.path = this.formatArr(res.data.datas.children);
    },
    /* 获取初始化数据 结束 */

    /*更新提交 开始*/
    updateUserSubmit(editForm) {
      ...
      ...
      // 处理围栏数据，方便进行提交
      updateForm.dFencePointslist = JSON.stringify(
         this.formatRoutes(this.overlays[0])
      );    
    },
    /*更新提交 结束*/
    
    /* 对象转换成二维经纬度数组  开始*/
    formatArr(data) {
      const arr = [];
      data.forEach((item, index) => {
        const tmp = { ...item };
        arr.push(new AMap.LngLat(Number(tmp.longitude), Number(tmp.latitude)));
      });
      return arr;
    },
    /* 对象转换成二维数组 结束*/

    /* 数组对象换key  开始*/
    formatRoutes(data) {
      const arr = [];
      let obj = {};
      data.forEach((item, index) => {
        const tmp = { ...item };
        const { url, children, type } = item;
        obj = {
          latitude: tmp.lat,
          longitude: tmp.lng,
          queueIndex: index + 1,
        };
        arr.push(obj);
      });
      return arr;
    },
    /* 数组对象换key 结束*/
  },
};
</script>

<style scoped>
/* map */
.map_container {
  position: relative;
  height: 75vh;
  background-color: #ffffff;
  padding: 5px;
}
#container {
  height: 100%;
}
.input-card {
  position: absolute;
  top: 15px;
  left: 15px;
}
</style>

总结：编辑围栏这块儿，想要实现功能，照着例子来就行，难点在于正式做项目时，围栏数据的处理。我们需要的数据是二维数组，但后台返回的数据不一定你要什么人家就给什么，所以数据拆分拼装是一定得要的，而且是很重要的一环。
上述两个方法，一个是处理原始数据拿来给当地图用，一个是处理地图数据提交给后台，不一定适合所有项目，根据自己需求来吧