临时提交

2025-10-14 15:57:24 +08:00
parent f4e68e2aef
commit 7ebc23210a
6 changed files with 230 additions and 58 deletions
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/bean/CommonGBChannel.java
+++ b/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);
    }
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/dao/provider/ChannelProvider.java
+++ b/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();
    }

--- a/src/main/java/com/genersoft/iot/vmp/web/custom/CameraChannelController.java
+++ b/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);
    }

+
 }
--- a/src/main/java/com/genersoft/iot/vmp/web/custom/bean/CameraChannel.java
+++ b/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;
 }
--- a/web/src/views/common/MapComponent.vue
+++ b/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 minZoom = option.minZoom || olMap.getView().getMinZoom()
+        let maxZoom = (option && option.maxZoom) ? option.maxZoom : olMap.getView().getMaxZoom()
+        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)
+      })
    }
  }
 }
--- a/web/src/views/map/index.vue
+++ b/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 >
-
-            <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">
+          <div class="map-tool-btn" title="图层抽稀" @click="showDrawThinBox(true)">
            <i class="iconfont icon-mti-sandian"></i> <span>图层抽稀</span>
          </div>
-
        </div>
      </div>
-      <div class="map-tool-draw-thin">
-
-      </div>
+      <transition name="el-zoom-in-top">
+        <div v-show="showDrawThin"  class="map-tool-draw-thin">
+          <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) {
-      if (this.channelLayer) {
-        this.channelLayer = this.$refs.mapComponent.updatePointLayer(this.channelLayer, array, true)
-      }else {
-        this.channelLayer = this.$refs.mapComponent.addPointLayer(array, data => {
-          this.closeInfoBox()
-          this.$nextTick(() => {
-            if (data[0].edit) {
-              this.showEditInfo(data[0])
-            }else {
-              this.showChannelInfo(data[0])
-            }
-
+    changeLayerStyle: function (index) {
+      this.layerStyle = index
+    },
+    updateChannelLayer: function() {
+      if (this.layerStyle === 3) {
+        // 按图层展示结果
+        if (this.channelLayer) {
+          this.channelLayer = this.$refs.mapComponent.updatePointLayerGroup(this.channelLayer, cameraList, true)
+        }else {
+          this.channelLayer = this.$refs.mapComponent.addPointLayerGroup(cameraList, data => {
+            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)
-      let allCameraList = cameraLayerList.slice()
+      this.drawThin(cameraLayerExtent)
+    },
+    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++) {
-          let value = allCameraList[i]
+        for (let i = 0; i < cameraListInExtent.length; 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++) {
-        let value = allCameraList[i]
+      for (let i = 0; i < cameraListInExtent.length; i++) {
+        let value = cameraListInExtent[i]
        if (useCameraMap.has(value.gbId) || !value.gbLongitude || !value.gbLatitude) {
          continue
        }
        cameraArray.push(value)
-
      }
-      setTimeout(() =>{
-        this.addZoomLayer(cameraArray, zoomExtent[1])
-      }, 30)
-
-
+      this.addZoomLayer(cameraArray, zoomExtent[1])
+      if (cameraListOutExtent.length > 0) {
+        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;