ts/src/views/Mubiao/hooks/mubiao.ts

import { ref, nextTick } from 'vue'
import { Subscriber } from 'cesium-extends'
import { parseWKT } from '@/utils/parseWKT'
import { cesiumTime2Format } from '@/utils/date'
import { difference } from 'lodash'
import { getMubiao, getMubiaoPos, sendCheckedTargetIds } from '@/api/Mubiao'
import { useTree } from '@/utils/tree'
import { useMubiaoPopup } from './mubiaoPopup'
import { useEntity } from '@/hooks/entity'
// import { useEntity } from '@/stores/entity'
// import { storeToRefs } from 'pinia'
interface IMubiaoNode {
  country: string
  targetName: string
  targetType: string
  id: string
  extendInfo: Record<string, any>
}
interface IMubiao {
  dataId: string
  data: IMubiaoNode
  nodeName: string
  children?: IMubiao[]
}

const checkedKeys = ref<Array<string | number>>([])

const data = ref<Record<string, any>[]>([])

const {
  mubiaoMap,
  getMBEntityOpt,
  getEllipsoidEntity,
  getMBEntityOptOther,
  createMBConicSensor,
  mubiaoConicMap,
  mbPayloadShowMap,
} = useEntity()
// const { mubiaoMap } = storeToRefs(entity)
// const mubiaoMap = ref<Map<string, any>>(new Map())

let subscriber: Subscriber | null = null

const { filterTreeNodeByField, getLeafNode } = useTree()

const { popupMap, createPopup } = useMubiaoPopup()
export const useMubiao = () => {
  const addMubiao = async (ids: Array<string | number>) => {
    subscriber = new Subscriber(viewer, {
      pickResult: {
        enable: true,
      },
    })

    postCheckedIds(ids)
    // console.log(subscriber, 'subscriber')
    // const ids = data.map(item => item.id)
    const addIds = difference(ids, [...mubiaoMap.keys()])
    const removeIds = difference([...mubiaoMap.keys()], ids)

    // 删除
    if (removeIds.length > 0) {
      removeIds.forEach(id => {
        removeMubiao(id)
      })
    }
    // 添加
    if (addIds.length > 0) {
      const nodes = filterTreeNodeByField({
        treeData: data.value,
        params: addIds,
        paramName: 'dataId',
      })

      const targetIdList = nodes.map(({ dataId }: IMubiao) => dataId)
      // 获取目标坐标
      const mbPos = await getMubiaoCurPos(targetIdList)

      // console.log('mbPos', mbPos)

      nodes.forEach(async ({ data, dataId: id }: IMubiao) => {
        const { target_time, target_geom } =
          mbPos.find(item => item.target_id === id) ?? {}
        const pos = parseWKT(target_geom).coordinates

        const [ellipsoidEntity,otherOptEntity] = await addMubiaoEntity({
          id,
          position: pos,
          target_time,
          country: data.country,
          targetType: data.targetType,
          extendInfo: data.extendInfo,
        })
if(ellipsoidEntity){
  addEventSub(`${id}_model`, ellipsoidEntity, data)
        mubiaoMap.set(`${id}_model`, ellipsoidEntity)
}
        // console.log(mbEntity, 'mbEntity')
      
        addEventSub(id, otherOptEntity, data)
        mubiaoMap.set(id, otherOptEntity)
      })
    }
  }

  async function postCheckedIds(ids: Array<string | number>) {
    const res = await sendCheckedTargetIds(ids)
  }

  const addMubiaoEntity = async ({
    id,
    position,
    country,
    target_time,
    targetType,
    extendInfo,
  }: Record<string, string | number | number[]>) => {
    // 添加目标实体
    // console.log(window.settings, targetType, '-----')
    // const mbEntityOpt = await getMBEntityOpt({
    //   id,
    //   country,
    //   targetType,
    //   extendInfo,
    // })

    // const mubiaoEntity = viewer.entities.add({
    //   name: id,
    //   position: Cesium.Cartesian3.fromDegrees(
    //     ...(position as number[]),
    //     targetType === '甲' ? 20000 : 0
    //   ),
    //   ...mbEntityOpt,
    // })
    let ellipsoid=null;
    let ellipsoidEntity=null;

    if(extendInfo?.detectingPayload){
      ellipsoid = await getEllipsoidEntity({
        id,
        country,
        targetType,
        extendInfo,
      })
      ellipsoidEntity = viewer.entities.add({
        name: id,
        position: Cesium.Cartesian3.fromDegrees(
          ...(position as number[]),
          targetType === '甲' ? 20000 : 0
        ),
        ...ellipsoid,
      })
    }


    const otherOpt = await getMBEntityOptOther({
      id,
      country,
      targetType,
      extendInfo,
    })
    const otherOptEntity = viewer.entities.add({
      name: id,
      position: Cesium.Cartesian3.fromDegrees(
        ...(position as number[]),
        targetType === '甲' ? 20000 : 0
      ),
      ...otherOpt,
    })
    // const mubiaoEntity = viewer.entities.add({
    //   name: id,
    //   position: Cesium.Cartesian3.fromDegrees(
    //     ...(position as number[]),
    //     targetType === '甲' ? 20000 : 0
    //   ),
    //   ...mbEntityOpt,
    // })
    // console.log( mubiaoEntity.position.getValue(),'===== mubiaoEntity.position.getValue()')
    // console.log( mubiaoEntity.properties.zhName.getValue(),'===== mubiaoEntity.position.getValue()')
    // console.log( mubiaoEntity.model.show.getValue(),'===== mubiaoEntity.model.show.getValue())')


    // const zhNameEntity = viewer.entities.add({
    //   position: new Cesium.CallbackProperty(() => mubiaoEntity.position.getValue(), false),
    //   label: {
    //     text: new Cesium.CallbackProperty(() => 
    //       mubiaoEntity.properties.zhName.getValue(), false
    //     ),
    //     show: new Cesium.CallbackProperty(() => 
    //       mubiaoEntity.model.show.getValue(), false // 与模型显示状态同步
    //     ),
    //     font: '12pt 黑体',
    //     fillColor: Cesium.Color.WHITE,
    //     outlineColor: Cesium.Color.BLACK,
    //     pixelOffset: new Cesium.Cartesian2(40, -40), // 在模型右上方
    //     scaleByDistance: new Cesium.NearFarScalar(7000000, 1.0, 18000000, 0.4)
    //   }
    // });
    if (extendInfo?.detectingPayload?.angle) {
      const conic = createMBConicSensor({
        entity: otherOptEntity,
        radius: extendInfo?.detectingPayload?.radius,

        angle: extendInfo?.detectingPayload?.angle,
        heading: extendInfo?.detectingPayload?.heading,
        pitch: extendInfo?.detectingPayload?.pitch,
        show: mbPayloadShowMap.get(id).detectingPayload.show,
      })
      mubiaoConicMap.set(id, conic)
    }
    return [ellipsoidEntity,otherOptEntity]
  }

  const addEventSub = (
    id: string | number,
    entity: Cesium.Entity,
    mbData: Record<string, any>
  ) => {
    subscriber &&
      subscriber.add(
        entity,
        (movement, entity) => {
          // console.log(movement, 'movement')
          // console.log(entity, 'entity')

          createPopup(id, entity, mbData)
        },
        'LEFT_CLICK'
      )
    // console.log(subscriber, '-------')
  }

  const removeMubiao = (id: string | number) => {
    if (mubiaoMap.has(id)) {
      subscriber && subscriber.remove(mubiaoMap.get(id), 'LEFT_CLICK')

      viewer.entities.remove(mubiaoMap.get(id))
      mubiaoMap.delete(id)
    }
    if (popupMap.has(id)) {
      popupMap.get(id).windowClose()
      popupMap.delete(id)
    }
    if (mubiaoConicMap.has(id)) {
      viewer.entities.remove(mubiaoConicMap.get(id))
      mubiaoConicMap.delete(id)
    }
  }

  const updateMubiaoPos = async (
    mbs: Array<Record<string, string | number>>
  ) => {
    // const existsIds = [...mubiaoMap.keys()]
    if (mbs.length === 0) {
      return
    }
    mbs.forEach(
      ({
        target_id: id,
        target_lon: lon,
        target_lat: lat,
        target_direction,
      }) => {
        if (mubiaoMap.has(id)) {
          const entity = mubiaoMap.get(id)
          const position = Cesium.Cartesian3.fromDegrees(lon, lat)
          entity.position = position
          // console.log(target_direction)
          entity.billboard.rotation = Cesium.Math.toRadians(
            360 - target_direction + 90
          )
          entity.orientation = getOrientation({
            position,
            heading: target_direction as number,
          })
        }
      }
    )
  }

  const getOrientation = ({
    position,
    heading,
    pitch = 0,
    roll = 0,
  }: Record<string, number>) => {
    //模型朝向
    const h = Cesium.Math.toRadians(heading - 90)
    const p = Cesium.Math.toRadians(pitch)
    const r = Cesium.Math.toRadians(roll)
    const hpr = new Cesium.HeadingPitchRoll(h, p, r)
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      hpr
    )
    return orientation
  }

  return {
    data,
    checkedKeys,
    getMubiaoData,
    addMubiao,
    updateMubiaoPos,
  }
}

async function getMubiaoCurPos(ids: Array<string | number>) {
  const time = cesiumTime2Format(viewer.clock.currentTime)
  // 获取当前目标位置
  const { code, data } = await getMubiaoPos({ ids, current: time })
  if (code === '200') {
    return data
  } else {
    return []
  }
}

async function getMubiaoData() {
  const checked = JSON.parse(JSON.stringify(checkedKeys.value))
  // console.log(checked)
  const { code, data: resData } = await getMubiao()
  if (code === '200') {
    data.value = [resData]
    checkedKeys.value = []
    getAllNodesToPayload()
    nextTick(() => {
      checkedKeys.value = checked
    })
  }
}

function getAllNodesToPayload() {
  const mbList = getLeafNode(data.value[0])
  mbList.forEach(node => {
    const { dataId, data: nodeData } = node
    const { extendInfo } = nodeData
    const detectingShow =
      mbPayloadShowMap.get(dataId)?.detectingPayload?.show || false;
    if (extendInfo) {
      mbPayloadShowMap.set(dataId, {
        data: toRaw(nodeData),
        detectingPayload: { ...extendInfo, show: detectingShow },
      })
    }
  })
  console.log('mbPayloadShowMap', mbPayloadShowMap)
}