wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

不规则框选

This commit is contained in:
于秀圆 2022-09-29 18:19:24 +08:00
parent 057b926183
commit bcbafaf9f0
4 changed files with 180 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/api/file.js
View File

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

BIN
front/src/supermap/image/icon-poylon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

46
front/src/views/home/infrastructurePage.vue
View File

@ -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 i = 1
for (var key in params) {
if (params[key] === '') {
delete params[key]
} else {
if (i != 1) {
paramsFather += `&${key}=` + params[key]
i += 1
} else if (i == 1) {
paramsFather += `${key}=` + params[key]
i += 1
}
}
}
getCameraByCondition(paramsFather).then((res) => {
// let paramsFather = ''
// let i = 1
// for (var key in params) {
// if (params[key] === '') {
// delete params[key]
// } else {
// if (i != 1) {
// paramsFather += `&${key}=` + params[key]
// i += 1
// } else if (i == 1) {
// paramsFather += `${key}=` + params[key]
// i += 1
// }
// }
// }
getCameraByCondition(params).then((res) => {
dataSource.value = res.data.data
pagination.value.total = res.data.count
console.log('根据parent查询摄像头', res.data.data)

153
front/src/views/home/videoSurveillance/index.vue
View File

@ -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)
this.getCameraByParentId()
// mybus.emit('getListByMap', params)
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 i = 1
for (var key in params) {
if (params[key] === '') {
delete params[key]
} else {
if (i != 1) {
paramsFather += `&${key}=` + params[key]
i += 1
} else if (i == 1) {
paramsFather += `${key}=` + params[key]
i += 1
}
}
}
getCameraByCondition(paramsFather).then((res) => {
// let paramsFather = ''
// let i = 1
// for (var key in params) {
// if (params[key] === '') {
// delete params[key]
// } else {
// if (i != 1) {
// paramsFather += `&${key}=` + params[key]
// i += 1
// } else if (i == 1) {
// paramsFather += `${key}=` + params[key]
// i += 1
// }
// }
// }
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;
}