不规则框选

front/src/api/file.js

@@ -105,9 +105,5 @@ export function getCameraInfoByAreaId(params) {
 }
 //能力集市基础设施-摄像头
 export function getCameraByCondition(params) {
-  return axios.get(
+  return axios.post('http://10.134.135.92:9537/data_service/getCamera/getCameraByCondition', params, config2)
-    'http://10.134.135.92:9537/data_service/getCamera/getCameraByCondition?' +
-      params,
-    config2
-  )
 }

front/src/views/home/infrastructurePage.vue

@@ -413,7 +413,7 @@
         <div class="contentNum">
           <p>
             备选
-            <span>{{ pagination.total }}</span>
+            <span>{{ pagination.total || 0 }}</span>
             个
           </p>
           <!-- <i class="boundary"></i> -->
@@ -941,9 +941,16 @@
       mapSearchParam.value.gpsX = param.gpsX
       mapSearchParam.value.gpsY = param.gpsY
       mapSearchParam.value.radius = param.radius
+      mapSearchParam.value.type = param.type
+      mapSearchParam.value.borderPolygonList = param.borderPolygonList
+      mapSearchParam.value.pageSize = param.type!=0?20000:10
       selectedRowKeys.value = []  //清空选中的点位
       selectedList.value = []
-      getCamera()
+
+      
+      dataSource.value = param.dataSource
+      pagination.value.total = param.total
+      // getCamera()
     })
     //点位点击
     mybus.off('pointMarkerClick')
@@ -1761,6 +1768,7 @@
     videoList.value = []
     pagination.value.current = 1
     mapSearchParam.value.pageNum = 1
+    mapSearchParam.value.type = 0
     pagination.value.pageSize = 10
     getCamera()
   }
@@ -1871,6 +1879,8 @@
         latitude: mapSearchParam.value.gpsY || '',
         radius: mapSearchParam.value.radius || '',
         name: mapSearchParam.value.cameraName,
+        type: mapSearchParam.value.type,
+        borderPolygonList: mapSearchParam.value.borderPolygonList || [],
       }
       // todo-临时放开
       // if (
@@ -1880,22 +1890,22 @@
       // ) {
       //   params.status = ''
       // }
-      let paramsFather = ''
+      // let paramsFather = ''
-      let i = 1
+      // let i = 1
-      for (var key in params) {
+      // for (var key in params) {
-        if (params[key] === '') {
+      //   if (params[key] === '') {
-          delete params[key]
+      //     delete params[key]
-        } else {
+      //   } else {
-          if (i != 1) {
+      //     if (i != 1) {
-            paramsFather += `&${key}=` + params[key]
+      //       paramsFather += `&${key}=` + params[key]
-            i += 1
+      //       i += 1
-          } else if (i == 1) {
+      //     } else if (i == 1) {
-            paramsFather += `${key}=` + params[key]
+      //       paramsFather += `${key}=` + params[key]
-            i += 1
+      //       i += 1
-          }
+      //     }
-        }
+      //   }
-      }
+      // }
-      getCameraByCondition(paramsFather).then((res) => {
+      getCameraByCondition(params).then((res) => {
         dataSource.value = res.data.data
         pagination.value.total = res.data.count
         console.log('根据parent查询摄像头', res.data.data)

front/src/views/home/videoSurveillance/index.vue

@@ -65,6 +65,8 @@
           data-spm-anchor-id="a313x.7781069.0.i0"
         ></path>
       </svg>
+      <img class="icon-poylon" @click="areaMode()" src="~@/supermap/image/icon-poylon.png">
+      
     </div>
     <video-play
       v-if="openVideo"
@@ -92,6 +94,7 @@
   } from '@/api/videoSurveillance'
   import { getCameraByCondition } from '@/api/file'
   import mybus from '@/myplugins/mybus'
+  import * as turf from '@turf/turf';
 
   export default {
     data() {
@@ -112,6 +115,7 @@
         openVideo: false,
         channelCode: [],
         circleModeFlag: false,
+        areaModeFlag: false,
         addressMatchUrl: '',
         address: '',
         whoShow1: whoShow,
@@ -124,6 +128,8 @@
           gpsX: '',
           gpsY: '',
           radius: '',
+          borderPolygonList: [],
+          type: 0,  //0是无，1画圆，2不规则
         },
         pointAllData:[],
       }
@@ -162,7 +168,7 @@
       //表格勾选
       mybus.off('selectTablePoint')
       mybus.on('selectTablePoint', (pointlist) => {
-        console.log("mounted -> pointlist", pointlist)
+        console.log("mounted -> pointlist", pointlist);
         for(let i=0;i<this.pointAllData.length;i++){
           this.pointAllData[i].active = false
           for(let j=0;j<pointlist.length;j++){
@@ -184,6 +190,46 @@
         }
         this.hiMapFun.mapFlyTo(latLng)
       },
+      //框选
+      areaSelectResource(){
+        // 修改控件提示
+        L.drawLocal.draw.handlers.polygon.tooltip.start = '单击开始绘制形状'
+        L.drawLocal.draw.handlers.polygon.tooltip.cont = '单击继续绘制形状'
+        L.drawLocal.draw.handlers.polygon.tooltip.end =
+          '单击继续绘制形状,双击结束绘制'
+          
+        this.hiMap.mapObj.map.off('draw:created')
+        this.hiMap.mapObj.drawPolygon.enable()
+        this.hiMap.mapObj.map.once('draw:created', (e) => {
+          const type = e.layerType
+          const circleLayer = e.layer
+              console.log('查询图层draw:created', e)
+          if (type === 'polygon') {
+            const polygonLayer = e.layer;
+            this.hiMap.mapObj.featureGroup.addLayer(polygonLayer);
+            this.hiMap.mapObj.layerGroup.set('rectangleSelectLayer', polygonLayer);
+            const arr = [];
+            const latlngs = [];  //选择的坐标组
+            polygonLayer._latlngs[0].map(item => {
+              // const bdLonLat = wgs84LL2bdLL();
+              arr.push(turf.point([item.lng, item.lat]));
+              latlngs.push([item.lat,item.lng])
+            });
+            const points = turf.featureCollection(arr);
+            const rect = turf.convex(points);
+
+            this.mapSearchParam.borderPolygonList = latlngs
+            this.mapSearchParam.type = 2
+            const params = {
+              borderPolygonList: latlngs,
+              type: this.mapSearchParam.type,
+            }
+            // mybus.emit('getListByMap', params);
+            this.getCameraByParentId('map');
+            console.log("areaSelectResource -> latlngs", latlngs)
+          }
+        })
+      },
       // 圈选方法
       circleSelectResource() {
         L.drawLocal.draw.handlers.circle.tooltip.start = '请圈选区域'
@@ -211,18 +257,20 @@
               this.mapSearchParam.gpsX = e.layer._latlng.lng
               this.mapSearchParam.gpsY = e.layer._latlng.lat
               this.mapSearchParam.radius = radius
+              this.mapSearchParam.type = 1
               const params = {
                 gpsX: this.mapSearchParam.gpsX,
                 gpsY: this.mapSearchParam.gpsY,
                 radius: radius,
+                type: this.mapSearchParam.type,
               }
-              mybus.emit('getListByMap', params)
+              // mybus.emit('getListByMap', params)
-              this.getCameraByParentId()
+              this.getCameraByParentId('map')
             }
           }
         })
       },
-      getCameraByParentId() {
+      getCameraByParentId(type) {
         if (!this.whoShow1.itShowXiHaiAn) {
           debugger
           getCameraByParentId(this.mapSearchParam).then((res) => {
@@ -236,31 +284,42 @@
               this.mapSearchParam.parentId ||
               '70be8c5b664f4bcf869d82f2e8335051',
             pageNum: this.mapSearchParam.pageNum,
-            pageSize: this.mapSearchParam.pageSize,
+            pageSize: this.mapSearchParam.type!=0?this.mapSearchParam.pageSize:10,
             name: this.mapSearchParam.cameraName || '',
             longitude: this.mapSearchParam.gpsX || '',
             latitude: this.mapSearchParam.gpsY || '',
             radius: this.mapSearchParam.radius || '',
+            type: this.mapSearchParam.type,
+            borderPolygonList: this.mapSearchParam.borderPolygonList || [],
           }
-          let paramsFather = ''
+          // let paramsFather = ''
-          let i = 1
+          // let i = 1
-          for (var key in params) {
+          // for (var key in params) {
-            if (params[key] === '') {
+          //   if (params[key] === '') {
-              delete params[key]
+          //     delete params[key]
-            } else {
+          //   } else {
-              if (i != 1) {
+          //     if (i != 1) {
-                paramsFather += `&${key}=` + params[key]
+          //       paramsFather += `&${key}=` + params[key]
-                i += 1
+          //       i += 1
-              } else if (i == 1) {
+          //     } else if (i == 1) {
-                paramsFather += `${key}=` + params[key]
+          //       paramsFather += `${key}=` + params[key]
-                i += 1
+          //       i += 1
-              }
+          //     }
-            }
+          //   }
-          }
+          // }
-          getCameraByCondition(paramsFather).then((res) => {
+          getCameraByCondition(params).then((res) => {
             console.log('根据parent查询摄像头', res.data.data)
-            this.pointAllData = res.data.data
+            if(type=='map'){
+              let params = this.mapSearchParam;
+              params.dataSource = res.data.data||0;
+              params.total = res.data.count||0;
+              mybus.emit('getListByMap', params);
+            }
+            this.pointAllData = res.data.data;
+            if(this.mapSearchParam.type!=0)
               this.addResourceTomap('videoMap', res.data.data)
+            else
+              this.addResourceTomap('videoMap', [])   //查询全部时不打点
           })
         }
       },
@@ -271,27 +330,65 @@
           this.addressMatchUrl
         )
       },
+      areaMode(){
+        // 转换不规则形状模式
+        if(this.circleModeFlag){
+          this.resetCircle();
+          this.circleModeFlag = false;
+        }
+
+        this.areaModeFlag = !this.areaModeFlag;
+
+        if (this.areaModeFlag) {
+          // 打开不规则形状模式模式
+          this.areaSelectResource()
+        } else {
+          this.resetArea();
+        }
+      },
       circleMode() {
+        if(this.areaModeFlag){
+          this.resetArea();
+          this.areaModeFlag = false;
+        }
         // 转换圈选模式
         this.circleModeFlag = !this.circleModeFlag
         if (this.circleModeFlag) {
           // 打开圈选模式
           this.circleSelectResource()
         } else {
+          this.resetCircle();
+        }
+      },
+      resetCircle(){
         // 关闭圈选模式，清空圈选内容，重新上图
         this.hiMapFun.removeLayerByLayerName('circlePloygonLayer')
         // 重置内容
         this.mapSearchParam.gpsX = ''
         this.mapSearchParam.gpsY = ''
         this.mapSearchParam.radius = ''
-          this.getCameraByParentId()
+        this.mapSearchParam.type = 0;
         const params = {
           gpsX: this.mapSearchParam.gpsX,
           gpsY: this.mapSearchParam.gpsY,
           radius: this.mapSearchParam.radius,
+          type: this.mapSearchParam.type
         }
-          mybus.emit('getListByMap', params)
+        this.getCameraByParentId('map')
+        // mybus.emit('getListByMap', params);
+      },
+      resetArea(){
+        // 关闭不规则形状模式模式，清空不规则形状模式内容，重新上图
+        this.hiMapFun.removeLayerByLayerName('rectangleSelectLayer');
+        // 重置内容
+        this.mapSearchParam.borderPolygonList = [];
+        this.mapSearchParam.type = 0;
+        const params = {
+          borderPolygonList: this.mapSearchParam.borderPolygonList,
+          type: this.mapSearchParam.type
         }
+        this.getCameraByParentId('map')
+        // mybus.emit('getListByMap', params);
       },
       //查询地址建议匹配
       async searchAddressByKeyWord(queryString, cb, indexX) {
@@ -367,6 +464,7 @@
 
       addResourceTomap(type, data) {
         const dataEvent = []
+        if(data&&data.length>0){
           data.forEach((item) => {
             const arr = [0, 0.0, '', '0', '0.0']
             if (arr.indexOf(item.gpsX) == -1) {
@@ -378,6 +476,7 @@
               })
             }
           })
+        }
         console.log('上图数据', dataEvent)
         this.getMapPoint(dataEvent, 'icon_camare.png', type)
       },
@@ -560,13 +659,17 @@
     .leaflet-control-attribution {
       display: none;
     }
-    svg {
+    svg,.icon-poylon {
       position: absolute;
       bottom: 0.1rem;
       right: 0.1rem;
       z-index: 988;
       cursor: pointer;
     }
+    .icon-poylon {
+      width: 0.46rem;
+      bottom: 0.6rem;
+    }
     .address-auto-complete-input {
       width: 2.4rem;
     }