ISMS-Visualization-BJGD-TKT/src/views/basePage/mixins/LoadLayer/fire.js

import { Entity, NearFarScalar, PolylineDashMaterialProperty, DistanceDisplayCondition, Cartesian3, Color, PropertyBag } from "cesium";
import { getTagList } from "@/API/fire";
import { flyToByViewer, addNewDatasource, flyToPerspective } from "@/utils/mapUtil";
import { _locate } from '@/utils'
import { getViewer } from "@/store/map/mapService";
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      fireTagsData: [],
      fireAlarmIds: [],
      cloneFireTagsData: [],
    };
  },
  computed: {
    ...mapGetters(['buildId', 'buildInfo', 'mapMode', 'switchConfig']),
    fireTagsShow() {
      if (this.mapMode.value === '3d') {
        return this.switchConfig.find(e => e?.type && e.type === 'fire')?.show
      } else {
        return false
      }
    },
  },
  watch: {
    buildId: {
      handler(val) {
        if (!val) return
        setTimeout(() => {
          // console.log('火灾图层建筑变化', val)
          this.getFireTagsData()
          // this.animationFire({})
        }, 1000)
      },
      immediate: true,
    },
  },
  mounted() {
    setTimeout(() => {
      this.initFire()
    }, 1000)
  },
  methods: {
    initFire() {
      this.$store.dispatch("globalConfig/pushSwitchConfig", {
        type: "fire",
        label: "火灾监测",
        name: "火灾监测",
        show: false,
        selected: false,
        elements: this.fireTagsData,
      });
    },
    async getFireTagsData() {
      try {
        let p = { buildId: this.buildInfo.positioningBuildId }
        // console.log('火灾数据获取参数：', p)
        let res = await getTagList(p);
        this.fireTagsData = res.data.content || [];
        // console.log("火灾信息", this.fireTagsData);
        this.$store.dispatch("globalConfig/updateSwitchConfig", {
          type: "fire",
          label: "火灾监测",
          name: "火灾监测",
          show: this.fireTagsShow,
          selected: false,
          elements: this.fireTagsData,
        });
        this.addFireTags();
      } catch (err) {
        console.log(err);
      }
    },
    addFireTags() {
      let dataSource = addNewDatasource("layer_fire");
      this.fireTagsData.forEach((data, index) => {
        const gpsPoint = this.transPosition([{ x: data.location.x, y: data.location.y, z: data.height }])
        dataSource.entities.add(
          new Entity({
            id: data.id,
            position: Cartesian3.fromDegrees(...gpsPoint[0]),
            show: this.fireTagsShow,
            billboard: {
              image: BASE_URL + data.iconPath,
              scale: 0.5, //固定值
              scaleByDistance: new NearFarScalar(10, 1, 10000, 1),
            },
            polyline: {
              positions: Cartesian3.fromDegreesArrayHeights([
                gpsPoint[0][0],
                gpsPoint[0][1],
                gpsPoint[0][2],
                gpsPoint[0][0],
                gpsPoint[0][1],
                0,
              ]),
              width: 2,
              material: new PolylineDashMaterialProperty({
                color: Color.CYAN,
              }),
            },
            properties: new PropertyBag({
              type: "layer_fire",
              details: data,
            }),
          })
        );
      });
    },
    async pushFireStatus(data) {
      if (data.id) {
        this.fireAlarmIds = [data.id]
      } else {
        data.id = this.fireAlarmIds.length ? this.fireAlarmIds[0] : ''
      }
      if (data.alarmType > 0) {
        // console.log('火灾报警数据：', data)
        //模型判断与切换
        if (data?.buildId === this.buildInfo?.positioningBuildId) {
          // console.log("聚焦报警");
          this.animationFire(data)
        } else {
          const curStation = GY_STATIONS.find(e => e.positioningBuildId === data.buildId)
          // console.log('报警站点信息：', curStation)
          if (!curStation) return
          this.$store.dispatch('globalConfig/setMapMode', {
            value: '3d',
          })
          await this.$store.dispatch('model/setBuildInfoByBuildId', curStation.buildId)
          setTimeout(() => {
            this.animationFire(data)
          }, 3000)
        }
      } else {
        this.animationFire(data)
      }
    },
    animationFire(data) {
      const viewer = getViewer()
      const dataSource = viewer.dataSources.getByName('layer_fire')
      if (dataSource.length > 0) {
        let item = dataSource[0].entities.getById(data.id)
        // console.log(item, "地图实体数据", item.properties.details._value, '接收参数', data);
        if (!!item) {
          const { longitude, latitude } = this.buildInfo.gpsCoordinate0
          const gpsAlarmPoint = _locate(item.properties.details._value.location.x, item.properties.details._value.location.y, { x: longitude, y: latitude })
          if (data.alarmType > 0 && data.alarmType !== 4) {
            //报警声音
            this.$store.dispatch("globalConfig/setAlarmAudio", {
              show: true,
              alarmType: data.alarmType,
              data: data
            });
            //报警光效
            this.$store.dispatch("globalConfig/setAnimationEnable", {
              show: true,
              dialogMsg: {
                level: data.alarmType,
              },
              type: "All",
            });
            //报警点标记
            if (data.alarmPoint) {
              //地图元素
              item.show = true
              setTimeout(() => {
                item.billboard = {
                  image: BASE_URL + item.properties.details._value.alarmIconPath,
                  width: 50,
                  height: 50,
                  // verticalOrigin: VerticalOrigin.BOTTOM,
                  distanceDisplayCondition: new DistanceDisplayCondition(0, 700.0),
                }
                item.position = Cartesian3.fromDegrees(gpsAlarmPoint.x, gpsAlarmPoint.y, item.properties.details._value.height)
                //视角漂移
                // flyToByViewer(item)
                flyToPerspective({
                  destination: Cartesian3.fromDegrees(gpsAlarmPoint.x + 0.00026, gpsAlarmPoint.y - 0.0011, 100),
                  orientation: {
                    pitch: -0.549380381243696,
                    heading: 6.181746598877237,
                    roll: 0.0000025332551629730915, //倾斜视角坐标需要加偏移量
                  },
                  duration: 1.5,
                })
                //增加属性
                item.properties.details._value.alarmId = data.alarmId
                item.properties.details._value.alarmPoint = data.alarmPoint
                item.properties.details._value.alarmType = data.alarmType
                item.properties.details._value.camera = data.camera
                item.properties.details._value.alarmState = 1
                item.properties.details._value.alarmStatus = true
                item.properties.details._value.alarmPosition = [gpsAlarmPoint.x, gpsAlarmPoint.y, item.properties.details._value.height]
                // console.log(item.properties.details._value, "66666666666666666666666666666");
                //数据
                this.$store.dispatch('globalConfig/updateAlarmDataObj', {
                  fire: [item.properties.details._value],
                })
                //视频弹窗
                if (!!data?.camera?.id) {
                  this.$store.dispatch('dialog/openVideoDialog', data.camera.id)
                }
              }, 1000)
            } else {
              item.show = true
              setTimeout(() => {
                item.billboard = {
                  image: BASE_URL + item.properties.details._value.iconPath,
                  width: 50,
                  height: 50,
                  distanceDisplayCondition: new DistanceDisplayCondition(0, 700.0),
                }
                item.position = Cartesian3.fromDegrees(gpsAlarmPoint.x, gpsAlarmPoint.y, item.properties.details._value.height)
              }, 200)
            }
          } else {
            //报警声音
            this.$store.dispatch("globalConfig/setAlarmAudio", {
              show: false,
              alarmType: data.alarmType,
            });
            //报警光效
            this.$store.dispatch("globalConfig/setAnimationEnable", {
              show: false,
              dialogMsg: {
                level: data.alarmType,
              },
              type: "All",
            });
            item.show = true
            setTimeout(() => {
              item.billboard = {
                image: BASE_URL + item.properties.details._value.iconPath,
                width: 50,
                height: 50,
                distanceDisplayCondition: new DistanceDisplayCondition(0, 700.0),
              }
              item.position = Cartesian3.fromDegrees(gpsAlarmPoint.x, gpsAlarmPoint.y, item.properties.details._value.height)
            }, 200)

            //增加属性
            item.properties.details._value.alarmId = 0
            item.properties.details._value.alarmPoint = data.alarmPoint
            item.properties.details._value.alarmType = data.alarmType
            item.properties.details._value.camera = data.camera
            item.properties.details._value.alarmState = 0
            item.properties.details._value.alarmStatus = false
            item.properties.details._value.alarmPosition = [gpsAlarmPoint.x, gpsAlarmPoint.y, item.properties.details._value.height]
            this.$store.dispatch('globalConfig/updateAlarmDataObj', {
              fire: [item.properties.details._value],
            })
            // console.log('火灾信息测试', gpsAlarmPoint, item.properties.details._value, this.fireTagsData);
          }
        }
      }
    },
    transPosition(pointList = []) {
      const { longitude, latitude } = this.buildInfo.gpsCoordinate0
      return pointList.reduce((pre, cur) => {
        const { x, y } = _locate(cur.x, cur.y, { x: longitude, y: latitude })
        pre.push([x, y, +cur.z])
        return pre
      }, [])
    },
  },
};