智慧园区前端大屏
linwe
2024-11-13 b8440d9a6b1671cdf0c8f06cdaba2f80a8dac1e6
src/pages/layout/components/scomponents/layersControl.vue
@@ -2,26 +2,27 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-31 10:47:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-11 18:27:15
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue
 * @LastEditTime: 2024-11-12 18:15:54
 * @FilePath: \bigScreen\src\pages\layout\components\scomponents\layersControl.vue
 * @Description:
 *
 * Copyright (c) 2024 by shuishen, All Rights Reserved.
-->
<template>
  <public-box>
  <public-box v-show="showLayerControl">
    <template #name>
      <div class="name"><i class="fa fa-tasks"></i>&nbsp;图层</div>
    </template>
    <template #close>
      <div class="close" @click="$emit('close', 'layers')"><i class="fa fa-close"></i></div>
      <div class="close cursor-p" @click="$emit('close', 'layers')"><i class="fa fa-close"></i></div>
    </template>
    <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 -->
@@ -43,12 +44,24 @@
      </div>
    </template>
  </public-box>
  <panorama v-show="panoramaShow" :title="panoramaTitle" :url="panoramaUrl" @closePanoramaPopup="closePanoramaPopup">
  </panorama>
</template>
<script setup>
const {
  show: showLayerControl
} = defineProps({
  show: {
    default: false
  }
})
import panorama from './popup/panorama.vue'
import { getPage } from '@/api/indParkInfo'
import { getList } from "@/api/space/space"
import { getList as getRiskList } from "@/api/riskSource/riskSource"
import { getPanoramaList } from "@/api/panorama/"
import yqfw from "@/assets/json/yqfw"
import gsgw from "@/assets/json/gsgw"
import rqgw from "@/assets/json/rqgw"
@@ -56,14 +69,26 @@
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(['1'])
const treeRef = ref(null)
const Cesium = DC.getLib('Cesium')
const treeProps = {
  indent: 16,
  showLabelLine: true,
}
// 全景相关
const panoramaShow = ref(false)
const panoramaTitle = ref('')
const panoramaUrl = ref('')
const closePanoramaPopup = () => {
  panoramaShow.value = false
}
const data = [
@@ -267,6 +292,36 @@
    ]
  },
  {
    id: '7',
    label: '地图全景点位分布',
    type: 'layer',
    subType: 'labelPoint',
    method: getPanoramaList,
    params: {
      size: 1000
    },
    backgroundIcon: VITE_APP_BASE + 'img/mapicon/qj.png',
    showPanel: false,
    layerName: 'dtqjdwfb',
    incident: (e) => {
      const { attrParams } = e.overlay
      panoramaTitle.value = attrParams.name
      if (
        attrParams.url.indexOf("http://vr.jxpskj.com:180") != -1
      ) {
        attrParams.url = attrParams.url.replace(
          "http://vr.jxpskj.com:180",
          "/panorama"
        )
      }
      panoramaUrl.value = attrParams.url
      panoramaShow.value = true
    }
  },
]
const defaultProps = {
@@ -315,8 +370,6 @@
const handleCheckChange = (data) => {
  let options = treeRef.value?.getCheckedNodes()
  console.log(options, 12111212)
  collectedNodes.value = []
  collectNodesWithFlag(data)
@@ -336,11 +389,10 @@
        } else {
          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(addTileLayers[item.layerName])
          addTileLayers[item.layerName] = new DC.HtmlLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])
          item.method(item.params).then(res => {
@@ -370,6 +422,14 @@
                    ${iconEl}
                  </div>`
              )
              divIcon.attrParams = i
              let incident = () => { }
              if (item.incident) incident = item.incident
              divIcon.on(DC.MouseEventType.CLICK, incident)
              addTileLayers[item.layerName].addOverlay(divIcon)
            })
@@ -446,7 +506,7 @@
  })
}
function findObjectById (data, id) {
function findObjectById(data, id) {
  // 遍历数据数组
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
@@ -495,9 +555,15 @@
EventBus.on('restHandleDelChange', restHandleDelChange)
onMounted(() => {
  handleCheckChange(data.filter(i => i.id == '1'))
  handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
})
// const sharedData = computed(() => pointStore.sharedData);
// watch(sharedData, (newValue) => {
// });
onUnmounted(() => {
  tileLayers && window.$viewer.removeLayer(tileLayers)
  let arr = Object.keys(addTileLayers)