diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/bean/CommonGBChannel.java b/src/main/java/com/genersoft/iot/vmp/gb28181/bean/CommonGBChannel.java index 2e43e5b3b..6713d8796 100644 --- 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); } diff --git 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 index 95e69203e..d59a88cdb 100644 --- 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 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(); } diff --git a/src/main/java/com/genersoft/iot/vmp/web/custom/CameraChannelController.java b/src/main/java/com/genersoft/iot/vmp/web/custom/CameraChannelController.java index 06ff33969..227cebfe1 100644 --- 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 queryListByAddressAndDirectionType(String address, Integer directionType, @RequestParam(required = false) String geoCoordSys) { + public List 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); } + } diff --git 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 index 119581c6a..7cb09b0dd 100644 --- 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; } diff --git a/web/src/views/common/MapComponent.vue b/web/src/views/common/MapComponent.vue index 47c0aa89b..dc9f875d1 100755 --- 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) + }) } } } diff --git a/web/src/views/map/index.vue b/web/src/views/map/index.vue index ee5d700da..415c0640d 100755 --- a/web/src/views/map/index.vue +++ b/web/src/views/map/index.vue @@ -6,6 +6,31 @@
+
+ +
+ +
+ + + 直接展示 + 直接展示 + + + 碰撞检测 + 碰撞检测 + + + 抽稀图层 + 抽稀图层 + + + 聚合图层 + 聚合图层 + + + +
@@ -32,23 +57,25 @@
- - - - 快速抽稀 - 局部抽稀 - - - -
+
图层抽稀
-
-
- -
+ +
+
+ 密度： + +
+ 快速抽稀 + 局部抽稀 + 保存 + 取消 +
+
+
+ @@ -58,9 +85,7 @@ - - - +
@@ -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;