1 大屏端 调压箱，阀门井，场站，监控，餐饮单位液化气用户 上图都用 LabelsLayer 实现，并且推动时隐藏，停止拖动时显示。

zh-baseversion-system/src/main/java/com/zehong/system/domain/TDeviceUser.java

@@ -83,6 +83,16 @@ public class TDeviceUser extends BaseEntity
 
     private String alarmTime;
 
+    private String iconType;
+
+    public String getIconType() {
+        return iconType;
+    }
+
+    public void setIconType(String iconType) {
+        this.iconType = iconType;
+    }
+
     public String getAlarmTime() {
         return alarmTime;
     }

zh-baseversion-system/src/main/resources/mapper/system/TDeviceUserMapper.xml

@@ -23,6 +23,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="updateTime"    column="update_time"    />
         <result property="isDel"    column="is_del"    />
         <result property="remarks"    column="remarks"    />
+        <result property="iconType"    column="iconType"    />
     </resultMap>
 
     <sql id="selectTDeviceUserVo">
@@ -60,7 +61,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     </select>
 
     <select id="allListbyTownship" resultMap="TDeviceUserResult" >
-        SELECT * FROM t_device_user WHERE township IS NOT NULL GROUP BY  township
+        SELECT *,"18" as iconType FROM t_device_user WHERE township IS NOT NULL GROUP BY  township
     </select>
     <insert id="insertTDeviceUser" parameterType="TDeviceUser" useGeneratedKeys="true" keyProperty="userId">
         insert into t_device_user

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

@@ -49,6 +49,21 @@ export class EditorMap {
   //商业用户-用户列表图层
   businessDetectorUserlabelsLayer = null;
 
+  //调压箱-地图标注层
+  tyxlabelsLayer = null;
+
+  //阀门井-地图标注层
+  fmjlabelLayer = null;
+
+  //场站-地图标注层
+  czlabelLayer = null;
+
+  //监控-地图标注层
+  videolabelLayer = null;
+
+  //餐饮单位液化气用户
+  deviceUserlableLayer = null;
+
   selarr = [];
 
   constructor(contaienr, config = {}, vue) {
@@ -155,22 +170,64 @@ 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();
         } 
       }
+      // 调压箱
+      if (this.tyxlabelsLayer != null) {
+        const tyxHas = this.selarr.indexOf(2) >= 0;
+        if (tyxHas) {
+          this.tyxlabelsLayer.show();
+        } 
+      }
       
+      // 阀门井
+      if (this.fmjlabelLayer != null) {
+        const fmjHas = this.selarr.indexOf(3) >= 0;
+        if (fmjHas) {
+          this.fmjlabelLayer.show();
+        } 
+      }
+
+      // 场站
+      if (this.czlabelLayer != null) {
+        const czHas = this.selarr.indexOf(4) >= 0;
+        if (czHas) {
+          this.czlabelLayer.show();
+        } 
+      }
+
+      // 监控
+      if (this.videolabelLayer != null) {
+        const videoHas = this.selarr.indexOf(5) >= 0;
+        if (videoHas) {
+          this.videolabelLayer.show();
+        } 
+      }
+
+      // 餐饮单位液化气用户
+      if (this.deviceUserlableLayer != null) {
+        const deviceUserHas = this.selarr.indexOf(18) >= 0;
+        if (deviceUserHas) {
+          this.deviceUserlableLayer.show();
+        } 
+      }
     });
     this.map.on("movestart",()=>{
       console.log("地图开始移动");
+
+      //居民用户
       if (this.detectorUserlabelsLayer != null) {
         const detectorUserHas = this.selarr.indexOf(6) >= 0;
         if (detectorUserHas) {
@@ -178,12 +235,53 @@ export class EditorMap {
         } 
       }
 
+      //商业用户
       if (this.businessDetectorUserlabelsLayer != null) {
         const businessDetectorUserHas = this.selarr.indexOf(61) >= 0;
         if (businessDetectorUserHas) {
           this.businessDetectorUserlabelsLayer.hide();
         } 
       }
+      
+      // 调压箱
+      if (this.tyxlabelsLayer != null) {
+        const tyxHas = this.selarr.indexOf(2) >= 0;
+        if (tyxHas) {
+          this.tyxlabelsLayer.hide();
+        } 
+      }
+
+      // 阀门井
+      if (this.fmjlabelLayer != null) {
+        const fmjHas = this.selarr.indexOf(3) >= 0;
+        if (fmjHas) {
+          this.fmjlabelLayer.hide();
+        } 
+      }
+      
+      // 场站
+      if (this.czlabelLayer != null) {
+        const czHas = this.selarr.indexOf(4) >= 0;
+        if (czHas) {
+          this.czlabelLayer.hide();
+        } 
+      }
+      
+      // 监控
+      if (this.videolabelLayer != null) {
+        const videoHas = this.selarr.indexOf(5) >= 0;
+        if (videoHas) {
+          this.videolabelLayer.hide();
+        } 
+      }
+      
+      // 餐饮单位液化气用户
+      if (this.deviceUserlableLayer != null) {
+        const deviceUserHas = this.selarr.indexOf(18) >= 0;
+        if (deviceUserHas) {
+          this.deviceUserlableLayer.hide();
+        } 
+      }
     })
     // this.map.on('zoomchange', () => {
     //   //获取当前最新的地图层级
@@ -510,7 +608,300 @@ export class EditorMap {
       }
     })
   }
+    /**
+   *  地图上添加 餐饮单位液化气用户 海量标注 LabelMarker 方式
+   * @param {*} detectorUserData 
+   * @param {*} compontent 
+   * @param {*} showBool 
+   */  
+    labelsLayerMarksDeviceUserGoMap(mapData,compontent,showBool = true){
+
+      if(mapData != null) {
+        const hashMap = new Map();
+        this.deviceUserlableLayer = new AMap.LabelsLayer({
+          zooms: [3, 20],
+          zIndex: 1000,
+          collision: true, //该层内标注是否避让
+          allowCollision: false, //不同标注层之间是否避让  
+        });
+            //设置一个图标对象
+        const icon = {
+          type: "image", //图标类型，现阶段只支持 image 类型
+          image: svgUrl[18], //可访问的图片 URL
+          size: [44, 49], //图片尺寸
+          anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+        };
+        var markers = [];
+    
+        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, //避让优先级
+          };
+  
+          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.deviceUserlableLayer.add(markers);
+        this.map.add(this.deviceUserlableLayer)
+        if (!showBool) {
+          this.deviceUserlableLayer.hide();
+        }
+      }
+    }
+  /**
+   *  地图上添加监控 海量标注 LabelMarker 方式
+   * @param {*} detectorUserData 
+   * @param {*} compontent 
+   * @param {*} showBool 
+   */  
+  labelsLayerMarksVideoGoMap(mapData,compontent,showBool = true){
+
+    if(mapData != null) {
+      const hashMap = new Map();
+      this.videolabelLayer = new AMap.LabelsLayer({
+        zooms: [3, 20],
+        zIndex: 1000,
+        collision: true, //该层内标注是否避让
+        allowCollision: false, //不同标注层之间是否避让  
+      });
+          //设置一个图标对象
+      const icon = {
+        type: "image", //图标类型，现阶段只支持 image 类型
+        image: svgUrl[5], //可访问的图片 URL
+        size: [44, 49], //图片尺寸
+        anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+      };
+      var markers = [];
+  
+      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, //避让优先级
+        };
 
+        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.videolabelLayer.add(markers);
+      this.map.add(this.videolabelLayer)
+      if (!showBool) {
+        this.videolabelLayer.hide();
+      }
+    }
+  }
+  /**
+   *  地图上添加场站 海量标注 LabelMarker 方式
+   * @param {*} detectorUserData 
+   * @param {*} compontent 
+   * @param {*} showBool 
+   */  
+  labelsLayerMarksCzGoMap(mapData,compontent,showBool = true){
+
+    if(mapData != null) {
+      const hashMap = new Map();
+      this.czlabelLayer = new AMap.LabelsLayer({
+        zooms: [3, 20],
+        zIndex: 1000,
+        collision: true, //该层内标注是否避让
+        allowCollision: false, //不同标注层之间是否避让  
+      });
+          //设置一个图标对象
+      const icon = {
+        type: "image", //图标类型，现阶段只支持 image 类型
+        image: svgUrl[4], //可访问的图片 URL
+        size: [44, 49], //图片尺寸
+        anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+      };
+      var markers = [];
+  
+      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, //避让优先级
+        };
+
+        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.czlabelLayer.add(markers);
+      this.map.add(this.czlabelLayer)
+      if (!showBool) {
+        this.czlabelLayer.hide();
+      }
+    }
+  }
+  /**
+   *  地图上添加阀门井 海量标注 LabelMarker 方式
+   * @param {*} detectorUserData 
+   * @param {*} compontent 
+   * @param {*} showBool 
+   */  
+  labelsLayerMarksFmjGoMap(mapData,compontent,showBool = true){
+
+    if(mapData != null) {
+      const hashMap = new Map();
+      this.fmjlabelLayer = new AMap.LabelsLayer({
+        zooms: [3, 20],
+        zIndex: 1000,
+        collision: true, //该层内标注是否避让
+        allowCollision: false, //不同标注层之间是否避让  
+      });
+          //设置一个图标对象
+      const icon = {
+        type: "image", //图标类型，现阶段只支持 image 类型
+        image: svgUrl[3], //可访问的图片 URL
+        size: [44, 49], //图片尺寸
+        anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+      };
+      var markers = [];
+  
+      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, //避让优先级
+        };
+
+        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.fmjlabelLayer.add(markers);
+      this.map.add(this.fmjlabelLayer)
+      if (!showBool) {
+        this.fmjlabelLayer.hide();
+      }
+    }
+  }
+  /**
+   *  地图上添加调压箱 海量标注 LabelMarker 方式
+   * @param {*} detectorUserData 
+   * @param {*} compontent 
+   * @param {*} showBool 
+   */  
+  labelsLayerMarksTysGoMap(mapData,compontent,showBool = true){
+    if(mapData != null) {
+      const hashMap = new Map();
+      this.tyxlabelsLayer = new AMap.LabelsLayer({
+        zooms: [3, 20],
+        zIndex: 1000,
+        collision: true, //该层内标注是否避让
+        allowCollision: false, //不同标注层之间是否避让  
+      });
+          //设置一个图标对象
+      const icon = {
+        type: "image", //图标类型，现阶段只支持 image 类型
+        image: svgUrl[2], //可访问的图片 URL
+        size: [44, 49], //图片尺寸
+        anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+      };
+      var markers = [];
+  
+      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, //避让优先级
+        };
+
+        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.tyxlabelsLayer.add(markers);
+      this.map.add(this.tyxlabelsLayer)
+      if (!showBool) {
+        this.tyxlabelsLayer.hide();
+      }
+    }
+  }
   
   /**
    *  地图上添加用户数据 海量标注 LabelMarker 方式
@@ -933,7 +1324,6 @@ export class EditorMap {
 
     // 判断是否需要显示 商业用户
     const businessDetectorUserHas = typeArr.indexOf(61) >= 0;
-    this.selarr = typeArr;
     if (this.businessDetectorUserlabelsLayer != null) {
       if (businessDetectorUserHas) {
         this.businessDetectorUserlabelsLayer.show();
@@ -941,6 +1331,57 @@ export class EditorMap {
         this.businessDetectorUserlabelsLayer.hide();
       }
     }
+
+    //判断是否需要显示  调压箱
+    const tyxHas = typeArr.indexOf(2) >= 0;
+    if (this.tyxlabelsLayer != null) {
+      if (tyxHas) {
+        this.tyxlabelsLayer.show();
+      } else {
+        this.tyxlabelsLayer.hide();
+      }
+    }
+
+    
+    //判断是否需要显示  阀门井
+    const fmjHas = typeArr.indexOf(3) >= 0;
+    if (this.fmjlabelLayer != null) {
+      if (fmjHas) {
+        this.fmjlabelLayer.show();
+      } else {
+        this.fmjlabelLayer.hide();
+      }
+    }
+    
+    //判断是否需要显示  场站
+    const czHas = typeArr.indexOf(4) >= 0;
+    if (this.czlabelLayer != null) {
+      if (czHas) {
+        this.czlabelLayer.show();
+      } else {
+        this.czlabelLayer.hide();
+      }
+    }
+
+    //判断是否需要显示  监控
+    const videoHas = typeArr.indexOf(5) >= 0;
+    if (this.videolabelLayer != null) {
+      if (videoHas) {
+        this.videolabelLayer.show();
+      } else {
+        this.videolabelLayer.hide();
+      }
+    }
+    
+    //判断是否需要显示  餐饮单位液化气用户
+    const deviceUserHas = typeArr.indexOf(18) >= 0;
+    if (this.deviceUserlableLayer != null) {
+      if (deviceUserHas) {
+        this.deviceUserlableLayer.show();
+      } else {
+        this.deviceUserlableLayer.hide();
+      }
+    }
   }
   // 普通调用方法
   // 设备报警

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

@@ -368,17 +368,21 @@ export default {
       // getPipe() getTyx() getFm() getCz() getVideo() getUser()
       await this.goMap(getEnterprise, this.addDevice, Company, true);
       // this.goMap(getPipe, this.addPipeLine, Line, true);
+      //管道
       this.goMediumPressureLineMap(getPipe, this.addMediumPipeLine, Line,MediumPressureLineVue, true);
-      this.goMap(getTyx, this.addDevice, Device, false);
-      this.goMap(getFm, this.addDevice, Device, false);
-      this.goMap(getCz, this.addDevice, Cz, false);
-      this.goMap(getVideo, this.addDevice, VideoView, false);
+      //调压箱
+      this.labelsLayerMarksTysGoMap(getTyx, Device, false);
+      //阀门井
+      this.labelsLayerMarksFmjGoMap(getFm, Device, false);
+      //场站
+      this.labelsLayerMarksCzGoMap(getCz,Cz, false);
+      //监控
+      this.labelsLayerMarksVideoGoMap(getVideo,VideoView, false);
       //this.goMap(getYhq, this.addDevice2, yhqUser, false); //液化气用户上图
       if (this.enterpriseId==-2){
-        this.goMap(deviceUser, this.addDevice2, yhqUser, false); //用户上图
+        this.labelsLayerMarksDeviceUserGoMap(deviceUser, yhqUser, false); //用户上图
       }
 
-
       // 用户要等一下 因为有报警数据
       this.labelsLayerMarksDetectorUserGoMap(labelsLayerMarksDetectorUserList,User, false).then((res) => {
         // 先查一下，然后开启定时器
@@ -483,6 +487,41 @@ export default {
       });
     },
     
+    labelsLayerMarksDeviceUserGoMap(httpFunc,component,show){
+      return httpFunc().then((res) => {
+        const mapData = res.data;
+        this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
+      })
+    }
+    ,
+    labelsLayerMarksVideoGoMap(httpFunc,component,show){
+      return httpFunc().then((res) => {
+        const mapData = res.data;
+        this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
+      })
+    }
+    ,
+    labelsLayerMarksCzGoMap(httpFunc,component,show){
+      return httpFunc().then((res) => {
+        const mapData = res.data;
+        this.map.labelsLayerMarksCzGoMap(mapData, component, show);
+      })
+    }
+    ,
+    labelsLayerMarksFmjGoMap(httpFunc,component,show){
+      return httpFunc().then((res) => {
+        const mapData = res.data;
+        this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
+      })
+    }
+    ,
+    labelsLayerMarksTysGoMap(httpFunc,component,show){
+      return httpFunc().then((res) => {
+        const mapData = res.data;
+        this.map.labelsLayerMarksTysGoMap(mapData, component, show);
+      })
+    }
+    ,
     labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {  
         const mapData = res.data; 
@@ -491,12 +530,6 @@ export default {
     },
     goMap(httpFunc, addFunc, component, show) {
       return httpFunc().then((res) => {
-        // 给用户加icontype
-        if (res.data && !res.data[0].iconType) {
-          res.data.forEach((item) => {
-            item.iconType = 6;
-          });
-        }
         // 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
         let config = {};
         if (Array.isArray(res)) {