临时提交

src/main/java/com/genersoft/iot/vmp/gb28181/bean/CommonGBChannel.java

@@ -156,6 +156,9 @@ public class CommonGBChannel {
     @Schema(description = "是否支持对讲 1支持,0不支持")
     private Integer enableBroadcast;
 
+    @Schema(description = "抽稀后的图层层级")
+    private Integer mapLevel;
+
     public String encode(String serverDeviceId) {
         return encode(null, serverDeviceId);
     }

src/main/java/com/genersoft/iot/vmp/gb28181/dao/provider/ChannelProvider.java

@@ -798,7 +798,10 @@ public class ChannelProvider {
     public String queryListByAddressAndDirectionType(Map<String, Object> params ){
         StringBuilder sqlBuild = new StringBuilder();
         sqlBuild.append(BASE_SQL_FOR_CAMERA_DEVICE);
-        sqlBuild.append(" where coalesce(wdc.gb_address, wdc.address) = #{address} and coalesce(wdc.gb_direction_type,  wdc.direction_type) = #{directionType}");
+        sqlBuild.append(" where coalesce(wdc.gb_address, wdc.address) = #{address}");
+        if (params.get("directionType") != null) {
+            sqlBuild.append(" and coalesce(wdc.gb_direction_type,  wdc.direction_type) = #{directionType}");
+        }
         return sqlBuild.toString();
     }
 

src/main/java/com/genersoft/iot/vmp/web/custom/CameraChannelController.java

@@ -171,9 +171,9 @@ public class CameraChannelController {
     @ResponseBody
     @Operation(summary = "根据安装地址和监视方位获取摄像头", security = @SecurityRequirement(name = JwtUtils.HEADER))
     @Parameter(name = "address", description = "安装地址")
-    @Parameter(name = "directionType", description = "监视方位")
+    @Parameter(name = "directionType", description = "监视方位", required = false)
     @Parameter(name = "geoCoordSys", description = "坐标系类型：WGS84,GCJ02、BD09")
-    public List<CameraChannel> queryListByAddressAndDirectionType(String address, Integer directionType, @RequestParam(required = false) String geoCoordSys) {
+    public List<CameraChannel> queryListByAddressAndDirectionType(String address, @RequestParam(required = false) Integer directionType, @RequestParam(required = false) String geoCoordSys) {
         return channelService.queryListByAddressAndDirectionType(address, directionType, geoCoordSys);
     }
 
@@ -277,4 +277,5 @@ public class CameraChannelController {
         return channelService.queryListForMobile(page, count, topGroupAlias);
     }
 
+
 }

src/main/java/com/genersoft/iot/vmp/web/custom/bean/CameraChannel.java

@@ -18,4 +18,9 @@ public class CameraChannel extends CommonGBChannel {
     @Setter
     @Schema(description = "图标路径")
     private String icon;
+
+    @Getter
+    @Setter
+    @Schema(description = "移动设备唯一编号")
+    private Long unitNo;
 }

web/src/views/common/MapComponent.vue

@@ -21,6 +21,7 @@ import { Point, LineString } from 'ol/geom'
 import { get as getProj } from 'ol/proj'
 import { containsCoordinate } from 'ol/extent'
 import { defaults as defaultInteractions } from 'ol/interaction'
+import Draw, { createBox } from 'ol/interaction/Draw'
 import DragInteraction from './map/DragInteraction'
 import { fromLonLat, toLonLat } from './map/TransformLonLat'
 
@@ -260,8 +261,8 @@ export default {
     addPointLayer(data, clickEvent, option) {
       if (data.length > 0) {
         const features = []
-        let maxZoom = option.maxZoom || olMap.getView().getMaxZoom()
+        let maxZoom = (option && option.maxZoom) ? option.maxZoom : olMap.getView().getMaxZoom()
-        let minZoom = option.minZoom || olMap.getView().getMinZoom()
+        let minZoom = (option && option.minZoom) ? option.minZoom : olMap.getView().getMinZoom()
 
         for (let i = 0; i < data.length; i++) {
           const feature = new Feature(new Point(fromLonLat(data[i].position)))
@@ -328,6 +329,13 @@ export default {
       }
       return layer
     },
+    addPointLayerGroup(data, clickEvent, option) {
+
+    },
+    updatePointLayerGroup(layer, data, postponement) {
+
+    },
+
     removeLayer(layer) {
       olMap.removeLayer(layer)
     },
@@ -468,6 +476,54 @@ export default {
       //   source: source
       // })
       // olMap.addLayer(vectorLayer)
+    },
+    startDrawBox(callback) {
+
+      const source = new VectorSource({ wrapX: false })
+
+      const vectorLayer = new VectorLayer({
+        source: source,
+        style: new Style({
+          fill: new Fill({
+            color: 'rgba(255, 97, 97, 0.24)'
+          }),
+          stroke: new Stroke({
+            color: 'rgba(255, 97, 97, 0.84)',
+            width: 0
+          })
+        })
+      })
+      olMap.addLayer(vectorLayer)
+      let draw = new Draw({
+        source: source,
+        type: 'Circle',
+        geometryFunction: createBox(),
+        style: new Style({
+          fill: new Fill({
+            color: 'rgba(255, 97, 97, 0.24)'
+          }),
+          stroke: new Stroke({
+            color: 'rgba(255, 97, 97, 0.84)',
+            width: 0
+          }),
+          freehand: true
+        })
+      })
+      olMap.addInteraction(draw)
+      // 添加事件
+      draw.on('drawstart', function (event) {
+        source.clear()
+      })
+      draw.on('drawend', function (event) {
+        let geometry = event.feature.getGeometry()
+        let extent = geometry.getExtent()
+        let min = toLonLat([extent[0], extent[1]])
+        let max = toLonLat([extent[2], extent[3]])
+
+        callback([min[0], min[1], max[0], max[1]])
+        draw.abortDrawing()
+        olMap.removeInteraction(draw)
+      })
     }
   }
 }

web/src/views/map/index.vue

@@ -6,6 +6,31 @@
       </div>
       <div class="map-tool-box-bottom-right">
 
+        <div class="map-tool-btn-group" v-if="mapTileList.length > 0">
+          <el-dropdown placement="top"  @command="changeLayerStyle">
+            <div class="el-dropdown-link map-tool-btn">
+              <i class="iconfont icon-mti-jutai"></i>
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="1" >
+                <span v-if="layerStyle !== 1">直接展示</span>
+                <span v-if="layerStyle === 1" style="color: rgb(64, 158, 255);">直接展示</span>
+              </el-dropdown-item>
+              <el-dropdown-item :command="2">
+                <span v-if="layerStyle !== 2">碰撞检测</span>
+                <span v-if="layerStyle === 2" style="color: rgb(64, 158, 255);">碰撞检测</span>
+              </el-dropdown-item>
+              <el-dropdown-item :command="3">
+                <span v-if="layerStyle !== 3">抽稀图层</span>
+                <span v-if="layerStyle === 3" style="color: rgb(64, 158, 255);">抽稀图层</span>
+              </el-dropdown-item>
+              <el-dropdown-item :command="4">
+                <span v-if="layerStyle !== 4">聚合图层</span>
+                <span v-if="layerStyle === 4" style="color: rgb(64, 158, 255);">聚合图层</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
         <div class="map-tool-btn-group" v-if="mapTileList.length > 0">
           <el-dropdown placement="top"  @command="changeMapTile">
             <div class="el-dropdown-link map-tool-btn">
@@ -32,23 +57,25 @@
       </div>
       <div class="map-tool-box-top-left">
         <div class="map-tool-btn-group">
-          <el-dropdown >
+          <div class="map-tool-btn" title="图层抽稀" @click="showDrawThinBox(true)">
-
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item @click.native="quicklyDrawThin">快速抽稀</el-dropdown-item>
-              <el-dropdown-item>局部抽稀</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <div class="map-tool-btn" title="图层抽稀" @click="showDrawThinBox">
             <i class="iconfont icon-mti-sandian"></i> <span>图层抽稀</span>
           </div>
-
         </div>
       </div>
-      <div class="map-tool-draw-thin">
+      <transition name="el-zoom-in-top">
-
+        <div v-show="showDrawThin"  class="map-tool-draw-thin">
-      </div>
+          <div class="map-tool-draw-thin-density">
+            <span style="line-height: 36px; font-size: 15px">密度： </span>
+            <el-slider v-model="diffPixels" show-input :min="10" :max="200" input-size="mini"></el-slider>
+            <div style="margin-left: 10px; line-height: 38px;">
+              <el-button type="primary" plain @click="quicklyDrawThin" size="mini">快速抽稀</el-button>
+              <el-button type="primary" plain size="mini" @click="boxDrawThin" >局部抽稀</el-button>
+              <el-button type="primary" size="mini" @click="saveDrawThin()">保存</el-button>
+              <el-button type="warning" size="mini" @click="showDrawThinBox(false)">取消</el-button>
+            </div>
+          </div>
+        </div>
+      </transition>
 
 <!--      <div class="map-tool-box-top-right">-->
 <!--        <div class="map-tool-btn-group">-->
@@ -58,9 +85,7 @@
 <!--          <div class="map-tool-btn" title="聚合">-->
 <!--            <i class="iconfont icon-mti-jutai"></i>-->
 <!--          </div>-->
-<!--          <div class="map-tool-btn" title="默认">-->
+
-<!--            <i class="iconfont icon-mti-jutai"></i>-->
-<!--          </div>-->
 <!--        </div>-->
 <!--      </div>-->
       <div ref="infobox">
@@ -104,7 +129,9 @@ import queryTrace from './queryTrace.vue'
 import MapComponent from '../common/MapComponent.vue'
 import devicePlayer from '../common/channelPlayer/index.vue'
 
-let cameraLayerList = []
+let cameraListForSource = []
+let cameraList = []
+let cameraListForLevelMap = new Map()
 let cameraLayerExtent = []
 export default {
   name: 'Map',
@@ -131,7 +158,9 @@ export default {
       latitudeStr: 'latitude',
       mapTileList: [],
       diffPixels: 60,
-      zoomValue: 10
+      zoomValue: 10,
+      showDrawThin: false,
+      layerStyle: 1
     }
   },
   created() {
@@ -206,9 +235,8 @@ export default {
       // 获取所有有位置的通道
       this.closeInfoBox()
       this.$store.dispatch('commonChanel/getAllForMap', {}).then(data => {
-        cameraLayerList = data
+        cameraListForSource = data
         let minLng, minLat, maxLng, maxLat
-        let array = []
         for (let i = 0; i < data.length; i++) {
           let item = data[i]
           if (i === 0) {
@@ -232,7 +260,7 @@ export default {
           }
           if (item.gbLongitude && item.gbLatitude) {
             let position = [item.gbLongitude, item.gbLatitude]
-            array.push({
+            let cameraData = {
               id: item.gbId,
               position: position,
               data: item,
@@ -240,32 +268,64 @@ export default {
                 anchor: [0.5, 1],
                 src: this.getImageByChannel(item)
               }
-            })
+            }
+            cameraList.push(cameraData)
+            if (item.mapLevel) {
+              if (cameraListForLevelMap.has(item.mapLevel)) {
+                let list = cameraListForLevelMap.get(item.mapLevel)
+                list.push(cameraData)
+              }else {
+                cameraListForLevelMap.set(item.mapLevel, [cameraData])
+              }
+            }else {
+              cameraListForLevelMap.set(0, [cameraData])
+            }
           }
         }
         cameraLayerExtent = [minLng, minLat, maxLng, maxLat]
-        // this.updateChannelLayer(array)
+        this.updateChannelLayer()
       })
     },
     changeMapTile: function (index) {
       this.$refs.mapComponent.changeMapTile(index)
     },
-    updateChannelLayer: function(array) {
+    changeLayerStyle: function (index) {
-      if (this.channelLayer) {
+      this.layerStyle = index
-        this.channelLayer = this.$refs.mapComponent.updatePointLayer(this.channelLayer, array, true)
+    },
-      }else {
+    updateChannelLayer: function() {
-        this.channelLayer = this.$refs.mapComponent.addPointLayer(array, data => {
+      if (this.layerStyle === 3) {
-          this.closeInfoBox()
+        // 按图层展示结果
-          this.$nextTick(() => {
+        if (this.channelLayer) {
-            if (data[0].edit) {
+          this.channelLayer = this.$refs.mapComponent.updatePointLayerGroup(this.channelLayer, cameraList, true)
-              this.showEditInfo(data[0])
+        }else {
-            }else {
+          this.channelLayer = this.$refs.mapComponent.addPointLayerGroup(cameraList, data => {
-              this.showChannelInfo(data[0])
+            this.closeInfoBox()
-            }
+            this.$nextTick(() => {
-
+              if (data[0].edit) {
+                this.showEditInfo(data[0])
+              }else {
+                this.showChannelInfo(data[0])
+              }
+            })
           })
-        })
+        }
+      }else {
+        if (this.channelLayer) {
+          this.channelLayer = this.$refs.mapComponent.updatePointLayer(this.channelLayer, cameraList, true)
+        }else {
+          this.channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, data => {
+            this.closeInfoBox()
+            this.$nextTick(() => {
+              if (data[0].edit) {
+                this.showEditInfo(data[0])
+              }else {
+                this.showChannelInfo(data[0])
+              }
+            })
+          })
+        }
       }
+
     },
     getImageByChannel: function (channel) {
       if (channel.gbStatus === 'ON') {
@@ -426,18 +486,45 @@ export default {
     testArray: function (){
       this.$store.dispatch('commonChanel/test')
     },
+    showDrawThinBox: function(show){
+      this.showDrawThin = show
+    },
     quicklyDrawThin: function (){
-      console.log(cameraLayerList.length)
+      this.drawThin(cameraLayerExtent)
-      let allCameraList = cameraLayerList.slice()
+    },
+    boxDrawThin: function (){
+      this.$refs.mapComponent.startDrawBox((extent) => {
+          this.drawThin(extent)
+      })
+    },
+    drawThin: function (extent){
+      console.log(cameraListForSource.length)
+      let cameraListInExtent = []
+      let cameraListOutExtent = []
+      if (!extent) {
+        cameraListInExtent = cameraListForSource.slice()
+      }else {
+        for (let i = 0; i < cameraListForSource.length; i++) {
+          let value = cameraListForSource[i]
+          if (!value.gbLongitude || !value.gbLatitude) {
+            continue
+          }
+          if (value.gbLongitude >= extent[0] && value.gbLongitude <= extent[2]
+            && value.gbLatitude >= extent[1] && value.gbLatitude <= extent[3]) {
+            cameraListInExtent.push(value)
+          }else {
+            cameraListOutExtent.push(value)
+          }
+        }
+      }
+
       // 获取全部层级
       let zoomExtent = this.$refs.mapComponent.getZoomExtent()
-
       let zoom = zoomExtent[0]
       let zoomCameraMap = new Map()
       let useCameraMap = new Map()
 
       while (zoom < zoomExtent[1]) {
-
         // 计算经纬度差值
         let diff = this.$refs.mapComponent.computeDiff(this.diffPixels, zoom)
         let cameraMapForZoom = new Map()
@@ -451,8 +538,8 @@ export default {
           useCameraMapForZoom.set(gridKey, value)
         }
 
-        for (let i = 0; i < allCameraList.length; i++) {
+        for (let i = 0; i < cameraListInExtent.length; i++) {
-          let value = allCameraList[i]
+          let value = cameraListInExtent[i]
           if (useCameraMap.has(value.gbId) || !value.gbLongitude || !value.gbLatitude) {
             continue
           }
@@ -481,23 +568,22 @@ export default {
         zoom += 1
       }
       let cameraArray = []
-      for (let i = 0; i < allCameraList.length; i++) {
+      for (let i = 0; i < cameraListInExtent.length; i++) {
-        let value = allCameraList[i]
+        let value = cameraListInExtent[i]
         if (useCameraMap.has(value.gbId) || !value.gbLongitude || !value.gbLatitude) {
           continue
         }
         cameraArray.push(value)
-
       }
-      setTimeout(() =>{
+      this.addZoomLayer(cameraArray, zoomExtent[1])
-        this.addZoomLayer(cameraArray, zoomExtent[1])
+      if (cameraListOutExtent.length > 0) {
-      }, 30)
+        console.log("cameraListOutExtent --  " + cameraListOutExtent.length)
-
+        this.addZoomLayer(cameraListOutExtent, zoomExtent[0])
-
+      }
     },
 
     addZoomLayer(cameraArray, zoom) {
-      console.log(zoom)
+      console.log(zoom + ' ===== ' + cameraArray.length)
       let dataArray = []
       for (let i = 0; i < cameraArray.length; i++) {
         let item = cameraArray[i]
@@ -515,8 +601,11 @@ export default {
       this.$refs.mapComponent.addPointLayer(dataArray, data => {
 
       }, {
-        minZoom: zoom
+        minZoom: zoom - 1
       })
+    },
+    saveDrawThin: function(){
+
     }
   }
 
@@ -576,6 +665,21 @@ export default {
   border-bottom: none;
   border-right: none;
 }
+.map-tool-draw-thin {
+  position: absolute;
+  top: 63px;
+  left: 380px;
+  border: 1px solid #dfdfdf;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 0 10px;
+}
+.map-tool-draw-thin-density {
+  display: grid;
+  grid-template-columns: 50px 400px auto;
+  padding: 0;
+  margin: 0;
+}
 
 .infobox-content{
   width: 270px;