From 02a98b972b18bbf91855ff8f4fb4777254743736 Mon Sep 17 00:00:00 2001
From: xuechunyuan <17853500702@163.com>
Date: Fri, 13 Jan 2023 09:43:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=A6=E8=BE=86=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                |   4 +-
 src/views/components/carMile.vue |   6 +-
 src/views/components/pathMap.vue | 164 +++++++++++++++++++++----------
 3 files changed, 121 insertions(+), 53 deletions(-)

diff --git a/public/index.html b/public/index.html
index d3c56af..c159b2e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,8 +6,10 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
+    <!-- <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script> -->
     <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=FLPUL1102GNBvV2nVDy5kDIjYM9VGyYl"></script>
+    <script src="//mapv.baidu.com/build/mapv.min.js"></script>
+    <script src="https://unpkg.com/mapvgl@1.0.0-beta.168/dist/mapvgl.min.js"></script>
     <style>
       *{
         padding: 0;
diff --git a/src/views/components/carMile.vue b/src/views/components/carMile.vue
index ec08efe..7a6fdf5 100644
--- a/src/views/components/carMile.vue
+++ b/src/views/components/carMile.vue
@@ -27,7 +27,7 @@
         <tbody>
           <tr v-for="(item, index) in carMile" :key="'car' + index">
             <td>{{ index+ 1}}</td>
-            <td>{{ item.cardNo }}</td>
+            <td @click="queryMap(item)"><a href="javascript:;">{{ item.cardNo }}</a></td>
             <td>{{ item.mile }}</td>
             <td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
           </tr>
@@ -50,6 +50,10 @@ export default {
     this.queryYesterdayMile();
   },
   methods: {
+    //定位
+    queryMap(item) {
+      this.$emit('queryLunz')
+    },
     //昨日里程
     queryYesterdayMile() {
       lunzApi.getYesterdayMile(key).then(res => {
diff --git a/src/views/components/pathMap.vue b/src/views/components/pathMap.vue
index de52796..8c6b4fd 100644
--- a/src/views/components/pathMap.vue
+++ b/src/views/components/pathMap.vue
@@ -20,6 +20,7 @@ export default {
       carList: carList,//车辆设备
       markList: [],//标注点记录
       polyline: null,//昨日轨迹
+      viewData: [],//点聚合坐标集合
     }
   },
   beforeDestroy() {
@@ -47,25 +48,15 @@ export default {
       var point = new BMapGL.Point(118.880278, 35.649947);
       this.baiduMap.centerAndZoom(point, 11);
       this.baiduMap.enableScrollWheelZoom(true);
-      this.baiduMap.setMapStyleV2({     
+      this.baiduMap.setMapStyleV2({
         styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
       });
-      // this.baiduMap.setMapType(BMAP_SATELLITE_MAP); 
+      this.view = new mapvgl.View({
+        map: this.baiduMap
+      });
       var bdary = new BMapGL.Boundary();
       bdary.get("日照市莒县", rs => {
         var count = rs.boundaries.length;
-        // var EN_JW = "180, 90;";//东北角
-        // var NW_JW = "-180,  90;";//西北角
-        // var WS_JW = "-180, -90;";//西南角
-        // var SE_JW = "180, -90;";//东南角
-        // //添加环形遮罩层
-        // var ply1 = new BMapGL.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
-        //   strokeColor: "none",
-        //   fillColor: "#0e94eb",
-        //   fillOpacity: 0.5,
-        //   strokeOpacity: 0.5
-        // }); //建立多边形覆盖物
-        // this.baiduMap.addOverlay(ply1);
         for (var i = 0; i < count; i++) {
           var xyArr = rs.boundaries[i].split(';');
           var ptArr = [];
@@ -91,61 +82,132 @@ export default {
           // this.baiduMap.addOverlay(ply);  //添加覆盖物
         }
       })
-      this.carList.map((item, index) => {
-        this.markList.map(mark => {
-          this.baiduMap.removeOverlay(mark);
+      this.baiduMap.addEventListener('tilesloaded', () => {
+        this.carList.map((item, index) => {
+          this.markList = [];
+          this.queryLunz(item.deviceId, item.key, item.cardNo, index);
         })
-        this.markList = [];
-        this.queryLunz(item.deviceId, item.key);
         this.setInterval = setInterval(() => {
+          this.view.removeAllLayers();
           this.markList.map(mark => {
             this.baiduMap.removeOverlay(mark);
           })
           this.markList = [];
-          this.queryLunz(item.deviceId, item.key);
+          // this.viewData = [];
+          this.carList.map((item, index) => {
+            this.queryLunz(item.deviceId, item.key, item.cardNo, index);
+
+          })
         }, 20 * 1000)
       })
+
     },
     //查询定位
-    queryLunz(deviceId, key) {
-      lunzApi.getCarUserSimpleByImei(this.appKey, deviceId).then(res1 => {
-        let carInfo = res1.Data;
-        lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
-          // 创建小车图标
-          var myIcon = new BMapGL.Icon(require("@/assets/images/car.png"), new BMapGL.Size(25, 25));
-          lunzApi.getBaiduNear(this.appKey, res.Data.BaiduLat, res.Data.BaiduLng).then(res2 => {
-            // 创建Marker标注，使用小车图标
-            let lng = res.Data.BaiduLng;
-            let lat = res.Data.BaiduLat;
-            let pt = new BMapGL.Point(lng, lat);
-            var marker = new BMapGL.Marker(pt, {
-              icon: myIcon
-            });
-            // 将标注添加到地图
-            this.baiduMap.addOverlay(marker);
-            this.markList.push(marker);
-            let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
-                            <div>车牌号：${carInfo.PlateNumber}</div>
+    queryLunz(deviceId, key, carNo, index) {
+      // lunzApi.getCarUserSimpleByImei(this.appKey, deviceId).then(res1 => {
+      // let carInfo = res1.Data;
+      lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
+        // 创建小车图标
+        var myIcon = new BMapGL.Icon(require("@/assets/images/car.png"), new BMapGL.Size(25, 25));
+        lunzApi.getBaiduNear(this.appKey, res.Data.BaiduLat, res.Data.BaiduLng).then(res2 => {
+          // 创建Marker标注，使用小车图标
+          let lng = res.Data.BaiduLng;
+          let lat = res.Data.BaiduLat;
+          let pt = new BMapGL.Point(lng, lat);
+          var marker = new BMapGL.Marker(pt, {
+            icon: myIcon
+          });
+          // 将标注添加到地图
+          this.baiduMap.addOverlay(marker);
+          // this.viewData.push({
+          //   geometry: {
+          //     type: 'Point',
+          //     coordinates: [lng, lat]
+          //   },
+          //   objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
+          // })
+          this.markList.push(marker);
+          let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
+                            <div>车牌号：${carNo}</div>
                             <div>设备位置：${res2.Data}</div>
                             <div>最后定位时间：${res.Data.GPSTimeStamp.replace("T", " ")}</div>
                             <div>状态：${this.locationStatus[res.Data.SbcStatus]}</div>
                             <div>时速：${res.Data.spd}km/h</div>
-                            <div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${carInfo.DeviceNumber}">行车轨迹</div>
+                            <div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${key}">行车轨迹</div>
                         </div>`;
-            let infoWindow = new BMapGL.InfoWindow(sContent);
-            // marker添加点击事件
-            infoWindow.addEventListener('open', () => {
-              document.getElementById('btnPath_' + carInfo.DeviceNumber).addEventListener('click', () => {
-                this.queryPath(carInfo.DeviceNumber)
-              })
-            });
-            marker.addEventListener('click', () => {
-              this.openInfo(infoWindow, pt);
-            });
-          })
+          let infoWindow = new BMapGL.InfoWindow(sContent);
+          // marker添加点击事件
+          infoWindow.addEventListener('open', () => {
+            document.getElementById('btnPath_' + key).addEventListener('click', () => {
+              this.queryPath(key)
+            })
+          });
+          marker.addEventListener('click', () => {
+            this.openInfo(infoWindow, pt);
+          });
+          //最后一个调用点聚合
+          // if (index == this.carList.length - 1) {
+          //   console.log('点聚合')
+          //   let clusterLayer = new mapvgl.ClusterLayer({
+          //     // minSize: 1, // 聚合点显示的最小直径
+          //     // maxSize: 15, // 聚合点显示的最大直径
+          //     // clusterRadius: 150, // 聚合范围半径
+          //     // gradient: { 0: 'blue', 0.5: 'green', 1.0: 'red' }, // 聚合点颜色梯度
+          //     // maxZoom: 19, // 聚合的最大级别，当地图放大级别高于此值将不再聚合
+          //     // minZoom: 5, // 聚合的最小级别，当地图放大级别低于此值将不再聚合
+          //     // // 是否显示文字
+          //     // showText: true,
+          //     // // 开始聚合的最少点数，点数多于此值才会被聚合
+          //     minPoints: 1,
+          //     // 设置非聚合的点的icon
+          //     iconOptions: {
+          //       width: 25,
+          //       height: 25,
+          //       icon: require("@/assets/images/car.png"),
+          //     },
+          //     enablePicked: true,
+          //     onClick: (e) => {
+          //       if (e.dataItem) {
+          //         // 可通过dataItem下面的children属性拿到被聚合的所有点
+          //         console.log(e.dataItem);
+          //         if (e.dataItem.children == undefined) {
+          //           let obj = e.dataItem.objdata;
+          //           let lng = obj.resData.BaiduLng;
+          //           let lat = obj.resData.BaiduLat;
+          //           let pt = new BMapGL.Point(lng, lat);
+          //           let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
+          //                   <div>车牌号：${obj.carNo}</div>
+          //                   <div>设备位置：${obj.res2Data}</div>
+          //                   <div>最后定位时间：${obj.resData.GPSTimeStamp.replace("T", " ")}</div>
+          //                   <div>状态：${this.locationStatus[obj.resData.SbcStatus]}</div>
+          //                   <div>时速：${obj.resData.spd}km/h</div>
+          //                   <div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${obj.deviceId}">行车轨迹</div>
+          //               </div>`;
+          //           this.openWindow(sContent, pt, obj.deviceId);
+          //         }
+          //       }
+          //     },
+          //   });
 
+          //   this.view.addLayer(clusterLayer);
+          //   clusterLayer.setData(this.viewData);
+
+          // }
         })
+
       })
+      // })
+    },
+    //信息窗口
+    openWindow(sContent, pt, DeviceNumber) {
+      let infoWindow = new BMapGL.InfoWindow(sContent);
+      // marker添加点击事件
+      infoWindow.addEventListener('open', () => {
+        document.getElementById('btnPath_' + DeviceNumber).addEventListener('click', () => {
+          this.queryPath(DeviceNumber)
+        })
+      });
+      this.openInfo(infoWindow, pt);
     },
     //昨日轨迹
     queryPath(deviceId) {