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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<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>