智慧园区前端大屏
shuishen
2024-11-26 0c7207c97a493dc6faab28a78501eb28563e84c1
突发事件模拟调整
1 files modified
122 ■■■■ changed files
src/views/pd/components/dynamicPanel.vue 122 ●●●● patch | view | raw | blame | history
src/views/pd/components/dynamicPanel.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-09 15:41:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-26 11:02:59
 * @LastEditTime: 2024-11-26 19:08:39
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
@@ -122,33 +122,36 @@
      title: '典型案例3',
      content: '危险化学品运输事故: 北片区某企业的危化品运输车辆发生侧翻,大量盐酸流至路面,如不采取措施,将造成污染事故,影响到赣江下游水质。',
      showModel: true,
      oneCentent: '2024年09月16日14时,北片区某公司的危化品运输车辆发生侧翻,大量盐酸流至路面。',
      onePointPosition: {
        lng: 115.10248629,
        lat: 27.28112873
        lng: 115.10639786,
        lat: 27.28116943
      },
      onetime: 0,
      onetime: 8000,
      twoContent: '调度金龙水库清水,稀释污染团。',
      twoPointPosition: {
        lng: 115.10488545,
        lat: 27.27678110
      },
      twotime: 0,
      twotime: 13000,
      threeContent: '转输至江西粤鹏环保高新技术开发有限公司事故应急池、初期雨水池。',
      threePointPosition: {
        lng: 115.10545135,
        lat: 27.28043872
      },
      threetime: 0,
      threetime: 18000,
      fourContent: '转输至江西腾龙源环保科技有限公司事故应急池、初期雨水池。',
      fourPointPosition: {
        lng: 115.10332118,
        lat: 27.27831698
      },
      fourtime: 0,
      fourtime: 23000,
    },
  ]
})
@@ -157,26 +160,89 @@
const dynamicHtmlLayer = new DC.HtmlLayer('dynamicHtmlLayer').addTo(window.$viewer)
const dynamicLineVectorLayer = new DC.VectorLayer('dynamicLineVectorLayer').addTo(window.$viewer)
let modelPosition = [
  {
    lng: 115.10601196,
    lat: 27.28378838
  },
  {
    lng: 115.10602432,
    lat: 27.28339800
  },
  {
    lng: 115.10600450,
    lat: 27.28319338,
  },
  {
    lng: 115.10605031,
    lat: 27.28294272,
  },
  {
    lng: 115.10610404,
    lat: 27.28267996
  },
  {
    lng: 115.10614202,
    lat: 27.28248175
  },
  {
    lng: 115.10620011,
    lat: 27.28221311
  },
  {
    lng: 115.10640155,
    lat: 27.28121605
  },
]
let positions = modelPosition.map(i => [i.lng, i.lat, 60].join(',')).join(';')
console.log(positions, 1111111)
let tc = new DC.TrackController(window.$viewer)
let track = new DC.Track(positions, 5)
track.setModel(VITE_APP_BASE + 'gltf/111.gltf', {
  scale: 0.005,
  color: DC.Color.RED,
  // nodeTransformations: {
  //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
  // }
})
tc.addTrack(track)
const schemeStart = (item) => {
  emit('closePanel')
  clearAll()
  window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => {
    let oneCenter = DC.Position.fromObject(item.onePointPosition)
    let oneCircle = new DC.Circle(oneCenter, 20)
    oneCircle.setStyle({
      material: new DC.CircleWaveMaterialProperty({
        color: DC.Color.RED.withAlpha(0.9),
        speed: 20,
        count: 5,
        gradient: 0.5
  if (item.showModel) {
    window.$viewer.flyToPosition("115.10587903,27.28374884,400,0,-90", () => {
      tc.play()
      tc.viewTrack(track, {
        mode: '2',
        pitch: -90,
        range: 400
      })
    })
    dynamicVectorLayer.addOverlay(oneCircle)
  }
    let oneCentent = new DC.DivIcon(
      new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 70),
      `<div class="dynamic-map-popup">
  timeOne = setTimeout(() => {
    function oneLoad () {
      let oneCenter = DC.Position.fromObject(item.onePointPosition)
      let oneCircle = new DC.Circle(oneCenter, 20)
      oneCircle.setStyle({
        material: new DC.CircleWaveMaterialProperty({
          color: DC.Color.RED.withAlpha(0.9),
          speed: 20,
          count: 5,
          gradient: 0.5
        })
      })
      dynamicVectorLayer.addOverlay(oneCircle)
      let oneCentent = new DC.DivIcon(
        new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 70),
        `<div class="dynamic-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.oneCentent}</p>
@@ -184,10 +250,18 @@
              </div>
              <div class="arrow"></div>
              </div>`
      // <p>特征污染物:${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(oneCentent)
  }, 3)
        // <p>特征污染物:${item.specificPollutant}</p>
      )
      dynamicHtmlLayer.addOverlay(oneCentent)
    }
    if (item.showModel) {
      oneLoad()
    } else {
      window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => {
        oneLoad()
      }, 3)
    }
  }, item.onetime)
  item.linePosition && (lineTime = setTimeout(() => {
    let polyline = new DC.Polyline(item.linePosition)