地图销毁相关处理

shuishen

2024-11-27 00468a057ca642bc535dfdf80c7c1c7716eea4f0

 src/views/companyInfo/components/box/unitContent.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-27 16:14:10
 * @LastEditTime: 2024-11-27 19:15:59
 * @FilePath: \bigScreen\src\views\companyInfo\components\box\unitContent.vue
 * @Description:
 *
@@ -17,113 +17,113 @@
import { getList } from "@/api/space/space"
const { VITE_APP_BASE } = import.meta.env
let image = ref(
    [{ label: '阀', value: VITE_APP_BASE + 'img/mapicon/ysf.png' }
        , { label: '池', value: VITE_APP_BASE + 'img/mapicon/yjc.png' }
        , { label: '泵', value: VITE_APP_BASE + 'img/mapicon/yjb.png' }]
  [{ label: '阀', value: VITE_APP_BASE + 'img/mapicon/ysf.png' }
    , { label: '池', value: VITE_APP_BASE + 'img/mapicon/yjc.png' }
    , { label: '泵', value: VITE_APP_BASE + 'img/mapicon/yjb.png' }]
)

const resData = reactive({
    data: []
  data: []
})
const curSelect = ref('')

let addTileLayers = {}
let addPupoLayers = {}
onMounted(() => {
    handleCheckChange()
  handleCheckChange()
})
const handleCheckChange = () => {
    let companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
    // resData.data.forEach(item => {
    // if (row.value == item.value) {
    if (!addTileLayers[companyInfo.name]) {
        addTileLayers[companyInfo.name] = new DC.HtmlLayer(companyInfo.name)
        window.$viewer.addLayer(addTileLayers[companyInfo.name])
        getList({
            firmId: companyInfo.id,
            size: 1000,
            // type: item.type,
        }).then(res => {
            let data = res.data.data.records
            data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
                let img = image.value.filter(l => i.name.includes(l.label))
                img = img.length > 0 ? img : image.value
                let iconEl = `<div class="map-name">${i.name}</div>
  let companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
  // resData.data.forEach(item => {
  // if (row.value == item.value) {
  if (!addTileLayers[companyInfo.name]) {
    addTileLayers[companyInfo.name] = new DC.HtmlLayer(companyInfo.name)
    window.$viewer.addLayer(addTileLayers[companyInfo.name])
    getList({
      firmId: companyInfo.id,
      size: 1000,
      // type: item.type,
    }).then(res => {
      let data = res.data.data.records
      data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
        let img = image.value.filter(l => i.name.includes(l.label))
        img = img.length > 0 ? img : image.value
        let iconEl = `<div class="map-name">${i.name}</div>
                            <div class="map-icon"> <img src="${img[0].value}"> </div>`
                let divIcon = new DC.DivIcon(
                    new DC.Position(i.lng, i.lat, 64),
                    `<div class="public-map-popup  ${'yjc-box'}"> ${iconEl}  </div>`
                )
                divIcon.attrParams = i
                let 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">
        let divIcon = new DC.DivIcon(
          new DC.Position(i.lng, i.lat, 64),
          `<div class="public-map-popup  ${'yjc-box'}"> ${iconEl}  </div>`
        )
        divIcon.attrParams = i
        let 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">
          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)
                }
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }

                // if (item.incident) incident = item.incident
        // if (item.incident) incident = item.incident

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

                addTileLayers[companyInfo.name].addOverlay(divIcon)
            })
        })
    } else {
        addTileLayers[companyInfo.name].show = true
    }
    // } else {
    //     if (addTileLayers[item.label]) {
    //         addTileLayers[item.label].show = false
    //     }
    // }
    // })
        addTileLayers[companyInfo.name].addOverlay(divIcon)
      })
    })
  } else {
    addTileLayers[companyInfo.name].show = true
  }
  // } else {
  //     if (addTileLayers[item.label]) {
  //         addTileLayers[item.label].show = false
  //     }
  // }
  // })
}
// 销毁
function destroy() {
    let arr = Object.keys(addPupoLayers)
    arr.filter(i => i != 'hgyq').forEach(i => {
        addPupoLayers[i] && window.$viewer.removeLayer(addPupoLayers[i])
    })
    addPupoLayers = {}
function destroy () {
  let arr = Object.keys(addPupoLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
  })
  addPupoLayers = {}
}
nextTick(() => {
    EventBus.emit('restHandleCheckChange', `3-3-2`)
    EventBus.emit('restHandleCheckChange', `3-3-4`)
  EventBus.emit('restHandleCheckChange', `3-3-2`)
  EventBus.emit('restHandleCheckChange', `3-3-4`)
})
onUnmounted(() => {
    let arr = Object.keys(addTileLayers)
    arr.forEach(i => {
        addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    })
    destroy()
    EventBus.emit('restHandleDelChange', `3-3-2`)
    EventBus.emit('restHandleDelChange', `3-3-4`)
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
  })
  destroy()
  EventBus.emit('restHandleDelChange', `3-3-2`)
  EventBus.emit('restHandleDelChange', `3-3-4`)
})
</script>

<template>
    <div class="left-container cur-container">
        <!-- <div class="tablist h100">
  <div class="left-container cur-container">
    <!-- <div class="tablist h100">
            <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index"
                @click="tabClick(item)">
                <div class="nowrap-ellipsis-hidden">
@@ -131,34 +131,34 @@
                </div>
            </div>
        </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cur-container {
    background: transparent;
    pointer-events: none;
  background: transparent;
  pointer-events: none;

    .tablist {
        pointer-events: all;
  .tablist {
    pointer-events: all;

        &>div {
            margin-top: 16px;
            padding: 10px;
            width: 64px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            border-radius: 50%;
            box-shadow: inset 0 0 40px #409eff;
            color: #fff;
            box-sizing: content-box;
    &>div {
      margin-top: 16px;
      padding: 10px;
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      border-radius: 50%;
      box-shadow: inset 0 0 40px #409eff;
      color: #fff;
      box-sizing: content-box;

            &.on {
                position: relative;
                color: #75b1ff;
            }
        }
      &.on {
        position: relative;
        color: #75b1ff;
      }
    }
  }
}
</style>