1 大屏端 居民用户 和 商业用户 上图后 界面拖动卡问题优化。

zh-baseversion-admin/src/main/java/com/zehong/web/controller/supervise/TDetectorUserController.java

@@ -84,8 +84,6 @@ public class TDetectorUserController extends BaseController
         return AjaxResult.success(tDetectorUserCount);
     }
 
-
-
     /**
      * 获取探测器用户列表
      * @return
@@ -104,6 +102,17 @@ public class TDetectorUserController extends BaseController
         return AjaxResult.success(tDetectorUserService.detectorUserList(tDetectorUser));
     }
 
+    /**
+     * 获取探测器用户列表 大屏地图 labelsLayer 标注的方式
+     * @return ajaxResult
+     */
+    @GetMapping("/labelsLayerMarksDetectorUserList")
+    public AjaxResult labelsLayerMarksDetectorUserList(TDetectorUser tDetectorUser){
+        return AjaxResult.success(tDetectorUserService.labelsLayerMarksDetectorUserList(tDetectorUser));
+    }
+
+
+
     /**
      * 获取探测器用户列表
      * @return

zh-baseversion-system/src/main/java/com/zehong/system/service/ITDetectorUserService.java

@@ -33,6 +33,13 @@ public interface ITDetectorUserService
      */
 //    public Map<String, List<TMassMarksDetectorUserVO>> massMarksDetectorUserList(TDetectorUser tDetectorUser);
 
+    /**
+     * 查询探测器用户列表 地图使用 labelsLayer 标注的方式
+     * @param tDetectorUser tDetectorUser
+     * @return r
+     */
+    public Map<String, List<TDetectorUserVO>> labelsLayerMarksDetectorUserList(TDetectorUser tDetectorUser);
+
     /**
      * 查询探测器用户列表
      *

zh-baseversion-system/src/main/java/com/zehong/system/service/impl/TDetectorUserServiceImpl.java

@@ -87,6 +87,43 @@ public class TDetectorUserServiceImpl implements ITDetectorUserService
         return tDetectorUserMapper.countTDetectorUserForMassMarks(tDetectorUser);
     }
 
+    /**
+     * 查询探测器用户列表 地图使用 labelsLayerMarks 标注的方式
+     * @param tDetectorUser tDetectorUser
+     * @return r
+     */
+    @Override
+    public Map<String, List<TDetectorUserVO>> labelsLayerMarksDetectorUserList(TDetectorUser tDetectorUser) {
+
+        Map<String, List<TDetectorUserVO>> collect ;
+        List<TDetectorUserVO> list = new ArrayList<>();
+        List<TDetectorUserVO> tDetectorUserList = tDetectorUserMapper.countTDetectorUser(tDetectorUser);
+
+        if (tDetectorUserList.size() > 0) {
+            for(TDetectorUserVO user : tDetectorUserList){
+                TDetectorUserVO userVO = new TDetectorUserVO();
+                BeanUtils.copyProperties(user, userVO);
+
+
+                List<Object> newList = new ArrayList<>();
+                newList.add(user);
+                userVO.setDetectorCountList(newList);
+
+                if("1".equals(userVO.getUserType())) {
+                    userVO.setIconType("6");
+                } else if ("2".equals(userVO.getUserType())) {
+                    userVO.setIconType("61");
+                }
+                list.add(userVO);
+            }
+            collect = list.stream().collect(Collectors.groupingBy(TDetectorUserVO::getIconType));
+        } else {
+            collect = new HashMap<>(0);
+        }
+
+        return collect;
+    }
+
     /**
      * 查询探测器用户列表 地图使用 massMarks 标注的方式
      * @param tDetectorUser tDetectorUser

zh-baseversion-web/src/api/detector/detectorUser.js

@@ -18,6 +18,14 @@ export function massMarksDetectorUserList(query) {
   })
 }
 
+// 探测器用户列表 大屏端 labelsLayerMarks 标注方式
+export function labelsLayerMarksDetectorUserList(query) {
+  return request({
+    url: '/supervise/user/labelsLayerMarksDetectorUserList',
+    method: 'get',
+    params: query
+  })
+}
 // 探测器用户列表
 export function detectorUserList(query) {
   return request({

zh-baseversion-web/src/utils/mapClass/map.js

@@ -43,9 +43,14 @@ export class EditorMap {
   // infowindow本身
   infowindow = null;
 
-  //用户列表图层
+  //居民用户-用户列表图层
   detectorUserlabelsLayer = null;
 
+  //商业用户-用户列表图层
+  businessDetectorUserlabelsLayer = null;
+
+  selarr = [];
+
   constructor(contaienr, config = {}, vue) {
     this.map = new AMap.Map(contaienr, {
       viewMode: "3D",
@@ -150,7 +155,36 @@ export class EditorMap {
         console.log("弹框");
         this.flag = false;
       }
+      if (this.detectorUserlabelsLayer != null) {
+        const detectorUserHas = this.selarr.indexOf(6) >= 0;
+        if (detectorUserHas) {
+          this.detectorUserlabelsLayer.show();
+        } 
+      }
+      if (this.businessDetectorUserlabelsLayer != null) {
+        const businessDetectorUserHas = this.selarr.indexOf(61) >= 0;
+        if (businessDetectorUserHas) {
+          this.businessDetectorUserlabelsLayer.show();
+        } 
+      }
+
     });
+    this.map.on("movestart",()=>{
+      console.log("地图开始移动");
+      if (this.detectorUserlabelsLayer != null) {
+        const detectorUserHas = this.selarr.indexOf(6) >= 0;
+        if (detectorUserHas) {
+          this.detectorUserlabelsLayer.hide();
+        } 
+      }
+
+      if (this.businessDetectorUserlabelsLayer != null) {
+        const businessDetectorUserHas = this.selarr.indexOf(61) >= 0;
+        if (businessDetectorUserHas) {
+          this.businessDetectorUserlabelsLayer.hide();
+        } 
+      }
+    })
     // this.map.on('zoomchange', () => {
     //   //获取当前最新的地图层级
     //    let Zoom = this.map.getZoom()
@@ -484,58 +518,120 @@ export class EditorMap {
    * @param {*} component 
    * @param {*} showBool 
    */                                            
-  addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
-
-    this.detectorUserlabelsLayer = new AMap.LabelsLayer({
-      zooms: [3, 20],
-      zIndex: 1000,
-      collision: true, //该层内标注是否避让
-      allowCollision: true, //不同标注层之间是否避让  
-    });
-        //设置一个图标对象
-    const icon = {
-      type: "image", //图标类型，现阶段只支持 image 类型
-      image: svgUrl[6], //可访问的图片 URL
-      size: [30, 30], //图片尺寸
-      anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
-    };
-    var markers = [];
-
+  labelsLayerMarksDetectorUserList(mapData,compontent,showBool = true){
+    
     if(mapData !== null && mapData !== undefined) {
-      const map = new Map();
-      mapData.forEach(item => {
-        let longitude =  item.longitude;
-        let latitude = item.latitude;
-        var userId = item.userId; 
-        icon.userId = userId;
-        var curData = {
-            position: [longitude, latitude],
-            icon: icon, 
-            rank: 1, //避让优先级
-        };
+      
+      const hashMap = new Map();
+      for(var key in mapData){
+        var value = mapData[key];
+        var jsonValue = JSON.stringify(value); 
+        var jsonValueArr = JSON.parse(jsonValue);
+        //居民用户
+        if (key === "6") {
+          
+          this.detectorUserlabelsLayer = new AMap.LabelsLayer({
+            zooms: [3, 20],
+            zIndex: 1000,
+            collision: true, //该层内标注是否避让
+            allowCollision: false, //不同标注层之间是否避让  
+          });
+              //设置一个图标对象
+          const icon = {
+            type: "image", //图标类型，现阶段只支持 image 类型
+            image: svgUrl[6], //可访问的图片 URL
+            size: [30, 30], //图片尺寸
+            anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+          };
+          var markers = [];
+      
+          if(jsonValueArr !== null && jsonValueArr !== undefined) { 
+            jsonValueArr.forEach(item => {
+              let longitude =  item.longitude;
+              let latitude = item.latitude;
+              var userId = item.userId; 
+              icon.userId = userId;
+              var curData = {
+                  position: [longitude, latitude],
+                  icon: icon, 
+                  rank: 1, //避让优先级
+              };
+      
+              hashMap.set(JSON.stringify(userId),item);
+              //创建 LabelMarker
+              const labelMarker = new AMap.LabelMarker(curData);
+              // var marker = new AMap.Marker(curData); 
+              markers.push(labelMarker);
+              
+              labelMarker.on("click", (e) => {  
+                var opts = JSON.stringify(e.data.opts); 
+                var optsObj = JSON.parse(opts);
+                var userId = JSON.stringify(optsObj.icon.userId);
+                var extData = hashMap.get(userId);
+                // 如果control==0就是默认值，没有使用123功能，就显示infowindow
+                this.massMarksMarkerClick(extData, compontent);
+              });
+            });
+          }
 
-        map.set(JSON.stringify(userId),item);
-        //创建 LabelMarker
-        const labelMarker = new AMap.LabelMarker(curData);
-        // var marker = new AMap.Marker(curData); 
-        markers.push(labelMarker);
-        
-        labelMarker.on("click", (e) => {  
-          var opts = JSON.stringify(e.data.opts); 
-          var optsObj = JSON.parse(opts);
-          var userId = JSON.stringify(optsObj.icon.userId);
-          var extData = map.get(userId);
-          // 如果control==0就是默认值，没有使用123功能，就显示infowindow
-          this.massMarksMarkerClick(extData, compontent);
-        });
-      });
-    }
- 
-    this.detectorUserlabelsLayer.add(markers);
+          this.detectorUserlabelsLayer.add(markers);
+          this.map.add(this.detectorUserlabelsLayer)
+          if (!showBool) {
+            this.detectorUserlabelsLayer.hide();
+          }
+        //商业用户
+        } else if (key === "61") {
+          this.businessDetectorUserlabelsLayer = new AMap.LabelsLayer({
+            zooms: [3, 20],
+            zIndex: 1000,
+            collision: true, //该层内标注是否避让
+            allowCollision: false, //不同标注层之间是否避让  
+          });
+              //设置一个图标对象
+          const icon = {
+            type: "image", //图标类型，现阶段只支持 image 类型
+            image: svgUrl[61], //可访问的图片 URL
+            size: [30, 30], //图片尺寸
+            anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+          };
+          var markers = [];
 
-    this.map.add(this.detectorUserlabelsLayer)
-    if (!showBool) {
-      this.detectorUserlabelsLayer.hide();
+          if(jsonValueArr !== null && jsonValueArr !== undefined) {
+            jsonValueArr.forEach(item => {
+              let longitude =  item.longitude;
+              let latitude = item.latitude;
+              var userId = item.userId; 
+              icon.userId = userId;
+              var curData = {
+                  position: [longitude, latitude],
+                  icon: icon, 
+                  rank: 2, //避让优先级
+              };
+
+              hashMap.set(JSON.stringify(userId),item);
+              //创建 LabelMarker
+              const labelMarker = new AMap.LabelMarker(curData);
+              // var marker = new AMap.Marker(curData); 
+              markers.push(labelMarker);
+              
+              labelMarker.on("click", (e) => {  
+                var opts = JSON.stringify(e.data.opts); 
+                var optsObj = JSON.parse(opts);
+                var userId = JSON.stringify(optsObj.icon.userId);
+                var extData = hashMap.get(userId);
+                // 如果control==0就是默认值，没有使用123功能，就显示infowindow
+                this.massMarksMarkerClick(extData, compontent);
+              });
+            });
+          }
+          
+          this.businessDetectorUserlabelsLayer.add(markers);
+          this.map.add(this.businessDetectorUserlabelsLayer)
+          if (!showBool) {
+            this.businessDetectorUserlabelsLayer.hide();
+          }
+        }
+      }
     }
   }
   /**
@@ -544,57 +640,57 @@ export class EditorMap {
    * @param {*} component 
    * @param {*} showBool 
    */                                            
-  // addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
-  //   if(mapData !== null && mapData !== undefined) {
-  //     var style; 
-  //     for(var key in mapData){
-  //       var value = mapData[key];
-  //       var jsonValue = JSON.stringify(value); 
-  //       var jsonValueArr = JSON.parse(jsonValue);
-  //       if ("6" === key) {
-  //         style = [{
-  //           url: svgUrl[6],
-  //           anchor: new AMap.Pixel(3, 3),
-  //           size: new AMap.Size(11, 11),
-  //           zIndex: 3,
-  //         }]
-  //       } else if ("61" === key) {
-  //         style = [{
-  //           url: svgUrl[6],
-  //           anchor: new AMap.Pixel(3, 3),
-  //           size: new AMap.Size(11, 11),
-  //           zIndex: 3,
-  //         }]
-  //       }
+  addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
+    if(mapData !== null && mapData !== undefined) {
+      var style; 
+      for(var key in mapData){
+        var value = mapData[key];
+        var jsonValue = JSON.stringify(value); 
+        var jsonValueArr = JSON.parse(jsonValue);
+        if ("6" === key) {
+          style = [{
+            url: svgUrl[6],
+            anchor: new AMap.Pixel(3, 3),
+            size: new AMap.Size(11, 11),
+            zIndex: 3,
+          }]
+        } else if ("61" === key) {
+          style = [{
+            url: svgUrl[6],
+            anchor: new AMap.Pixel(3, 3),
+            size: new AMap.Size(11, 11),
+            zIndex: 3,
+          }]
+        }
          
-  //       var mass = new AMap.MassMarks(jsonValueArr, {
-  //         opacity: 0.8,
-  //         zIndex: 111,
-  //         cursor: 'pointer',
-  //         style: style
-  //       }); 
+        var mass = new AMap.MassMarks(jsonValueArr, {
+          opacity: 0.8,
+          zIndex: 111,
+          cursor: 'pointer',
+          style: style
+        }); 
 
-  //       //先一启动，直接显示
-  //       // if (!showBool) {
-  //       //   mass.hide();
-  //       // }
+        //先一启动，直接显示
+        // if (!showBool) {
+        //   mass.hide();
+        // }
         
-  //       mass.on("click", (e) => {
-  //         var data = e.data;
-  //         // 如果control==0就是默认值，没有使用123功能，就显示infowindow
-  //         if (this.control == 0) {
-  //           this.massMarksMarkerClick(data, compontent);
-  //         } else if (this.control == 2) {
-  //           // 2是已经上图的设备拥有的编辑功能
-  //         } else if (this.control == 3) {
-  //           // 3是删除操作
-  //         }
-  //       });
+        mass.on("click", (e) => {
+          var data = e.data;
+          // 如果control==0就是默认值，没有使用123功能，就显示infowindow
+          if (this.control == 0) {
+            this.massMarksMarkerClick(data, compontent);
+          } else if (this.control == 2) {
+            // 2是已经上图的设备拥有的编辑功能
+          } else if (this.control == 3) {
+            // 3是删除操作
+          }
+        });
 
-  //       mass.setMap(this.map);
-  //     }
-  //   }
-  // }
+        mass.setMap(this.map);
+      }
+    }
+  }
 
   /** 点击marker出现infowindow- 大屏端 massMarks设置
    * @description:
@@ -825,10 +921,25 @@ export class EditorMap {
 
     // 判断是否需要显示 居民用户
     const detectorUserHas = typeArr.indexOf(6) >= 0;
-    if (detectorUserHas) {
-      this.detectorUserlabelsLayer.show();
-    } else {
-      this.detectorUserlabelsLayer.hide();
+    this.selarr = typeArr;
+    if (this.detectorUserlabelsLayer != null) {
+      if (detectorUserHas) {
+        this.detectorUserlabelsLayer.show();
+      } else {
+        this.detectorUserlabelsLayer.hide();
+      }
+    }
+    
+
+    // 判断是否需要显示 商业用户
+    const businessDetectorUserHas = typeArr.indexOf(61) >= 0;
+    this.selarr = typeArr;
+    if (this.businessDetectorUserlabelsLayer != null) {
+      if (businessDetectorUserHas) {
+        this.businessDetectorUserlabelsLayer.show();
+      } else {
+        this.businessDetectorUserlabelsLayer.hide();
+      }
     }
   }
   // 普通调用方法

zh-baseversion-web/src/views/bigWindow/index.vue

@@ -150,7 +150,7 @@
 import { EditorMap } from "@/utils/mapClass/map";
 import { mapGetters, mapActions } from "vuex";
 import { listDetectorInfo } from "@/api/detector/detectorInfo";
-import { detectorUserList,massMarksDetectorUserList } from "@/api/detector/detectorUser";
+import { detectorUserList,massMarksDetectorUserList,labelsLayerMarksDetectorUserList } from "@/api/detector/detectorUser";
 import {
   pipeData,
   tiaoyaxiang,
@@ -380,7 +380,7 @@ export default {
 
 
       // 用户要等一下 因为有报警数据
-      this.massMarksDetectorUserGoMap(massMarksDetectorUserList,User, false).then((res) => {
+      this.labelsLayerMarksDetectorUserGoMap(labelsLayerMarksDetectorUserList,User, false).then((res) => {
         // 先查一下，然后开启定时器
         this.userAlarm();
         this.alarmTimer = setInterval(() => {
@@ -483,10 +483,10 @@ export default {
       });
     },
     
-    massMarksDetectorUserGoMap(httpFunc, component, show) {
+    labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {  
         const mapData = res.data; 
-        this.map.addMassMarksDetectorUserGoMap(mapData, component, show); 
+        this.map.labelsLayerMarksDetectorUserList(mapData, component, show); 
       });
     },
     goMap(httpFunc, addFunc, component, show) {