工具

linwe

2024-11-19 626086d6f2106df7ff161ea66fe5a8d8a6863319

 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-18 17:07:09
 * @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,8 +69,12 @@
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')
@@ -115,6 +120,7 @@
      size: 1000
    },
    backgroundIcon: VITE_APP_BASE + 'img/mapicon/qy.png',
    className: 'qyfb-box',
    showPanel: false,
    layerName: 'qyfb'
  },
@@ -133,6 +139,9 @@
          type: 1,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png',
        className: 'yjc-box',
        showPanel: false,
        layerName: 'yjc'
      },
      {
@@ -145,20 +154,58 @@
          type: 2,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png',
        className: 'ysf-box',
        showPanel: false,
        layerName: 'fm'
      },

      {
        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: 5,
          },
          {
            id: '3-3-2',
            label: '污水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'wsgw',
            source: wsgw,
            color: DC.Color.BLACK,
            height: 10,
          },
          {
            id: '3-3-3',
            label: '燃气管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'rqgw',
            source: rqgw,
            color: DC.Color.RED,
            height: 15,
          },
          {
            id: '3-3-4',
            label: '雨水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'ysgw',
            source: ysgw,
            color: DC.Color.CYAN,
            height: 20,
          },
        ]
      },

      {
@@ -184,6 +231,9 @@
          type: 5,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/sk.png',
        className: 'sk-box',
        showPanel: false,
        layerName: 'sk'
      },

@@ -197,6 +247,9 @@
          type: 6,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjb.png',
        className: 'yjb-box',
        showPanel: false,
        layerName: 'yjb'
      },

@@ -210,6 +263,9 @@
          type: 7,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/xfs.png',
        className: 'xfs-box',
        showPanel: false,
        layerName: 'xfs'
      }
    ]
@@ -225,6 +281,7 @@
      size: 1000
    },
    showParams: 'category',
    className: 'fxy-box',
    backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png',
    showPanel: false,
    layerName: 'fxy'
@@ -237,55 +294,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,
      },

    ]
  },

  {
@@ -369,7 +377,7 @@
  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') {
@@ -384,7 +392,6 @@
        } 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]) {
@@ -413,8 +420,8 @@
              }

              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>`
              )
@@ -459,9 +466,9 @@
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])

          function computeCircle (radius) {
          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),
@@ -502,7 +509,7 @@
  })
}

function findObjectById (data, id) {
function findObjectById(data, id) {
  // 遍历数据数组
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
@@ -528,7 +535,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 +546,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,9 +560,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)