skyeyesystem/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/uavTarget.js

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.airlineList)
    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: 8,
        zIndex: 600,
        material: DT.Cesium.Color.BLACK,
        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()
  }
}