随机颜色上图完善

src/views/HeaderOne.vue

 <!--
  * @Author: zhaopenglong
  * @Date: 2021-07-06 16:17:54
- * @LastEditTime: 2021-09-10 18:08:12
+ * @LastEditTime: 2021-09-11 14:02:25
  * @LastEditors: 赵鹏龙
  * @Description: In User Settings Edit
  * @FilePath: \map_vue\src\views\HeaderWithStyleOne\header.vue
@@ -18,7 +18,21 @@
         :class="curType === 'upload' ? 'color' : ''"
         @click="uploadBtnClick"
       >
-        上传数据
+        轨迹上图
+      </div>
+      <div
+        class="uploading"
+        :class="curType === 'upload' ? 'color' : ''"
+        @click="areaCrash"
+      >
+        区域碰撞
+      </div>
+      <div
+        class="uploading"
+        :class="curType === 'upload' ? 'color' : ''"
+        @click="drawLine"
+      >
+        轨迹绘制
       </div>
       <div class="btnList" id="btnList" v-show="uploadFileFlag">
         <div
@@ -102,6 +116,11 @@
               >
             </div>
           </div>
+          <div>
+            <el-radio v-model="radio" label="1">高德转84坐标</el-radio>
+            <el-radio v-model="radio" label="2">百度转84坐标</el-radio>
+            <el-radio v-model="radio" label="3">84坐标</el-radio>
+          </div>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -118,6 +137,9 @@
 
 <script>
 import html2canvas from "html2canvas";
+import "@/utils/OpMap/tool.js";
+import "@/utils/OpMap/map.js";
+import "@/utils/OpMap/DrawModifySnap.js";
 import { uploadFile, uploadError } from "@/api/axiosapi";
 import XLSX from "xlsx";
 import { GuiJiPlayLayer } from "@/utils/OpMap/GuiJiPlayLayer.js";
@@ -164,7 +186,12 @@ export default {
       fileList: [], // excel文件列表,
       fileInfo: null,
       file: "", // file 文件
-      showPhoneList: []
+      showPhoneList: [],
+      drawCircleNumber: 0,
+      tableData: [], //上传文件之后得到的数据
+      rightShowArray: [], // 右侧的区域
+      rightTableData: [], // 两个圈碰撞出的区域
+      radio: "3" //3:默认 84 1:高德 2:百度
     };
   },
   //方法集合
@@ -195,6 +222,100 @@ export default {
       this.$emit("changeCurTypeFunc", "upload");
       this.$emit("uploadFileFlagFunc", false);
     },
+    /**
+     * @description: 区域碰撞 - 顶部
+     * @param {*}
+     * @return {*}
+     * @author: 赵鹏龙
+     */
+
+    areaCrash() {
+      this.drawCircleNumber++;
+      let self = this;
+      this.$setDraw({
+        zIndex: 0,
+        layerId: `drawLayer${self.drawCircleNumber}`, //必要
+        type: "Circle", //类型(Point、Circle、Polygon、LineString) //必要
+        borderColor: "rgb(255,190,0)",
+        fillColor: "rgba(255,164,0,0.12)",
+        strokeWidth: 2,
+        img: { src: require("@/assets/img/redpoint.png"), scale: 1 }
+      });
+      this.$getInteractions({
+        layerId: `drawLayer${self.drawCircleNumber}`
+      }).on("drawend", function(e) {
+        self.$clearLayer({ layerId: `drawLayer${self.drawCircleNumber}` });
+        self
+          .$getInteractions({ layerId: `drawLayer${self.drawCircleNumber}` })
+          .setActive(false);
+        let inCircleMessage = self.getPhoneInCircle(
+          e.feature.getGeometry().getExtent(),
+          self.tableData
+        );
+        self.getSetArray(inCircleMessage, `drawLayer${self.drawCircleNumber}`);
+      });
+    },
+    /**
+     * @description: 在圈内的点位数组
+     * @param {Array} getArray
+     * @param {ID}} circleId
+     * @return {*}
+     * @author: 赵鹏龙
+     */
+
+    getSetArray(getArray, circleId) {
+      let self = this;
+      this.rightShowArray.push({
+        array: getArray,
+        id: circleId
+      });
+      if (this.rightShowArray.length > 1) {
+        if (
+          this.rightShowArray[1].array[0].headerPhone ===
+          this.rightShowArray[0].array[0].headerPhone
+        ) {
+          this.rightShowArray.splice(0, 1);
+          this.rightTableData.push({
+            phone: self.rightShowArray[0].array[0].headerPhone
+          });
+          this.$emit("sendRightTableData", self.rightTableData);
+        } else {
+          this.rightShowArray = [];
+        }
+      }
+      // 将前一个数组和后一个数组进行比较 -> 相同的放到同一个数组中
+    },
+    /**
+     * @description: 得到在circle区域范围内的点位数据
+     * @param {[startX,startY,endX,endY]} circleArea
+     * @param {[]} Array
+     * @return {*}
+     * @author: 赵鹏龙
+     */
+    getPhoneInCircle(circleArea, Array) {
+      let returnArray = [];
+      Array.forEach(each => {
+        each.phoneArray.forEach(phoneEach => {
+          if (
+            parseFloat(circleArea[0]) <= parseFloat(phoneEach.longitude) &&
+            parseFloat(phoneEach.longitude) <= parseFloat(circleArea[2]) &&
+            parseFloat(circleArea[1]) <= parseFloat(phoneEach.latitude) &&
+            parseFloat(phoneEach.latitude) <= parseFloat(circleArea[3])
+          ) {
+            returnArray.push(each);
+          }
+        });
+      });
+      return returnArray;
+    },
+    /**
+     * @description: 轨迹绘制
+     * @param {*}
+     * @return {*}
+     * @author: 赵鹏龙
+     */
+
+    drawLine() {},
     changeCurType(item) {
       this.$emit("changeCurTypeFunc", item.type);
     },
@@ -256,6 +377,10 @@ export default {
       this.uploadFlag = false;
       this.imageUrl = false;
     },
+    // 返回随机的颜色
+    getRandomColor() {
+      return "#" + Math.floor(Math.random() * 16777215).toString(16);
+    },
     uploadFile() {
       let self = this;
       let file = this.file;
@@ -302,6 +427,7 @@ export default {
               sortArray[index].headerPhone = each;
               sortArray[index].time = headerTime[index];
             });
+            // 将数据分组
             json.forEach((each, index) => {
               if (index > 0) {
                 sortArray.forEach(sortEach => {
@@ -316,8 +442,42 @@ export default {
                 });
               }
             });
+            // 坐标系转换
+            if (self.radio === "3") {
+              self.tableData = sortArray;
+            } else if (self.radio === "1") {
+              // 高德 转 84
+              sortArray.forEach(each => {
+                // 转换坐标系
+                each.phoneArray.forEach(phoneEach => {
+                  phoneEach.longitude = self.gcj02towgs84(
+                    parseFloat(phoneEach.longitude),
+                    parseFloat(phoneEach.latitude)
+                  )[0];
+                  phoneEach.latitude = self.gcj02towgs84(
+                    parseFloat(phoneEach.longitude),
+                    parseFloat(phoneEach.latitude)
+                  )[1];
+                });
+              });
+            } else if (self.radio === "2") {
+              // 百度转84
+              sortArray.forEach(each => {
+                // 转换坐标系
+                each.phoneArray.forEach(phoneEach => {
+                  phoneEach.longitude = self.$wgs84Zbaidu(
+                    parseFloat(phoneEach.longitude),
+                    parseFloat(phoneEach.latitude)
+                  )[0];
+                  phoneEach.latitude = self.$wgs84Zbaidu(
+                    parseFloat(phoneEach.longitude),
+                    parseFloat(phoneEach.latitude)
+                  )[1];
+                });
+              });
+            }
+            // 绘制轨迹动画
             sortArray.forEach(each => {
-              console.log(each);
               let Coords = [];
               each.phoneArray.forEach(phoneEach => {
                 Coords.push([
@@ -337,11 +497,7 @@ export default {
               );
               each.animationFeature.pauseOrStart(false);
             });
-            sortArray.forEach(each => {
-              each.moveFlag = true;
-            });
-            self.$emit("getSortArray", sortArray); //给到父组件
-            self.dialogVisible = false;
+            // 画线
             sortArray.forEach(each => {
               let geoData = [];
               let Coords = [];
@@ -382,13 +538,20 @@ export default {
                 data: [{ geometry: Coords, attributions: null }],
                 text: "",
                 radius: "",
-                borderColor: "#123132",
-                fillColor: "#222293",
+                borderColor: self.getRandomColor(),
+                fillColor: self.getRandomColor(),
                 strokeWidth: 2,
                 img: { src: "static/img/redpoint.png", scale: 1 }
               });
             });
+            // 给控制播放的 flag
+            sortArray.forEach(each => {
+              each.moveFlag = true;
+            });
+            self.$emit("getSortArray", sortArray); //给到父组件
+            self.dialogVisible = false;
             self.$emit("showLeftDialog", true);
+            // 先将 animation 隐藏
           }
         });
       };
@@ -435,7 +598,7 @@ export default {
       });
     },
     downloadEx() {
-      window.open("/酒店.xls");
+      window.open("/电话.XLSX");
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）

src/views/Home.vue

@@ -5,6 +5,7 @@
         ref="headerOne"
         :curType="curType"
         :uploadFileFlag="uploadFileFlag"
+        @sendRightTableData="sendRightTableData"
         @uploadFileFlagFunc="uploadFileFlagFunc"
         @changeCurTypeFunc="changeCurTypeFunc"
         @getSortArray="getSortArray"
@@ -70,6 +71,9 @@ export default {
         // this.getList(1)
       }
     },
+    sendRightTableData(data) {
+      this.$refs.creatActiveMain.getRightTableData(data);
+    },
     getList(page) {
       const that = this;
       let params = {

src/views/creatActiveMain.vue

@@ -103,9 +103,14 @@
             </el-table-column>
           </el-table>
           <div>
-            <el-button @click="moveSelected" style="float:right;"
-              >查询全部</el-button
+            <el-button
+              @click="moveSelected"
+              size="mini"
+              style="float:right;background:transparent;color: #409EFF;"
             >
+              <span v-show="allMoveFlag % 2 === 0">全部播放</span>
+              <span v-show="allMoveFlag % 2 != 0">全部暂停</span>
+            </el-button>
           </div>
         </div>
         <div class="left_list_con_paginate">
@@ -192,7 +197,7 @@
 <script>
 import "@/utils/OpMap/map.js";
 import { getItem, delectExcel } from "@/api/axiosapi";
-
+import "@/utils/OpMap/tool.js";
 import "@/utils/OpMap/map.js";
 import "@/utils/OpMap/DrawModifySnap.js";
 
@@ -309,7 +314,8 @@ export default {
       drawCircleNumber: 0,
       rightShowArray: [],
       rightTableData: [],
-      rightTableDataFalg: false
+      rightTableDataFalg: false,
+      allMoveFlag: 0
     };
   },
   methods: {
@@ -382,27 +388,51 @@ export default {
      */
 
     handleSelectionChange(val) {
-      let self = this;
       this.multipleSelection = val;
-      console.log(val);
       this.selectedPhones = val;
+      // 先将所有的Layer都删除
+      this.tableData.forEach(each => {
+        this.$setVisible({
+          layerId: `layerId${each.headerPhone}`,
+          Visible: false
+        });
+      });
+      // 全选之后上图
+      val.forEach(each => {
+        this.$setVisible({
+          layerId: `layerId${each.headerPhone}`,
+          Visible: true
+        });
+      });
     },
-    /**
-     * @description: 移动选中的电话号码
-     * @param {*}
-     * @return {*}
-     * @author: 赵鹏龙
-     */
-
+    // 全部播放全部暂停
     moveSelected() {
-      this.selectedPhones.forEach(each => {
-        each.animationFeature.pauseOrStart(true);
-      });
+      if (this.allMoveFlag % 2 === 0) {
+        this.selectedPhones.forEach(each => {
+          each.animationFeature.pauseOrStart(true);
+        });
+      } else {
+        this.selectedPhones.forEach(each => {
+          each.animationFeature.pauseOrStart(false);
+        });
+      }
+      this.allMoveFlag = this.allMoveFlag + 1;
     },
     curPageChange(val) {
       this.currentPage = val;
       this.$emit("getListFunc", val);
     },
+    /**
+     * @description: 得到右侧的数据列表
+     * @param {Array} val
+     * @return {*}
+     * @author: 赵鹏龙
+     */
+
+    getRightTableData(val) {
+      this.rightTableData = val;
+      this.rightTableDataFalg = true;
+    },
     // 定位中心点
     mapFitByFeatures(featureArr) {
       if (!this.centralFlag) {
@@ -438,6 +468,13 @@ export default {
       }
     },
     btnHandleFunc() {
+      // 默认将弹出框 checkbox 选中
+      this.$nextTick(() => {
+        this.tableData.forEach(row => {
+          this.$refs.singleTable.toggleRowSelection(row, true);
+        });
+      });
+
       this.leftListBoxFlag = !this.leftListBoxFlag;
       if (this.leftListBoxFlag) {
         this.leftListBoxL = 0;
@@ -445,9 +482,15 @@ export default {
         this.leftListBoxL = "-33%";
       }
     },
+    // 点击当前行定位到当前图层
     handleCurrentChange(val) {
-      this.currentRow = val;
-      this.getItemInfo();
+      console.log(val);
+      this.$Map
+        .getView()
+        .setCenter([
+          parseFloat(val.phoneArray[0].longitude),
+          parseFloat(val.phoneArray[0].latitude)
+        ]);
     },
     getItemInfo() {
       let params = {