fix: 移除监听事件bug

罗广辉

2025-03-30 3dddb1b4c87400c6448677a2ff5e6cd1f9be5ecd

fix: 移除监听事件bug

 src/views/Home/Footer.vue

File was renamed from src/layout/Footer.vue
@@ -29,13 +29,17 @@
  {name:'event5',img:img5,activeImg:activeImg5,active:false,className:'orthophoto'},
])

// 机巢聚合
const {init,removeAll} = useAggregation()

const imgClick = (row) => {
  const find = list.value.find(item => item.active)
  if (find.name === row.name) return
  const isFromEvent1 = find.name === 'event1';
  const isToEvent1 = row.name === 'event1';
  if (isFromEvent1 && !isToEvent1) removeAll();
  else if (!isFromEvent1 && isToEvent1) init();
  list.value = list.value.map(item => ({...item,active: item.name === row.name}));
  row.name === 'event1' ? init() :removeAll()
}

// 销毁前钩子

 src/views/Home/Home.vue

@@ -17,8 +17,8 @@
import SearchBox from '@/views/Home/SearchBox.vue';
import SignMachineNest from '@/views/SignMachineNest/SignMachineNest.vue';
import { useStore } from 'vuex';
import Footer from '@/layout/Footer.vue';
import RSide from '@/layout/RSide.vue';
import Footer from '@/views/Home/Footer.vue';
import RSide from '@/views/Home/RSide.vue';
import { onMounted } from 'vue';
import cesiumOperation from '@/utils/cesium-tsa';
const store = useStore();

 src/views/Home/RSide.vue

File was renamed from src/layout/RSide.vue
@@ -18,12 +18,12 @@
    </el-popover>


    <img class="chat-bottom" src="@/assets/images/chat-bottom.png" alt="">
    <img class="chat-bottom" src="../../assets/images/chat-bottom.png" alt="">
  </div>
  <div class="r-side">
    <img class="positioning" src="@/assets/images/self-positioning.png" alt="" @mouseenter="enterHover(0)" @mouseleave="logIndex=3">
    <img class="measuring-scale" src="@/assets/images/measuring-scale.png" alt="" @mouseenter="enterHover(1)" @mouseleave="logIndex=3">
    <img class="layer" src="@/assets/images/layer.png" alt="" @mouseenter="enterHover(2)" @mouseleave="logIndex=3">
    <img class="positioning" src="../../assets/images/self-positioning.png" alt="" @mouseenter="enterHover(0)" @mouseleave="logIndex=3">
    <img class="measuring-scale" src="../../assets/images/measuring-scale.png" alt="" @mouseenter="enterHover(1)" @mouseleave="logIndex=3">
    <img class="layer" src="../../assets/images/layer.png" alt="" @mouseenter="enterHover(2)" @mouseleave="logIndex=3">
  </div>
  <div v-if="logIndex===0" class="r-side-positioning">切换地图模式</div>
  <div v-if="logIndex===1" class="r-side-measuring">量尺</div>

 src/views/Home/useAggregation.js

@@ -23,9 +23,7 @@
  let positionC3 = null;
  const listenerHeight = () => {
    determineScaling();
    viewer.camera.moveEnd.addEventListener(() => {
      determineScaling();
    });
    viewer.camera.moveEnd.addEventListener(determineScaling);
  };

  // 确定缩放比例
@@ -179,9 +177,11 @@
    }
  };

  // 移除所有监听事件，变量置空
  const removeAll = () => {
    removeEntities();
    removeLabel();
    viewer.camera.moveEnd.removeEventListener(determineScaling);
    handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler?.destroy();
    viewer = null;