<template>
|
<div>
|
<layers-show-control :dialogVisible="dialogVisible" :isHavePolice="isHavePolice" :isHaveArrow="isHaveArrow"
|
:isHaveLine="isHaveLine" :policeSwitch="policeSwitch" :arrowBtnSwitch="arrowBtnSwitch"
|
:polylineBtnSwitch="polylineBtnSwitch"></layers-show-control>
|
|
<draw-btn-box v-if="currentPlotType == 3" ref="DRAWBTNBOX" :dialogVisible="dialogVisible"
|
:isShowActivityEditBox="isShowActivityEditBox" :showingSecurityId="showingSecurityId"
|
:policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch" :arrowBtnSwitch="arrowBtnSwitch"
|
:policeIconId="policeIconId" :lineWidth="lineWidth" @setPoliceOption="setPoliceOption"></draw-btn-box>
|
|
<two-draw-btn-box v-if="currentPlotType == 1" ref="DRAWBTNBOX" :dialogVisible="dialogVisible"
|
:isShowActivityEditBox="isShowActivityEditBox" :showingSecurityId="showingSecurityId"
|
:policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch" :arrowBtnSwitch="arrowBtnSwitch"
|
:policeIconId="policeIconId" :lineWidth="lineWidth" @setPoliceOption="setPoliceOption"></two-draw-btn-box>
|
|
<polygon-plot ref="PolygonPlotPage" :showingSecurityId="showingSecurityId"
|
:activityDeptId="activityDeptId"></polygon-plot>
|
|
<polyline-plot ref="PolylinePlotPage" :showingSecurityId="showingSecurityId"></polyline-plot>
|
|
<police-car-change ref="PoliceCarChange" :policeOption="policeOption"
|
:showingSecurityId="showingSecurityId"></police-car-change>
|
|
<police-person-change ref="PolicePersonChange" :policeTreeData="policeTreeData"
|
:showingSecurityId="showingSecurityId"></police-person-change>
|
|
<activity-detail :dialogVisible="dialogVisible" :activityDetails="activityDetails"
|
@closeActivityDetails="closeActivityDetails"></activity-detail>
|
|
<video-control-box ref="VIDEOCONTROLBOX"></video-control-box>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getSecurityPoliceList,
|
getSecurityCarList,
|
getSecurityPlotList,
|
getPolicemanTree,
|
getCarList
|
} from '@/api/activity/index.js'
|
|
import layersShowControl from './layersShowControl.vue'
|
import polygonPlot from './polygonPlot.vue'
|
import polylinePlot from './polylinePlot.vue'
|
import drawBtnBox from './drawBtnBox.vue'
|
import twoDrawBtnBox from './twoDrawBtnBox.vue'
|
import policeCarChange from './policeCarChange.vue'
|
import policePersonChange from './policePersonChange.vue'
|
import activityDetail from './activityDetail.vue'
|
import videoControlBox from './videoControlBox.vue'
|
import { getLineSpeed } from '@/utils/turfPolygon'
|
|
// 要素的
|
let pointCircleCarLayer = null
|
// 作战的
|
let arrowsListLayer = null
|
// 巡逻的
|
let lineLayer = undefined
|
|
let policecarOption = []
|
|
export default {
|
inject: ['userInfo'],
|
|
props: ['activityDeptId'],
|
|
data () {
|
return {
|
dialogVisible: false,
|
isShowActivityEditBox: false,
|
activityDetails: {},
|
isHaveLine: false,
|
isHaveArrow: false,
|
policeSwitch: true,
|
arrowBtnSwitch: true,
|
polylineBtnSwitch: true,
|
policeTreeData: [],
|
policeOption: [],
|
policeIconId: '',
|
policeType: '',
|
pointAreaWidth: '',
|
choosePoliceColor: '',
|
searchPoliceTreeId: '',
|
searchPoliceTreeName: '',
|
policeIconIsCreated: false,
|
policeChooseVisible: false,
|
chooseCarColor: '',
|
policeChooseCarVisible: false,
|
isChoosePoliceElementDisabled: false,
|
showingSecurityId: '',
|
isHavePoliceCar: false,
|
isHavePoliceMan: false,
|
isHavePointDraw: false,
|
isHaveFactor: false,
|
currentPlotType: 1
|
}
|
},
|
|
components: {
|
layersShowControl,
|
drawBtnBox,
|
twoDrawBtnBox,
|
polygonPlot,
|
polylinePlot,
|
policeCarChange,
|
policePersonChange,
|
activityDetail,
|
videoControlBox
|
},
|
|
computed: {
|
isHavePolice () {
|
return this.isHavePoliceCar || this.isHavePoliceMan || this.isHavePointDraw || this.isHaveFactor
|
}
|
},
|
|
mounted () {
|
this.$nextTick(() => {
|
if (pointCircleCarLayer == null) {
|
pointCircleCarLayer = new global.DC.VectorLayer('pointCircleCarLayer')
|
global.viewer.addLayer(pointCircleCarLayer)
|
}
|
|
if (arrowsListLayer == null) {
|
arrowsListLayer = new global.DC.VectorLayer('arrowsListLayer')
|
global.viewer.addLayer(arrowsListLayer)
|
}
|
|
if (lineLayer == null) {
|
lineLayer = new global.DC.VectorLayer('lineLayer')
|
global.viewer.addLayer(lineLayer)
|
}
|
})
|
},
|
methods: {
|
addNewPolice (data, type, dataType = '') {
|
this.$refs.DRAWBTNBOX.addNewPolice(data, type, dataType)
|
},
|
|
addPointPopupShow (type, positions) {
|
this.$refs.PolygonPlotPage.addPointPopupShow(type, positions)
|
},
|
|
addSaveNewDrawPoint (type, overlay) {
|
if (type == 'policeman') {
|
this.$refs.PolicePersonChange.addPopupShow(overlay)
|
} else if (type == 'policecar') {
|
this.policeOption = policecarOption
|
this.$refs.PoliceCarChange.addPopupShow(overlay)
|
}
|
},
|
// 要素资源添加
|
addPointCircleCarLayer (overlay) {
|
pointCircleCarLayer.addOverlay(overlay)
|
},
|
|
addSaveNewDraw (positions, type, altitude = []) {
|
this.$refs.PolygonPlotPage.addPopupShow(positions, type, altitude)
|
},
|
// 作战标绘的添加
|
addArrowsListLayer (overlay) {
|
arrowsListLayer.addOverlay(overlay)
|
},
|
|
removeArrowsListLayer (overlay) {
|
arrowsListLayer.removeOverlay(overlay)
|
},
|
|
addSaveNewDrawLine (positions, altitude) {
|
this.$refs.PolylinePlotPage.addPopupShow(positions, altitude)
|
},
|
// 巡逻路线的添加
|
addLineLayer (overlay) {
|
lineLayer.addOverlay(overlay)
|
},
|
|
// 视频查看
|
lookStartVideo (line, polygon) {
|
this.$refs.VIDEOCONTROLBOX.watchVideo(line, polygon)
|
},
|
|
// 关闭详情弹窗
|
closeActivityDetails () {
|
this.$parent.cleartAllTimer()
|
|
this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.removeDrawArrow()
|
|
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityCameraLayers',
|
type: 'VectorLayer'
|
})
|
|
// 警车
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityCarLayers',
|
type: 'VectorLayer'
|
})
|
|
// 手台-公网
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityTalkBackEquipmentPublicLayers',
|
type: 'VectorLayer'
|
})
|
|
// 手台-专网
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityTalkBackEquipmentLayers',
|
type: 'VectorLayer'
|
})
|
|
// 执法记录仪
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityPoliceCameraLayers',
|
type: 'VectorLayer'
|
})
|
|
this.dialogVisible = false
|
this.policeSwitch = false
|
this.arrowBtnSwitch = false
|
this.polylineBtnSwitch = false
|
this.$refs.VIDEOCONTROLBOX && this.$refs.VIDEOCONTROLBOX.closeVideo()
|
this.$parent.showingSecurityId = ''
|
this.$parent.currentTreeItem = ''
|
this.$parent.activeActivityIndex = ''
|
|
this.clearOrRemoveLayerAll('clear')
|
this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.stopDraw()
|
},
|
|
closeCurrentItem () {
|
this.$parent.cleartAllTimer()
|
|
this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.removeDrawArrow()
|
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityCameraLayers',
|
type: 'VectorLayer'
|
})
|
|
// 警车
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityCarLayers',
|
type: 'VectorLayer'
|
})
|
|
// 手台-公网
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityTalkBackEquipmentPublicLayers',
|
type: 'VectorLayer'
|
})
|
|
// 手台-专网
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityTalkBackEquipmentLayers',
|
type: 'VectorLayer'
|
})
|
|
// 执法记录仪
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'activityPoliceCameraLayers',
|
type: 'VectorLayer'
|
})
|
|
this.dialogVisible = false
|
this.policeSwitch = false
|
this.arrowBtnSwitch = false
|
this.polylineBtnSwitch = false
|
this.$refs.VIDEOCONTROLBOX && this.$refs.VIDEOCONTROLBOX.closeVideo()
|
|
this.clearOrRemoveLayerAll('clear')
|
this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.stopDraw()
|
},
|
|
addNewPlot (data) {
|
this.$refs.DRAWBTNBOX.addNewPlot(data)
|
},
|
|
removeDrawArrow () {
|
this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.removeDrawArrow()
|
},
|
|
plotEdit (overlay, type) {
|
this.$refs.DRAWBTNBOX.plotEdit(overlay, type)
|
},
|
|
updateSecurityPlot (params, overlay) {
|
this.$refs.DRAWBTNBOX.updateSecurityPlot(params, overlay)
|
},
|
|
updateActivityPolice (params, overlay) {
|
this.$refs.DRAWBTNBOX.updateActivityPolice(params, overlay)
|
},
|
|
updateActivityCar (params, overlay) {
|
this.$refs.DRAWBTNBOX.updateActivityCar(params, overlay)
|
},
|
|
reloadAll (params) {
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
|
|
this.currentPlotType = params.item.plotType
|
|
this.closeCurrentItem()
|
|
// 当前选中的ID
|
this.showingSecurityId = params.item.id
|
// 当前选中的详情
|
this.activityDetails = params.item
|
|
// 测试安保活动报错
|
this.dialogVisible = true
|
|
if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == params.item.deptId) {
|
this.isShowActivityEditBox = true
|
} else {
|
this.isShowActivityEditBox = false
|
}
|
|
this.policeSwitch = true
|
this.arrowBtnSwitch = true
|
this.polylineBtnSwitch = true
|
|
this.getPolicemanTree({ deptId: params.deptId })
|
this.getCarList({ deptId: params.deptId })
|
|
this.getSecurityPlotList(params.id)
|
this.getSecurityPoliceList(params.id)
|
this.getSecurityCarList(params.id)
|
|
},
|
|
// 获取树状警员列表
|
getPolicemanTree (params) {
|
getPolicemanTree(params).then(res => {
|
this.policeTreeData = res.data.data
|
})
|
},
|
|
// 获取警车列表，生成下拉数据
|
getCarList (params) {
|
getCarList(params).then(res => {
|
res.data.data.forEach(item => {
|
policecarOption.push({ value: `${item.id}`, label: `${item.serialNumber}`, carType: `${item.carType}`, serialNumber: `${item.serialNumber}`, unitCode: `${item.unitCode}`, unitName: `${item.unitName}`, carNo: `${item.carNo}`, deptName: `${item.deptName}` })
|
})
|
|
this.policeOption = policecarOption
|
})
|
},
|
|
// 获取标绘箭头列表
|
getSecurityPlotList (securityId) {
|
getSecurityPlotList(securityId).then(res => {
|
// 要素资源
|
this.$parent.normalPeopleList = res.data.data.filter(item => item.type == 6)
|
this.$parent.protectedPeopleList = res.data.data.filter(item => item.type == 7)
|
this.$parent.dangerousPeopleList = res.data.data.filter(item => item.type == 8)
|
this.$parent.customList = res.data.data.filter(item => item.type == 11)
|
|
// 作战标绘
|
this.$parent.attackArrowList = res.data.data.filter(item => item.type == 1)
|
this.$parent.doubleArrowList = res.data.data.filter(item => item.type == 2)
|
this.$parent.tailedAttackArrowList = res.data.data.filter(item => item.type == 3)
|
this.$parent.fineArrowList = res.data.data.filter(item => item.type == 4)
|
this.$parent.polygonList = res.data.data.filter(item => item.type == 5)
|
this.$parent.borkenList = res.data.data.filter(item => item.type == 10)
|
|
this.isHaveArrow = res.data.data.some(item => {
|
return item.type != 6 && item.type != 7 && item.type != 8 && item.type != 11
|
})
|
|
this.isHavePointDraw = res.data.data.some(item => {
|
return item.type == 6 || item.type == 7 || item.type == 8 || item.type == 11
|
})
|
|
let allData = res.data.data
|
|
for (let item of allData) {
|
let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
|
|
let altitude = item.altitude.split(',')
|
|
// let nameLabel = null
|
let color = this.getCoverageColor(item.color)
|
|
if (item.type == 1) {
|
this.initLayersCoverage('AttackArrow', color, item, position)
|
continue
|
} else if (item.type == 2) {
|
this.initLayersCoverage('DoubleArrow', color, item, position)
|
continue
|
} else if (item.type == 3) {
|
this.initLayersCoverage('FineArrow', color, item, position)
|
continue
|
} else if (item.type == 4) {
|
this.initLayersCoverage('TailedAttackArrow', color, item, position)
|
continue
|
} else if (item.type == 5) {
|
this.initLayersCoverage('Polygon', color, item, position, altitude)
|
continue
|
} else if (item.type == 6 || item.type == 7 || item.type == 8 || item.type == 11) {
|
let icon = ''
|
|
if (item.type == 11) {
|
icon = item.iconUrl
|
} else {
|
icon = `/img/icon/rest.png`
|
}
|
|
const height = item.altitude.split(',')
|
position = position.split(';')[0].split(',')
|
|
let chooseArrow = new global.DC.Billboard(new global.DC.Position(Number(position[0]), Number(position[1]), Number(height[0])), icon)
|
chooseArrow.customType = 'billboard'
|
chooseArrow.setStyle({
|
color: color.curColor,
|
})
|
chooseArrow.attrParams = { id: item.id, color: item.color, item }
|
chooseArrow.size = [32, 32]
|
chooseArrow.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
|
chooseArrow.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver)
|
chooseArrow.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut)
|
pointCircleCarLayer.addOverlay(chooseArrow)
|
} else if (item.type == 10) {
|
this.initLayersCoverage('Polyline', color, item, position, altitude)
|
continue
|
}
|
}
|
})
|
},
|
|
getCoverageColor (color) {
|
let curColor
|
let outColor
|
if (color == '') {
|
curColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 69, 0, 173)
|
outColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 69, 0, 255)
|
} else {
|
let r = parseInt(color.slice(1, 3), 16)
|
let g = parseInt(color.slice(3, 5), 16)
|
let b = parseInt(color.slice(5, 7), 16)
|
let a = Math.floor(Number(color.split(',')[1]) * 2.55) ? Math.floor(Number(color.split(',')[1]) * 2.55) : 255
|
curColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
|
outColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
|
}
|
|
return { curColor, outColor }
|
},
|
|
initLayersCoverage (type, color, params, position, altitude) {
|
let positions = position
|
if (altitude && altitude.length) {
|
positions = position.split(';').map((item, index) => `${item},${altitude[index]}`).join(';')
|
} else {
|
positions = position
|
}
|
|
let coverage = new global.DC[type](positions)
|
if (type == 'Polygon') {
|
if (params.areaType == 1) {
|
coverage.setStyle({
|
material: color.curColor,
|
extrudedHeight: null,
|
perPositionHeight: this.currentPlotType == 3 ? true : false,
|
closeTop: false,
|
closeBottom: false,
|
// classificationType: global.DC.Namespace.Cesium.ClassificationType.TERRAIN
|
outline: true,
|
outlineColor: color.outColor,
|
outlineWidth: 4.0,
|
})
|
} else {
|
let maxHeight = Math.max(...altitude) + 5
|
|
positions = position.split(';').map((item, index) => `${item},${maxHeight}`)
|
positions.push(positions[0])
|
positions = positions.join(';')
|
coverage = new global.DC.Wall(positions)
|
|
let multiple, speed
|
if (params.iconUrl.indexOf('1') != -1) {
|
multiple = 250
|
speed = 3
|
} else if (params.iconUrl.indexOf('2') != -1) {
|
multiple = 195
|
speed = 3
|
} else {
|
multiple = 50
|
speed = 10
|
}
|
|
if (params.areaType == 2) {
|
coverage.setStyle({
|
material: new global.DC.WallImageTrailMaterialProperty({
|
image: params.iconUrl,
|
color: color.curColor,
|
repeat: {
|
x: getLineSpeed(position.split(';').map(item => {
|
item.split(',')
|
|
return [Number(item.split(',')[0]), Number(item.split(',')[1])]
|
}), multiple), y: 1
|
},
|
speed: speed
|
})
|
})
|
} else {
|
coverage.setStyle({
|
material: new global.DC.WallTrailMaterialProperty({
|
color: color.curColor,
|
speed: 10
|
})
|
})
|
}
|
|
}
|
|
coverage.customType = 'polygon'
|
} else if (type == 'Polyline') {
|
coverage.setStyle({
|
material: color.curColor,
|
width: 4
|
})
|
|
coverage.customType = 'brokenline'
|
} else {
|
coverage.setStyle({
|
material: color.curColor,
|
outline: true,
|
outlineColor: color.outColor,
|
outlineWidth: 4.0,
|
})
|
|
coverage.customType = 'polyArrows'
|
}
|
coverage.attrParams = { id: params.id, color: params.color, item: params }
|
coverage.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
|
coverage.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver)
|
coverage.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut)
|
arrowsListLayer.addOverlay(coverage)
|
return coverage
|
},
|
|
// 获取警员分布信息
|
getSecurityPoliceList (securityId) {
|
getSecurityPoliceList(securityId).then(res => {
|
this.isHavePoliceMan = res.data.data.some(item => {
|
return item.type == 3
|
})
|
|
this.addMapCarAndPersonLayers(
|
res.data.data.filter(item => item.type == 3),
|
'policeman',
|
pointCircleCarLayer
|
)
|
})
|
},
|
|
/**
|
* @description: 警力资源警车和巡逻路线的
|
* @param {*} securityId
|
* @param {*} polylineShow
|
* @return {*}
|
*/
|
getSecurityCarList (securityId) {
|
|
getSecurityCarList(securityId).then(res => {
|
this.isHavePoliceCar = res.data.data.some(item => {
|
return item.type == 3
|
})
|
|
this.isHaveLine = res.data.data.some(item => {
|
return item.type == 1
|
})
|
|
this.addMapCarAndPersonLayers(
|
res.data.data.filter(item => item.type == 3),
|
'policecar',
|
pointCircleCarLayer)
|
this.addMapLineLayers(res.data.data.filter(item => item.type == 1))
|
})
|
},
|
|
|
/**
|
* @description: 警力资源地图添加
|
* @param {*} data
|
* @param {*} type
|
* @param {*} curLayer
|
* @param {*} mapLayer
|
* @return {*}
|
*/
|
addMapCarAndPersonLayers (data, type) {
|
if (type == 'policecar') {
|
this.$parent.chooseActivityPoliceCarList = data
|
} else {
|
this.$parent.chooseActivityPoliceManList = data
|
}
|
data.forEach(item => {
|
let positionObj = this.convertBillboardPositionDate(item, type)
|
let color = ''
|
if (item.color == '') {
|
color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
|
} else {
|
let r = parseInt(item.color.slice(1, 3), 16)
|
let g = parseInt(item.color.slice(3, 5), 16)
|
let b = parseInt(item.color.slice(5, 7), 16)
|
color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
|
}
|
|
let chooseArrow = new global.DC.Billboard(new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat), Number(positionObj.alt)), positionObj.url)
|
chooseArrow.customType = 'billboard'
|
chooseArrow.setStyle({
|
color: color,
|
})
|
chooseArrow.attrParams = positionObj
|
chooseArrow.size = [32, 32]
|
chooseArrow.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
|
chooseArrow.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver)
|
chooseArrow.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut)
|
pointCircleCarLayer.addOverlay(chooseArrow)
|
})
|
},
|
|
// 鼠标移入图标事件
|
pointMouseOver (e) {
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', true)
|
let hoverData = {
|
}
|
|
if (
|
e.overlay.attrParams.item && e.overlay.attrParams.item.type &&
|
(
|
e.overlay.attrParams.item.type == 1 ||
|
e.overlay.attrParams.item.type == 2 ||
|
e.overlay.attrParams.item.type == 3 ||
|
e.overlay.attrParams.item.type == 4 ||
|
e.overlay.attrParams.item.type == 5 ||
|
e.overlay.attrParams.item.type == 6 ||
|
e.overlay.attrParams.item.type == 7 ||
|
e.overlay.attrParams.item.type == 8 ||
|
e.overlay.attrParams.item.type == 10 ||
|
e.overlay.attrParams.item.type == 11)) {
|
hoverData.billboard = true
|
} else {
|
if ('carId' in e.overlay.attrParams.data) {
|
hoverData = policecarOption.filter(item => item.value == e.overlay.attrParams.data.carId)[0]
|
hoverData.policeData = { 'name': 'none' }
|
hoverData.policeStationName = 'none'
|
} else {
|
let policeArr = this.filterTree(this.policeTreeData)
|
hoverData.policeData = policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0]
|
hoverData.policeStationName = policeArr.filter(item => item.id == policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0].parentId)[0].name
|
hoverData.carType = 'none'
|
hoverData.label = 'none'
|
}
|
|
hoverData.billboard = false
|
}
|
|
hoverData.Data = e.overlay.attrParams
|
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUPDATA', hoverData)
|
|
var popup = new global.DC.DivForms(global.viewer, {
|
domId: 'ActivityPoliceDomBox',
|
position: [
|
global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
Number(e.wgs84SurfacePosition.lng),
|
Number(e.wgs84SurfacePosition.lat),
|
0
|
)
|
)
|
]
|
})
|
},
|
|
/**
|
* @description: 鼠标移出事件
|
* @param {*} e
|
* @return {*}
|
*/
|
pointMouseOut (e) {
|
this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
|
},
|
|
/**
|
* @description: 巡逻路线地图添加
|
* @param {*} data
|
* @return {*}
|
*/
|
addMapLineLayers (data) {
|
this.$parent.chooseActivityLineList = data
|
|
data.forEach(item => {
|
let maxHeight = item.altitude.split(',').reduce((pre, cur) => {
|
return cur > pre ? cur : pre
|
}, 0)
|
let positionNewArr = this.convertPolylineOrPolygonPositionDate(item, 'port')
|
// 线坐标字符串
|
item.linePositionStr = positionNewArr
|
|
let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, item.width != -1 ? item.width : 100)
|
|
let color = ''
|
let lineColor = ''
|
|
if (item.color == '') {
|
color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
|
} else {
|
let r = parseInt(item.color.slice(1, 3), 16)
|
let g = parseInt(item.color.slice(3, 5), 16)
|
let b = parseInt(item.color.slice(5, 7), 16)
|
color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
|
lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
|
}
|
|
let positionStr = ''
|
coords.forEach(item => {
|
positionStr += item[0] + ',' + item[1] + ',' + maxHeight + ';'
|
})
|
|
item.polygonPositionStr = positionStr
|
|
let lineObj = new global.DC.Polyline(positionNewArr)
|
lineObj.customType = 'polyline'
|
lineObj.setStyle({
|
material: new global.DC.PolylineArrowMaterialProperty(lineColor),
|
clampToGround: this.currentPlotType == 3 ? false : true,
|
width: 10
|
})
|
|
lineLayer.addOverlay(lineObj)
|
|
this.$EventBus.$emit('layerPolygonAdd', {
|
layerName: 'newCarDrawLineLayers',
|
positions: positionStr,
|
material: color,
|
params: { ...item, lineObj, item, data: item },
|
incident: this.lineOverlayTypeClick,
|
mouseOverIncident: this.pointMouseOver,
|
mouseOutIncident: this.pointMouseOut
|
})
|
})
|
},
|
|
clearOrRemoveLayerAll (type) {
|
if (type == 'clear') {
|
// 要素的
|
pointCircleCarLayer != null && pointCircleCarLayer.clear()
|
|
// 作战的
|
arrowsListLayer != null && arrowsListLayer.clear()
|
|
// 巡逻的
|
lineLayer != null && lineLayer.clear()
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'newCarDrawLineLayers',
|
type: 'VectorLayer'
|
})
|
|
// 活动区域的
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: 'polygonWallLayer',
|
type: 'VectorLayer'
|
})
|
} else {
|
// 要素的
|
pointCircleCarLayer != null && pointCircleCarLayer.remove(), pointCircleCarLayer = null
|
|
// 作战的
|
arrowsListLayer != null && arrowsListLayer.remove(), arrowsListLayer = null
|
|
// 巡逻的
|
lineLayer != null && lineLayer.remove(), lineLayer = null
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'newCarDrawLineLayers',
|
type: 'VectorLayer'
|
})
|
|
// 活动区域的
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'polygonWallLayer',
|
type: 'VectorLayer'
|
})
|
}
|
},
|
|
// 切换轨警力资源显示
|
switchChange (e) {
|
pointCircleCarLayer.show = e
|
},
|
|
// 切换作战标绘
|
switchArrowBtnChange (e) {
|
arrowsListLayer.show = e
|
},
|
|
// 切换轨迹播放控件
|
switchBtnChange (e) {
|
lineLayer.show = e
|
this.$EventBus.$emit('layerShow', { layerName: 'newCarDrawLineLayers', flag: e })
|
},
|
|
// 获取标绘图层覆盖物
|
getArrowsListLayerOverlayList () {
|
return arrowsListLayer.getOverlays()
|
},
|
|
// 单击。标绘箭头
|
reeditArrowClick (e) {
|
this.$refs.PolygonPlotPage.setCurOver(e)
|
},
|
|
// 地图绘制元素点击事件
|
overlayTypeClick (e) {
|
if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
|
this.isChoosePoliceElementDisabled = false
|
} else {
|
this.isChoosePoliceElementDisabled = true
|
}
|
|
if ('policemanId' in e.overlay.attrParams.data) {
|
this.$refs.PolicePersonChange.setConfig(e)
|
} else if ('carId' in e.overlay.attrParams.data) {
|
this.$refs.PoliceCarChange.setConfig(e)
|
}
|
},
|
|
// 树形数据传数组
|
filterTree (tree, arr = []) {
|
if (!tree.length) return []
|
arr.push(...tree)
|
for (let item of tree) {
|
if (item.children && item.children.length) {
|
this.filterTree(item.children, arr)
|
}
|
}
|
return arr
|
},
|
|
// 巡逻路线面点击事件
|
lineOverlayTypeClick (e) {
|
this.policeIconId = e.overlay.attrParams.id
|
|
this.$refs.VIDEOCONTROLBOX.closeVideo()
|
|
this.$refs.PolylinePlotPage.setOverlay(e)
|
|
if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
|
this.$refs.PolylinePlotPage.setConfig({
|
title: '修改巡逻路线',
|
isLineEdit: true,
|
lineEditVisible: true
|
})
|
} else {
|
this.$refs.PolylinePlotPage.setConfig({
|
lineEditVisible: true
|
})
|
}
|
},
|
|
// 转换 点 坐标数据
|
convertBillboardPositionDate (data, iconName) {
|
let positionStr = data.position
|
positionStr = data.position.slice(6, positionStr.length - 1)
|
let positionArr = positionStr.split(" ")
|
let positionObj = {}
|
if (iconName == 'activity') {
|
positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: data.altitude, url: '/img/icon/activity.png', data: data }
|
} else if (iconName == 'policeman') {
|
positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: data.altitude, url: '/img/icon/police-people.png', data: data }
|
} else if (iconName == 'policecar') {
|
positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: data.altitude, url: '/img/icon/car.png', data: data }
|
}
|
return positionObj
|
},
|
|
// 转换 线面 坐标数据
|
convertPolylineOrPolygonPositionDate (data, type) {
|
let heightData = data.altitude.split(',')
|
let positionStr = type == 'port' ? data.position.slice(11, data.position.length - 1) : data.position.slice(12, data.position.length - 2)
|
|
let positionArr = positionStr.split(',')
|
|
let positionNewArr = ''
|
|
positionArr.forEach((item, index) => {
|
let lng = item.split(' ')[0]
|
let lat = item.split(' ')[1]
|
let alt = heightData[index]
|
|
positionNewArr += lng + ',' + lat + ',' + alt + ';'
|
})
|
|
return positionNewArr
|
},
|
},
|
|
destroyed () {
|
this.clearOrRemoveLayerAll('remove')
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
