420 lines
16 KiB
JavaScript
420 lines
16 KiB
JavaScript
import * as DT from 'dt-sdk'
|
||
import { viewer } from '@/components/dt-scene'
|
||
export default class UavTarget {
|
||
planLines = new DT.Cesium.AssociativeArray()
|
||
uavEntity = null
|
||
_options = {}
|
||
loaderPicture = {}
|
||
positions = []
|
||
startAltitude = 0
|
||
constructor(viewer, options) {
|
||
this.viewer = viewer
|
||
this._options = options
|
||
this.jobId = options.jobId
|
||
this.uavId = options.uavId
|
||
this.jobName = options.jobName
|
||
this.startAltitude = options.startAltitude
|
||
|
||
this.addPlanLine(options.airlineList)
|
||
this.addUav(options)
|
||
this.addUavLoader(options.payloadList)
|
||
}
|
||
addUav(info) {
|
||
let that = this
|
||
let position = DT.Cesium.Cartesian3.fromDegrees(info.startLon, info.startLat, info.startHeight)
|
||
if (info.trailList && info.trailList.length > 0) {
|
||
info.trailList.forEach(route => {
|
||
this.positions.push(DT.Cesium.Cartesian3.fromDegrees(route.lon, route.lat, route.height))
|
||
})
|
||
} else {
|
||
this.positions.push(position.clone())
|
||
this.positions.push(position.clone())
|
||
}
|
||
let currentPosition = this.positions[this.positions.length - 1].clone()
|
||
let id = `${this.jobId}~${this.uavId}-uav`
|
||
this.uavEntity = this.viewer.entities.add({
|
||
id,
|
||
position: currentPosition,
|
||
// label: {
|
||
// text: info.uavName,
|
||
// font: '14px sans-serif',
|
||
// fillColor: DT.Cesium.Color.WHITE,
|
||
// horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
// verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
|
||
// disableDepthTestDistance: 10000,
|
||
// pixelOffset: new DT.Cesium.Cartesian2(10, 0),
|
||
// showBackground: true,
|
||
// scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.8),
|
||
// distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(0, 20000),
|
||
// backgroundColor: DT.Cesium.Color.fromCssColorString('rgba(0,0,0,0.7)'),
|
||
// style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
// },
|
||
// model: {
|
||
// uri: process.env.BASE_URL + 'model/uav.gltf',
|
||
// // scale: 1,
|
||
// minimumPixelSize: 32,
|
||
// maximumScale: 128,
|
||
// },
|
||
polyline: {
|
||
positions: new DT.Cesium.CallbackProperty(function () {
|
||
return that.positions
|
||
}, false),
|
||
width: 2,
|
||
zIndex: 6,
|
||
material: DT.Cesium.Color.CYAN,
|
||
depthFailMaterial: DT.Cesium.Color.CYAN,
|
||
arcType: DT.Cesium.ArcType.NONE
|
||
}
|
||
})
|
||
}
|
||
updateCurrentPosition(position) {
|
||
this.uavEntity.position = position.clone()
|
||
this.positions.push(position.clone())
|
||
}
|
||
addUavLoader(data) {
|
||
let loaderPicture = {}
|
||
data.forEach(loader => {
|
||
loaderPicture[loader.payloadId] = []
|
||
let key = 'imageList'
|
||
if (loader.imageHighList && loader.imageHighList.length > 0) {
|
||
key = 'imageHighList'
|
||
}
|
||
if (loader[key] && loader[key].length > 0) {
|
||
console.log('这是哈222', loader.imageList)
|
||
loader[key].forEach((image, imageIndex) => {
|
||
let obj = {
|
||
picture: null,
|
||
fileId: image.fileId,
|
||
markArr: []
|
||
}
|
||
// let cby_bg_data=[
|
||
// image.left1Lon, image.left1Lat,
|
||
// image.left2Lon, image.left2Lat,
|
||
// image.right2Lon, image.right2Lat,
|
||
// image.right1Lon, image.right1Lat,
|
||
// ]
|
||
// obj.picture = this.viewer.entities.add({
|
||
// id: `${this.jobId}~${this.uavId}~${loader.payloadId}~${image.fileId}-picture`,
|
||
// name: '背景',
|
||
// polygon: {
|
||
// // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
|
||
// hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
|
||
// perPositionHeight: true,
|
||
// material: new DT.Cesium.ImageMaterialProperty({
|
||
// image: window.config.imagePath + image.relativePath,
|
||
// // image: process.env.BASE_URL + 'static/img/ttt.tif',
|
||
// // image: process.env.BASE_URL + 'static/img/pic.png',
|
||
// }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
|
||
// outline: true,
|
||
// outlineColor: DT.Cesium.Color.WHITE,
|
||
// outlineWidth: 2, //很多电脑当宽度>1时，没用
|
||
// }
|
||
// })
|
||
let minLon = Math.min(image.left1Lon, image.left2Lon, image.right1Lon, image.right2Lon)
|
||
let maxLon = Math.max(image.left1Lon, image.left2Lon, image.right1Lon, image.right2Lon)
|
||
let minLat = Math.min(image.left1Lat, image.left2Lat, image.right1Lat, image.right2Lat)
|
||
let maxLat = Math.max(image.left1Lat, image.left2Lat, image.right1Lat, image.right2Lat)
|
||
if (maxLat - minLat > 0 && maxLon - minLon > 0) {
|
||
let rectangle = DT.Cesium.Rectangle.fromDegrees(minLon, minLat, maxLon, maxLat)
|
||
let layer = new DT.Cesium.SingleTileImageryProvider({
|
||
url: window.config.imagePath + image.relativePath,
|
||
rectangle
|
||
})
|
||
let addLayer = this.viewer.cesiumViewer.imageryLayers.addImageryProvider(layer)
|
||
// 设置分屏显示
|
||
addLayer.splitDirection = DT.Cesium.ImagerySplitDirection.LEFT
|
||
obj.picture = addLayer
|
||
if (image.itemList) {
|
||
image.itemList.forEach( (mark, markIndex) => {
|
||
let markId = `${this.jobId}~${this.uavId}~${loader.payloadId}~${image.fileId}~${mark.id}-mark${imageIndex}${markIndex}`
|
||
let markPosition = DT.Cesium.Cartesian3.fromDegrees(mark.left1Lon, mark.left1Lat, 1)
|
||
let markArr = [
|
||
mark.left1Lon, mark.left1Lat, 1,
|
||
mark.left2Lon, mark.left2Lat, 1,
|
||
mark.right2Lon, mark.right2Lat, 1,
|
||
mark.right1Lon, mark.right1Lat, 1,
|
||
mark.left1Lon, mark.left1Lat, 1,
|
||
]
|
||
let markLine = this.viewer.entities.add({
|
||
id: markId,
|
||
show: true,
|
||
position: markPosition,
|
||
label: {
|
||
text: window.detectType[mark.type],
|
||
font: '16px sans-serif',
|
||
fillColor: DT.Cesium.Color.RED,
|
||
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM,
|
||
disableDepthTestDistance: 10000,
|
||
showBackground: false,
|
||
backgroundColor: DT.Cesium.Color.BLACK,
|
||
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
},
|
||
polyline: {
|
||
positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
|
||
// positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
|
||
width: 1,
|
||
material: DT.Cesium.Color.RED,
|
||
depthFailMaterial: DT.Cesium.Color.RED,
|
||
zIndex: 3,
|
||
}
|
||
})
|
||
obj.markArr.push(markLine)
|
||
})
|
||
}
|
||
loaderPicture[loader.payloadId].push(obj)
|
||
}
|
||
|
||
})
|
||
}
|
||
})
|
||
this.loaderPicture = loaderPicture
|
||
}
|
||
appendLoaderPicture(image) {
|
||
// this.removePicture()
|
||
// this.removePictureItem(image.payloadId, image.airlineId)
|
||
if (!this.loaderPicture) {
|
||
this.loaderPicture = {}
|
||
}
|
||
if (!this.loaderPicture[image.payloadId]) {
|
||
this.loaderPicture[image.payloadId] = []
|
||
}
|
||
let obj = {
|
||
picture: null,
|
||
fileId: image.fileId,
|
||
airlineId: image.airlineId,
|
||
markArr: []
|
||
}
|
||
let length = this.loaderPicture[image.payloadId].length
|
||
// obj.picture = this.viewer.entities.add({
|
||
// id: `${this.jobId}~${this.uavId}~${image.payloadId}~${image.fileId}-picture`,
|
||
// name: '背景',
|
||
// polygon: {
|
||
// // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
|
||
// hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
|
||
// perPositionHeight: true,
|
||
// material: new DT.Cesium.ImageMaterialProperty({
|
||
// image: window.config.imagePath + image.relativePath,
|
||
// // image: process.env.BASE_URL + 'static/img/ttt.tif',
|
||
// // image: process.env.BASE_URL + 'static/img/pic.png',
|
||
// }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
|
||
// outline: true,
|
||
// outlineColor: DT.Cesium.Color.WHITE,
|
||
// outlineWidth: 2, //很多电脑当宽度>1时，没用
|
||
// }
|
||
// })
|
||
let minLon = Math.min(image.left1Lon, image.left2Lon, image.right1Lon, image.right2Lon)
|
||
let maxLon = Math.max(image.left1Lon, image.left2Lon, image.right1Lon, image.right2Lon)
|
||
let minLat = Math.min(image.left1Lat, image.left2Lat, image.right1Lat, image.right2Lat)
|
||
let maxLat = Math.max(image.left1Lat, image.left2Lat, image.right1Lat, image.right2Lat)
|
||
if (maxLat - minLat > 0 && maxLon - minLon > 0) {
|
||
let rectangle = DT.Cesium.Rectangle.fromDegrees(minLon, minLat, maxLon, maxLat)
|
||
let layer = new DT.Cesium.SingleTileImageryProvider({
|
||
url: window.config.imagePath + image.relativePath,
|
||
rectangle
|
||
})
|
||
|
||
// console.log('添加的图片', obj.picture)
|
||
if (image.itemList) {
|
||
image.itemList.forEach( (mark, markIndex) => {
|
||
let markId = `${this.jobId}~${this.uavId}~${image.payloadId}~${image.fileId}~${mark.id}-mark${length}${markIndex}`
|
||
let markPosition = DT.Cesium.Cartesian3.fromDegrees(mark.left1Lon, mark.left1Lat, 1)
|
||
let markArr = [
|
||
mark.left1Lon, mark.left1Lat, 1,
|
||
mark.left2Lon, mark.left2Lat, 1,
|
||
mark.right2Lon, mark.right2Lat, 1,
|
||
mark.right1Lon, mark.right1Lat, 1,
|
||
mark.left1Lon, mark.left1Lat, 1,
|
||
]
|
||
let markLine = this.viewer.entities.add({
|
||
id: markId,
|
||
show: true,
|
||
position: markPosition,
|
||
label: {
|
||
text: window.detectType[mark.type],
|
||
font: '16px sans-serif',
|
||
fillColor: DT.Cesium.Color.RED,
|
||
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM,
|
||
disableDepthTestDistance: 10000,
|
||
showBackground: false,
|
||
backgroundColor: DT.Cesium.Color.BLACK,
|
||
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.8),
|
||
distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(0, 10000),
|
||
},
|
||
polyline: {
|
||
positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
|
||
// positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
|
||
width: 1,
|
||
material: DT.Cesium.Color.RED,
|
||
depthFailMaterial: DT.Cesium.Color.RED,
|
||
zIndex: 3,
|
||
}
|
||
})
|
||
obj.markArr.push(markLine)
|
||
})
|
||
}
|
||
console.log('删除旧的')
|
||
layer.readyPromise.then(res => {
|
||
console.log('回调执行')
|
||
let addLayer = this.viewer.cesiumViewer.imageryLayers.addImageryProvider(layer)
|
||
// 设置分屏显示
|
||
addLayer.splitDirection = DT.Cesium.ImagerySplitDirection.LEFT
|
||
obj.picture = addLayer
|
||
setTimeout(() => {
|
||
this.removePictureItem(image.payloadId, image.airlineId)
|
||
this.loaderPicture[image.payloadId].push(obj)
|
||
}, 500)
|
||
|
||
})
|
||
// this.removePictureItem(image.payloadId, image.airlineId)
|
||
// this.loaderPicture[image.payloadId].push(obj)
|
||
console.log('push新的')
|
||
}
|
||
|
||
}
|
||
toggleAllLoaderVisible(visible) {
|
||
for (let key in this.loaderPicture) {
|
||
this.loaderPicture[key].forEach(item => {
|
||
item.picture.show = visible
|
||
item.markArr.forEach(item => {
|
||
item.show = visible
|
||
})
|
||
})
|
||
|
||
}
|
||
}
|
||
toggleLoaderPictureVisible(payloadId,fileId) {
|
||
console.log('切换显隐', payloadId, fileId)
|
||
if (this.loaderPicture[payloadId]) {
|
||
let find = this.loaderPicture[payloadId].find(item => item.fileId + '' === fileId + '')
|
||
console.log('找到图片了吗', find)
|
||
if (find) {
|
||
let status = !find.picture.show
|
||
console.log('显示状态', status)
|
||
find.picture.show = status
|
||
find.markArr.forEach(mark => {
|
||
mark.show = status
|
||
})
|
||
}
|
||
}
|
||
}
|
||
toggleLoaderPictureActive(payloadId,fileId, active, visible = true) {
|
||
if (this.loaderPicture[payloadId]) {
|
||
let find = this.loaderPicture[payloadId].find(item => item.fileId + '' === fileId + '')
|
||
if (find) {
|
||
if (active) {
|
||
find.picture.polygon.outlineColor = DT.Cesium.Color.RED
|
||
find.picture.show = true
|
||
find.markArr.forEach(mark => {
|
||
mark.show = true
|
||
})
|
||
} else {
|
||
find.picture.polygon.outlineColor = DT.Cesium.Color.WHITE
|
||
find.picture.show = visible
|
||
find.markArr.forEach(mark => {
|
||
mark.show = visible
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
addPlanLine(data) {
|
||
if (data.length > 0) {
|
||
data.forEach((item, index) => {
|
||
let height = Math.max(item.endHeight - 1, 1)
|
||
item.positions = [item.startLon, item.startLat, item.startHeight + this.startAltitude, item.endLon, item.endLat, item.endHeight + this.startAltitude]
|
||
let positions = DT.Cesium.Cartesian3.fromDegreesArrayHeights(item.positions)
|
||
let id = `${this.jobId}~${this.uavId}~${item.id}-planLine-${index}`
|
||
let line = this.viewer.entities.add({
|
||
id,
|
||
position: positions[0],
|
||
label: {
|
||
text: `规划航线${index + 1}起点`,
|
||
disableDepthTestDistance: 10000,
|
||
font: '14px sans-serif',
|
||
fillColor: DT.Cesium.Color.RED,
|
||
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
pixelOffset: new DT.Cesium.Cartesian2(10, -15),
|
||
showBackground: true,
|
||
scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.8),
|
||
distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(0, 10000),
|
||
backgroundColor: DT.Cesium.Color.fromCssColorString('rgba(255,255,255,0.6)')
|
||
},
|
||
polyline: {
|
||
show: true,
|
||
positions,
|
||
width: 2,
|
||
zIndex: 0,
|
||
material: DT.Cesium.Color.RED,
|
||
depthFailMaterial: DT.Cesium.Color.RED,
|
||
arcType: DT.Cesium.ArcType.NONE
|
||
}
|
||
})
|
||
this.planLines.set(id, line)
|
||
})
|
||
}
|
||
}
|
||
removePicture() {
|
||
for (let key in this.loaderPicture) {
|
||
this.loaderPicture[key].forEach((item, index) => {
|
||
if (item.picture) {
|
||
// this.viewer.entities.remove(item.picture)
|
||
this.viewer.cesiumViewer.imageryLayers.remove(item.picture)
|
||
}
|
||
item.markArr.forEach(mark => {
|
||
this.viewer.entities.remove(mark)
|
||
})
|
||
})
|
||
}
|
||
this.loaderPicture = {}
|
||
}
|
||
removePictureItem(payloadId, airlineId) {
|
||
if (this.loaderPicture && this.loaderPicture[payloadId]) {
|
||
let findIndex = -1
|
||
this.loaderPicture[payloadId].forEach((item, index) => {
|
||
if (item.airlineId === airlineId) {
|
||
if (item.picture) {
|
||
this.viewer.cesiumViewer.imageryLayers.remove(item.picture)
|
||
item.markArr.forEach(mark => {
|
||
this.viewer.entities.remove(mark)
|
||
})
|
||
}
|
||
findIndex = index
|
||
}
|
||
})
|
||
if (findIndex > -1) {
|
||
this.loaderPicture[payloadId].splice(findIndex, 1)
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
removeAll() {
|
||
if (this.uavEntity) {
|
||
this.viewer.entities.remove(this.uavEntity)
|
||
this.uavEntity = null
|
||
}
|
||
for (let key in this.loaderPicture) {
|
||
this.loaderPicture[key].forEach((item, index) => {
|
||
if (item.picture) {
|
||
// this.viewer.entities.remove(item.picture)
|
||
this.viewer.cesiumViewer.imageryLayers.remove(item.picture)
|
||
}
|
||
item.markArr.forEach(mark => {
|
||
this.viewer.entities.remove(mark)
|
||
})
|
||
})
|
||
}
|
||
this.loaderPicture = null
|
||
this.planLines.values.forEach(item => {
|
||
this.viewer.entities.remove(item)
|
||
})
|
||
this.planLines.removeAll()
|
||
}
|
||
destroy() {
|
||
this.removeAll()
|
||
}
|
||
}
|