tmzn-weihe/src/views/components/layerList/index.vue

<template>
  <div class="layer-list-panel" :class="{ 'fix-layer-list-panel': leftPanelHide }">
    <div class="layer-list-panel-title">
      <div class="title">
        <img src="@/assets/image/common/layerIcon.png" alt="" />
        <span style="margin-left: 0.08rem">资源列表</span>
      </div>
      <div @click="onExpandChange" style="cursor: pointer">
        <img v-show="isExpanded" src="@/assets/image/common/arrow-up.png" style="width: 14px; height: 12px" />
        <img v-show="!isExpanded" src="@/assets/image/common/arrow-up.png" style="transform: rotate(180deg); width: 14px; height: 12px" />
      </div>
    </div>

    <div class="layer-list-panel-content" v-show="isExpanded">
      <el-tree ref="treeRef" :data="treeData" show-checkbox node-key="id" :props="defaultProps" @check="onCheckChange" :default-expanded-keys="['1']">
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <i v-if="data.loading" class="el-icon-loading" style="margin-left: 4px; color: #409eff"></i>
            <i v-if="data.error" class="el-icon-warning" style="margin-left: 4px; color: #f56c6c" :title="data.error"></i>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import * as mars3d from 'mars3d'
let layerCache = {}
export default {
  name: 'LayerListView',
  data() {
    return {
      leftPanelHide: false,
      isExpanded: true,
      defaultProps: { children: 'children', label: 'label' },
      treeData: [
        {
          id: '1',
          label: '综合信息',
          children: [
            {
              id: '1-1',
              label: '生态区',
              children: [
                { id: '1-1-1', label: '提防背河坡脚线', meta: { type: 'polyline', url: '/geojson/提防背河坡脚线.geojson' } },
                { id: '1-1-2', label: '河道管理范围线', meta: { type: 'polyline', url: '/geojson/河道管理范围线.geojson' } },
                { id: '1-1-3', label: '一二级管控区界限', meta: { type: 'polyline', url: '/geojson/一二级管控区界限.geojson' } },
                { id: '1-1-4', label: '生态区界限', meta: { type: 'polyline', url: '/geojson/生态区界限.geojson' } },
                { id: '1-1-5', label: '城市核心区', meta: { type: 'polyline', url: '/geojson/城市核心区.geojson' } },
                { id: '1-1-6', label: '农村区段', meta: { type: 'polyline', url: '/geojson/农村区段.geojson' } },
                { id: '1-1-8', label: '城市核心区（右岸）', meta: { type: 'polyline', url: '/geojson/城市核心区右岸.geojson' } },
                { id: '1-1-9', label: '农村区段（右岸）', meta: { type: 'polyline', url: '/geojson/农村区段右岸.geojson' } }
              ]
            },
            { id: '1-2', label: '监测设备' },
            { id: '1-3', label: '入河排水（污）口' },
            { id: '1-4', label: '河道管理站' }
          ]
        },
        {
          id: '2',
          label: '水文监测',
          children: [
            { id: '2-1', label: '水文监测点1', meta: { type: 'point', url: '/geojson/sw1.geojson' } },
            { id: '2-2', label: '水文监测点2', meta: { type: 'point', url: '/geojson/sw2.geojson' }}
          ]
        },
        {
          id: '3',
          label: '采砂区',
          children: [
            { id: '3-1', label: '兴平市宜空采砂区', meta: { type: 'polygon', url: '/geojson/宜空采砂区.geojson' } },
            { id: '3-2', label: '兴平市团结采砂区', meta: { type: 'polygon', url: '/geojson/团结采砂区.geojson' } },
            { id: '3-3', label: '兴平市汤坊龙兴1区采砂区', meta: { type: 'polygon', url: '/geojson/坊龙兴1区采砂区.geojson' } }
          ]
        },
        {
          id: '4',
          label: '防汛应急预案',
          type: 'plan',
          children: [
            { id: '4-1', type: 'plan', label: '2025年度渭河兴平段水灾害防御工作方案' },
            { id: '4-2', type: 'plan', label: '2025年度渭河水灾害防御工作方案' },
            { id: '4-3', type: 'plan', label: '陕西省防汛应急预案' }
          ]
        }
      ],
      mainMenu: '',
      checkedNodes: []
    }
  },
  created() {
    this.mainMenu = this.$route.params.menu
  },
  mounted() {
    this.$globalEventBus.$on('toggleLeftPanel', (val) => {
      this.leftPanelHide = val
    })
    this.$globalEventBus.$on('closePlanDialog', (data) => {
      this.checkedNodes = []
      const ids = data.map((item) => item.id)
      this.cancelCheckNode(ids)
    })
  },
  watch: {
    mainMenu: {
      handler(val) {
        if (val === 'hydrologicInfo') {
          this.handleData(true)
        } else {
          this.handleData(false)
        }
      }
    }
  },
  methods: {
    //关闭防汛预案弹窗后取消选中
    cancelCheckNode(ids) {
      const currentCheckedKeys = this.$refs.treeRef.getCheckedKeys(true)
      const newArray = currentCheckedKeys.filter((item) => !ids.includes(item))
      this.$refs.treeRef.setCheckedKeys(newArray)
    },
    onExpandChange() {
      this.isExpanded = !this.isExpanded
    },

    async onCheckChange(node, checkData) {
      const { checkedKeys, checkedNodes } = checkData
      const id = node.id
      const isChecked = checkedKeys.includes(id)

      // 维护选中的预案节点
      this.checkedNodes = checkedNodes.filter((item) => item.type === 'plan' && !item.children)

      // ================== 选中 ==================
      if (isChecked) {
        if (node.type === 'plan') {
          this.$globalEventBus.$emit('showPlanDialog', { list: this.checkedNodes })
          return
        }

        if (node.children?.length) {
          // 递归加载所有叶子节点
          await this.loadAllLeafLayers(node.children)
          return
        }

        if (node.meta?.url) {
          if (layerCache[id]) {
            layerCache[id].show = true
          } else {
            await this.loadGeoJsonLayer(node)
          }
        }
      }
      // ================== 取消选中 ==================
      else {
        if (node.type === 'plan') {
          this.$globalEventBus.$emit('showPlanDialog', { list: this.checkedNodes })
          return
        }

        if (node.children?.length) {
          // 递归删除所有叶子节点
          this.removeAllLeafLayers(node.children)
          return
        }

        this.removeLayer(id)
      }
    },

    // 批量加载叶子节点
    async loadAllLeafLayers(children) {
      for (const child of children) {
        if (child.children?.length) {
          await this.loadAllLeafLayers(child.children)
        } else if (child.meta?.url) {
          if (layerCache[child.id]) {
            layerCache[child.id].show = true
          } else {
            await this.loadGeoJsonLayer(child)
          }
        }
      }
    },

    // 批量删除叶子节点
    removeAllLeafLayers(children) {
      for (const child of children) {
        if (child.children?.length) {
          this.removeAllLeafLayers(child.children)
        } else {
          this.removeLayer(child.id)
        }
      }
    },

    // 删除图层的通用方法
    removeLayer(id) {
      if (layerCache[id]) {
        try {
          window.map.removeLayer(layerCache[id])
        } catch (e) {
          console.warn(`removeLayer failed: ${id}`, e)
        }
        delete layerCache[id]
      }
    },

    // 加载GeoJson图层的通用方法
    async loadGeoJsonLayer(node) {
      const id = node.id
      if (layerCache[id]) {
        layerCache[id].show = true
        return
      }
      this.$set(node, 'loading', true)
      this.$set(node, 'error', '')
      try {
        const layer = new mars3d.layer.GeoJsonLayer({
          id,
          name: node.label,
          url: node.meta.url,
          clampToGround: true,
          symbol: this.getStyleByName(node.label),
          flyTo: true
        })
        window.map.addLayer(layer)
        this.bindEvent(layer)
        layerCache[id] = layer

        // 父子关联
        const parent = this.$refs.treeRef.getNode(id).parent
        if (parent?.data?.id) {
          layer.options.parentId = parent.data.id
        }
      } catch (e) {
        this.$set(node, 'error', e.message || '加载失败')
      } finally {
        this.$set(node, 'loading', false)
      }
    },
    getStyleByName(name) {
      if (name === '生态区界限') {
        return { type: 'polyline', styleOptions: { color: '#0c5b0f', width: 2 } }
      } else if (name === '提防背河坡脚线') {
        return { type: 'polyline', styleOptions: { color: '#c53632', width: 2 } }
      } else if (name === '河道管理范围线') {
        return { type: 'polyline', styleOptions: { color: '#12641c', width: 2 } }
      } else if (name === '一二级管控区界限') {
        return {
          type: 'polyline',
          styleOptions: { width: 2, materialType: mars3d.MaterialType.PolylineDash, materialOptions: { color: '#12641c', dashLength: 60 } }
        }
      } else if (name === '城市核心区' || name === '农村区段') {
        return {
          type: 'polygon',
          styleOptions: {
            color: '#194830',
            opacity: 0.6,
            outline: true,
            outlineWidth: 1,
            outlineColor: '#57e0a9'
          }
        }
      } else if (name === '城市核心区（右岸）' || name === '农村区段（右岸）') {
        return {
          type: 'polygon',
          styleOptions: {
            color: '#368d63',
            opacity: 0.3,
            outline: true,
            outlineWidth: 1,
            outlineColor: '#57e0a9'
          }
        }
      } else if (name.indexOf('水文') > -1) {
        return {
          type: 'billboard',
          styleOptions: {
            image: require('./image/水文站.png'),
            scale: 1,
            clampToGround: true,
            horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new this.Cesium.Cartesian2(0, -6), // 偏移量
            distanceDisplayCondition: new this.Cesium.DistanceDisplayCondition(0.0, 500000) // 按视距显示
          }
        }
      } else if (name.indexOf('采砂区') > -1) {
        return {
          type: 'polygon',
          styleOptions: {
            materialType: this.mars3d.MaterialType.Grid,
            materialOptions: {
              color: '#cc9648',
              cellAlpha: 0.5
            },
            outline: true,
            outlineWidth: 1,
            outlineColor: '#cc9648'
          }
        }
      }
    },
    // 处理水文站数据
    handleData(isShow) {
      const nodeIds = ['2-1', '2-2']
      this.$nextTick(() => {
        nodeIds.forEach((id) => {
          const node = this.$refs.treeRef.getNode(id)
          if (!node) return
          // 直接修改 checked 状态
          this.$refs.treeRef.setChecked(node, isShow)
          // 手动触发 check 事件
          this.$refs.treeRef.$emit(
            'check',
            node.data, // 选中的节点数据
            {
              checkedKeys: this.$refs.treeRef.getCheckedKeys(),
              checkedNodes: this.$refs.treeRef.getCheckedNodes()
            }
          )
        })
      })
    },

    // 绑定点击事件
    bindEvent(layer) {
      const _that = this
      if (layer.id === '2-1' || layer.id === '2-2') {
        layer.on(mars3d.EventType.click, function (event) {
          _that.$globalEventBus.$emit('clickWaterStation', event)
        })
      }
    }
  },
  destroyed() {
    this.$globalEventBus.$off('closePlanDialog')
    this.$globalEventBus.$off('toggleLeftPanel')
    // 把图层上绑定的事件也清掉
    Object.values(layerCache).forEach((l) => l.off('click'))
  }
}
</script>

<style lang="scss" scoped>
.layer-list-panel {
  position: absolute;
  top: px-to-rem(80);
  left: px-to-rem(480);
  width: px-to-rem(240);
  padding: px-to-rem(10);
  background: #1b2535;
  border-radius: 6px;
  opacity: 0.85;
  z-index: 1000;
  transition: left 0.3s ease-in-out;
  .layer-list-panel-title {
    margin-bottom: px-to-rem(10);
    height: px-to-rem(30);
    line-height: px-to-rem(30);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: px-to-rem(18);
      color: #eaf3fe;
    }
  }
  .layer-list-panel-content {
    margin: px-to-rem(-10);
    padding: px-to-rem(10);
    max-height: px-to-rem(340);
    overflow: auto;
    :deep(.el-tree) {
      background: transparent;
      color: #fff;
      .el-tree-node__content {
        height: unset;
      }
      .el-tree-node__content:hover,
      .el-upload-list__item:hover,
      .el-tree-node:focus > .el-tree-node__content {
        background-color: transparent;
        height: unset;
      }
      .el-tree-node__label {
        white-space: wrap;
      }
    }
    .custom-tree-node {
      font-size: px-to-rem(16);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.fix-layer-list-panel {
  left: px-to-rem(20);
}
</style>