Merge branch 'main' of http://139.196.74.78:10010/r/zhyq/bigScreen

shuishen

2024-11-22 8e72ebbb44dba3ec5cf6dd3cd2613e6e9aed31ef

 src/pages/layout/components/scomponents/layersControl.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-31 10:47:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-12 14:20:54
 * @LastEditTime: 2024-11-22 15:37:11
 * @FilePath: \bigScreen\src\pages\layout\components\scomponents\layersControl.vue
 * @Description:
 *
@@ -21,7 +21,8 @@
    <template #content>
      <div class="tree-content">
        <el-tree ref="treeRef" :data="data" draggable="" show-checkbox node-key="id" default-expand-all
          :default-checked-keys="['1']" :props="defaultProps" :indent="treeProps['indent']" @check="handleCheckChange">
          :default-checked-keys="indexPoint" :props="defaultProps" :indent="treeProps['indent']"
          @check="handleCheckChange">
          <template v-slot:default="{ node }">
            <element-tree-line :node="node" :showLabelLine="treeProps['showLabelLine']" :indent="treeProps['indent']">
              <!-- 自定义label的slot -->
@@ -68,11 +69,18 @@
import ysgw from "@/assets/json/ysgw"
import { onUnmounted } from 'vue'
import EventBus from 'utils/bus'
import { usePointStore } from 'store/usepoint'
const pointStore = usePointStore()

const { VITE_APP_BASE } = import.meta.env

let indexPoint = ref(['5', '7', '1'])

const treeRef = ref(null)
const Cesium = DC.getLib('Cesium')

console.log(Cesium, 45646465)

const treeProps = {
  indent: 16,
  showLabelLine: true,
@@ -85,6 +93,7 @@
const closePanoramaPopup = () => {
  panoramaShow.value = false
}
let addPupoLayers = {}

const data = [
  {
@@ -101,6 +110,18 @@
        url: VITE_APP_BASE + 'mx/tile_02/tileset.json',
        label: 'tile_02'
      },
      {
        url: VITE_APP_BASE + 'mx/tile_03/tileset.json',
        label: 'tile_03'
      },
      {
        url: VITE_APP_BASE + 'mx/tile_04/tileset.json',
        label: 'tile_04'
      },
      {
        url: VITE_APP_BASE + 'mx/tile_05/tileset.json',
        label: 'tile_05'
      },
    ],
    layerName: 'hgyq'
  },
@@ -115,6 +136,7 @@
      size: 1000
    },
    backgroundIcon: VITE_APP_BASE + 'img/mapicon/qy.png',
    className: 'qyfb-box',
    showPanel: false,
    layerName: 'qyfb'
  },
@@ -133,7 +155,35 @@
          type: 1,
          size: 1000
        },
        layerName: 'yjc'
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png',
        className: 'yjc-box',
        showPanel: false,
        layerName: 'yjc',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
            <div>${attrParams.fullName}</div>      
            <img src="${attrParams.imageUrl}" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },
      {
        id: '3-2',
@@ -145,20 +195,83 @@
          type: 2,
          size: 1000
        },
        layerName: 'fm'
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png',
        className: 'ysf-box',
        showPanel: false,
        layerName: 'fm',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },

      {
        id: '3-3',
        label: '公共管网',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 3,
          size: 1000
        },
        layerName: 'gggw'
        children: [
          // 给水管网、污水管网、燃气管网、雨水管网
          {
            id: '3-3-1',
            label: '给水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'gsgw',
            source: gsgw,
            color: DC.Color.BLUE,
            height: 65,
          },
          {
            id: '3-3-2',
            label: '污水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'wsgw',
            source: wsgw,
            color: DC.Color.BLACK,
            height: 68,
          },
          {
            id: '3-3-3',
            label: '燃气管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'rqgw',
            source: rqgw,
            color: DC.Color.RED,
            height: 71,
          },
          {
            id: '3-3-4',
            label: '雨水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'ysgw',
            source: ysgw,
            color: DC.Color.CYAN,
            height: 75,
          },
        ]
      },

      {
@@ -171,7 +284,32 @@
          type: 4,
          size: 1000
        },
        layerName: 'wstsbz'
        layerName: 'wstsbz',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },

      {
@@ -184,7 +322,35 @@
          type: 5,
          size: 1000
        },
        layerName: 'sk'
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/sk.png',
        className: 'sk-box',
        showPanel: false,
        layerName: 'sk',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                   <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },

      {
@@ -197,7 +363,35 @@
          type: 6,
          size: 1000
        },
        layerName: 'yjb'
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjb.png',
        className: 'yjb-box',
        showPanel: false,
        layerName: 'yjb',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      },

      {
@@ -210,7 +404,35 @@
          type: 7,
          size: 1000
        },
        layerName: 'xfs'
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/xfs.png',
        className: 'xfs-box',
        showPanel: false,
        layerName: 'xfs',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }
      }
    ]
  },
@@ -218,16 +440,40 @@
  {
    id: '4',
    label: '风险源',
    type: 'layer',
    subType: 'labelPoint',
    method: getRiskList,
    params: {
      size: 1000
    },
    showParams: 'category',
    backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png',
    showPanel: false,
    layerName: 'fxy'
    children: [
      {
        id: '4-1',
        label: '一般',
        type: 'layer',
        subType: 'labelPoint',
        method: getRiskList,
        params: {
          riskLevel: 1,
          size: 1000
        },
        showParams: 'category',
        className: 'fxy-ordinary',
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png',
        showPanel: false,
        layerName: 'fxyOrdinary',
      },
      {
        id: '4-2',
        label: '较大',
        type: 'layer',
        subType: 'labelPoint',
        method: getRiskList,
        params: {
          riskLevel: 2,
          size: 1000
        },
        showParams: 'category',
        className: 'fxy-larger',
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png',
        showPanel: false,
        layerName: 'fxyLarger',
      }
    ]
  },

  {
@@ -237,55 +483,6 @@
    subType: 'geojsonWall',
    layerName: 'yqfw',
    source: yqfw
  },

  {
    id: '6',
    label: '地下管网',
    children: [
      // 给水管网、污水管网、燃气管网、雨水管网
      {
        id: '6-1',
        label: '给水管网',
        type: 'layer',
        subType: 'geojsonPipe',
        layerName: 'gsgw',
        source: gsgw,
        color: DC.Color.BLUE,
        height: 5,
      },
      {
        id: '6-2',
        label: '污水管网',
        type: 'layer',
        subType: 'geojsonPipe',
        layerName: 'wsgw',
        source: wsgw,
        color: DC.Color.BLACK,
        height: 10,
      },
      {
        id: '6-3',
        label: '燃气管网',
        type: 'layer',
        subType: 'geojsonPipe',
        layerName: 'rqgw',
        source: rqgw,
        color: DC.Color.RED,
        height: 15,
      },
      {
        id: '6-4',
        label: '雨水管网',
        type: 'layer',
        subType: 'geojsonPipe',
        layerName: 'ysgw',
        source: ysgw,
        color: DC.Color.CYAN,
        height: 20,
      },

    ]
  },

  {
@@ -303,7 +500,6 @@
    incident: (e) => {
      const { attrParams } = e.overlay
      panoramaTitle.value = attrParams.name

      if (
        attrParams.url.indexOf("http://vr.jxpskj.com:180") != -1
      ) {
@@ -312,7 +508,6 @@
          "/panorama"
        )
      }

      panoramaUrl.value = attrParams.url
      panoramaShow.value = true
    }
@@ -359,9 +554,9 @@
  }
}

let addTileLayers = {}
let tileLayers = new DC.TilesetLayer('tileLayers')
window.$viewer.addLayer(tileLayers)
window.addTileLayers = {}
window.tileLayers = new DC.TilesetLayer('tileLayers')
window.$viewer.addLayer(window.tileLayers)

const handleCheckChange = (data) => {
  let options = treeRef.value?.getCheckedNodes()
@@ -369,27 +564,44 @@
  collectNodesWithFlag(data)

  collectedNodes.value.forEach(item => {
    if (options.some(i => i.id == item.id)) {
    if (options?.some(i => i.id == item.id)) {

      //  const Cesium  = DC
      if (item.subType == '3Dtile') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = item.urlData.map(i => {
            let tile = new DC.Tileset(i.url)
        if (!window.addTileLayers[item.layerName]) {
          // window.addTileLayers[item.layerName] = []
          // let tile = window.$viewer.delegate.scene.primitives.add(new Cesium.Cesium3DTileset({
          //   url: '/zhyq/mx/tile_01/tileset.json',
          // }))

            tileLayers.addOverlay(tile)
          // console.log(tile, new Cesium.Cesium3DTileset({
          //   url: '/zhyq/mx/tile_01/tileset.json',
          // }), 121323)
          // item.urlData.forEach(i => {

          // })



          window.addTileLayers[item.layerName] = item.urlData.map(i => {
            let tile = new DC.Tileset(i.url, {
              maximumMemoryUsage: 1024 * 1024 * 1024,
              maximumScreenSpaceError: 48,
              skipLevels: 5,
              skipLevelOfDetail: true,
              skipScreenSpaceErrorFactor: 128
            })

            window.tileLayers.addOverlay(tile)
            return tile
          })

        } else {
          addTileLayers[item.layerName].forEach(i => i.show = true)
          window.addTileLayers[item.layerName].forEach(i => i.show = true)
        }

        window.$viewer.flyTo(addTileLayers[item.layerName][0])
      } else if (item.subType == 'labelPoint') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.HtmlLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])
        if (!window.addTileLayers[item.layerName]) {
          window.addTileLayers[item.layerName] = new DC.HtmlLayer(item.layerName)
          window.$viewer.addLayer(window.addTileLayers[item.layerName])

          item.method(item.params).then(res => {
            let data = res.data.data.records
@@ -413,30 +625,31 @@
              }

              let divIcon = new DC.DivIcon(
                new DC.Position(i.lng, i.lat, 0),
                `<div class="public-map-popup">
                new DC.Position(i.lng, i.lat, 64),
                `<div class="public-map-popup ${item.className || ''}">
                    ${iconEl}
                  </div>`
              )

              divIcon.attrParams = i

              let incident = () => { }
              let incident = () => {
              }

              if (item.incident) incident = item.incident

              divIcon.on(DC.MouseEventType.CLICK, incident)

              addTileLayers[item.layerName].addOverlay(divIcon)
              window.addTileLayers[item.layerName].addOverlay(divIcon)
            })
          })
        } else {
          addTileLayers[item.layerName].show = true
          window.addTileLayers[item.layerName].show = true
        }
      } else if (item.subType == 'geojsonWall') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])
        if (!window.addTileLayers[item.layerName]) {
          window.addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(window.addTileLayers[item.layerName])

          item.source.features.forEach(i => {
            let wall = new DC.Wall(
@@ -446,22 +659,24 @@
            wall.setStyle({
              material: new DC.WallTrailMaterialProperty({
                color: Cesium.Color.fromBytes(0, 123, 255, 180),
                speed: 10
                speed: 8
              })
            })
            addTileLayers[item.layerName].addOverlay(wall)
            window.addTileLayers[item.layerName].addOverlay(wall)
          })
        } else {
          addTileLayers[item.layerName].show = true
          window.addTileLayers[item.layerName].show = true
        }
        window.$viewer.flyTo(addTileLayers[item.layerName])
        console.log(addTileLayers[item.layerName], "22222222222222222222222222222222")
      } else if (item.subType == 'geojsonPipe') {
        if (!addTileLayers[item.layerName]) {
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])
        if (!window.addTileLayers[item.layerName]) {
          window.addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(window.addTileLayers[item.layerName])

          function computeCircle (radius) {
            var positions = []
            for (var i = 0; i < 1080; i++) {
            for (var i = 0; i < 360; i++) {
              var radians = DC.Math.toRadians(i)
              positions.push({
                x: radius * Math.cos(radians),
@@ -474,28 +689,28 @@
          item.source.features.forEach(i => {
            let polylineVolume = new DC.PolylineVolume(
              i.geometry.coordinates.map(d => [d[0], d[1], item.height].join(',')).join(';'),
              computeCircle(0.3)
              computeCircle(2)
            )

            polylineVolume.setStyle({
              material: item.color
            })
            addTileLayers[item.layerName].addOverlay(polylineVolume)
            window.addTileLayers[item.layerName].addOverlay(polylineVolume)
          })
        } else {
          addTileLayers[item.layerName].show = true
          window.addTileLayers[item.layerName].show = true
        }
      }
    } else {
      if (addTileLayers[item.layerName]) {
      if (window.addTileLayers[item.layerName]) {
        if (item.subType == '3Dtile') {
          addTileLayers[item.layerName].forEach(i => i.show = false)
          window.addTileLayers[item.layerName].forEach(i => i.show = false)
        } else if (item.subType == 'labelPoint') {
          addTileLayers[item.layerName].show = false
          window.addTileLayers[item.layerName].show = false
        } else if (item.subType == 'geojsonWall') {
          addTileLayers[item.layerName].show = false
          window.addTileLayers[item.layerName].show = false
        } else if (item.subType == 'geojsonPipe') {
          addTileLayers[item.layerName].show = false
          window.addTileLayers[item.layerName].show = false
        }
      }
    }
@@ -528,7 +743,7 @@
const restHandleCheckChange = (key) => {
  let checkIds = treeRef.value?.getCheckedKeys()

  if (checkIds.some(i => i == key)) {
  if (checkIds && checkIds.some(i => i == key)) {
    return
  }

@@ -539,11 +754,13 @@
const restHandleDelChange = (key) => {
  let checkIds = treeRef.value?.getCheckedKeys()

  if (!checkIds.some(i => i == key)) {
  console.log(checkIds, key)

  if (checkIds && !checkIds.some(i => i == key)) {
    return
  }

  treeRef.value?.setCheckedKeys(checkIds.filter(i => i != key))
  treeRef.value?.setCheckedKeys(checkIds.filter(i => i.indexOf(key)))
  handleCheckChange([findObjectById(data, key)])
}

@@ -551,15 +768,31 @@
EventBus.on('restHandleDelChange', restHandleDelChange)

onMounted(() => {
  handleCheckChange(data.filter(i => i.id == '1'))
  handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
})

onUnmounted(() => {
  tileLayers && window.$viewer.removeLayer(tileLayers)
  let arr = Object.keys(addTileLayers)
// const sharedData = computed(() => pointStore.sharedData);
// watch(sharedData, (newValue) => {
// });

// 销毁
function destroy () {
  let arr = Object.keys(addPupoLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}

onUnmounted(() => {
  window.tileLayers && window.$viewer.removeLayer(window.tileLayers)
  delete window.tileLayers
  let arr = Object.keys(window.addTileLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addTileLwindow.addTileLayersayers[i] && window.$viewer.removeLayer(window.addTileLayers[i])
  })
  // 弹窗销毁
  destroy()

  EventBus.off('restHandleCheckChange', restHandleCheckChange)
  EventBus.off('restHandleDelChange', restHandleDelChange)