feat:地图全景预览

张含笑

2025-06-14 5c3b1e27195cadbd5757f6bfc496207e6ac3350d

feat:地图全景预览

 src/hooks/components/EventPopUpBox.vue

@@ -9,15 +9,15 @@
    </div>
    <div class="content">
      <div class="medium">
        <!-- <img
        <img
          class="quanjing"
          @click="clickpanorama(infoList)"
          v-if="infoList?.resultType === 5"
          :src="infoList?.link"
          alt=""
        /> -->
        />
        <el-image
         
          v-else
          class="eventImage"
          :src="getSmallImg(infoList?.link)"
          :preview-src-list="[getSmallImg(infoList?.link)]"
@@ -42,16 +42,10 @@
        </div>
      </div>
    </div>

  </div>
       <!-- 全景预览 -->
    <!-- <PanoramaPopup
    class="quanjing"
      v-model:panoramaParamsShow="panoramaParamsShow"
      v-model:panoramaParamsUrl="panoramaParamsUrl"
    ></PanoramaPopup> -->
</template>
<script setup>
import EventBus from '@/utils/eventBus';
import { ElImage, ElIcon } from 'element-plus';
import { Close, Warning } from '@element-plus/icons-vue';
import _ from 'lodash';
@@ -59,6 +53,7 @@
const props = defineProps(['data', 'removeLabel', 'detailClick']);
const loading = ref(true);
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景
const emit = defineEmits(['update:panoramaParamsShow', 'update:panoramaParamsUrl']);
const info = ref({
  event_name: '',
  status: 1,
@@ -68,11 +63,18 @@
  create_time: '04/01 12:41',
});
const infoList = props.data;
const panoramaParamsShow = ref(false);
const panoramaParamsUrl = ref(null);

const clickpanorama = val => {
  panoramaParamsShow.value = true;
  panoramaParamsUrl.value = val.link;
  // 通过事件总线发送全景参数
  EventBus.emit('open-panorama', {
    show: true,
    url: val.link,
  });
  // 保留原有事件触发，确保兼容性
  emit('update:panoramaParamsShow', true);
  emit('update:panoramaParamsUrl', val.link);

  console.log('2222');
};
onMounted(async () => {});
</script>

 src/views/dataCenter/components/dataCenterMap.vue

@@ -3,17 +3,13 @@
    <div class="mapBox">
      <div v-if="isShow" id="dataCenterMap" class="ztzf-cesium"></div>
    </div>
        <!-- 全景360 -->
        <PanoramaPopup
            v-if="props.dotData.resultType === 5"
            v-model:panoramaParamsShow="panoramaParamsShow"
            v-model:panoramaParamsUrl="panoramaParamsUrl"
        />
 
  </el-dialog>
</template>

<script setup>
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'
import EventBus from '@/utils/eventBus';
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue';
import { getMapInfoAPI } from '@/api/dataCenter/dataCenter';
import { useStore } from 'vuex';
import { PublicCesium } from '@/utils/cesium/publicCesium';
@@ -21,17 +17,15 @@
import * as Cesium from 'cesium';
import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue';
import { render, nextTick, watch, onMounted, onBeforeUnmount, shallowRef, ref, h } from 'vue';
import panoramaPoint from '@/assets/images/panorama/panorama-point.png' //全景图标
import panoramaPoint from '@/assets/images/panorama/panorama-point.png'; //全景图标
import defaultIcon from '@/assets/images/dataCenter/datamap/eventCompleted.png'; //默认图标
import activeIcon from '@/assets/images/dataCenter/datamap/activeevent.png'; // 激活图标
import { getEventActiveImage, getEventImage } from '@/utils/stateToImageMap/event' //点
import { getEventActiveImage, getEventImage } from '@/utils/stateToImageMap/event'; //点
const emit = defineEmits(['lookDetail']);
const isShow = defineModel('show');
const viewerRef = shallowRef(null);
let viewer = null;
// 全景
const panoramaParamsShow = ref(false)
const panoramaParamsUrl = ref(null)

const store = useStore();
const currentAreaPosition = ref({ height: 1987280, latitude: 27.636112, longitude: 115.732975 });
let handler = null;
@@ -97,12 +91,11 @@
// 恢复所有点的默认图标
const restoreAllIcons = () => {
  dataPointEntities.value.forEach(entity => {
  console.log('entity',entity);
  
    // console.log('entity.billboard.image', entity.billboard.image);

    if (entity.billboard) {
      entity.billboard.image = props.dotData.resultType === 2
                        ? getEventImage(entity.status)	
                        : defaultIcon;
      entity.billboard.image =
        props.dotData.resultType === 2 ? getEventImage(entity.status) : defaultIcon;
    }
  });
  activeEntity.value = null;
@@ -118,18 +111,13 @@
    removeLabel();
    return;
  }

  currentClickEntity = clickedEntities[0];

  // 恢复所有点的默认图标
  restoreAllIcons();

  // 设置当前点击点为激活状态
  if (currentClickEntity.billboard) {
    currentClickEntity.billboard.image = props.dotData.resultType === 2
                        ? getEventImage(currentClickEntity.status)	
                        : activeIcon;
    currentClickEntity.billboard.scale = 1 // 可选缩放效果
    currentClickEntity.billboard.image =
      props.dotData.resultType === 2 ? getEventImage(currentClickEntity.status) : activeIcon;
    currentClickEntity.billboard.scale = 1; // 可选缩放效果
    activeEntity.value = currentClickEntity;
  }

@@ -185,9 +173,7 @@
        pixelOffset: new Cesium.Cartesian2(0, 55),
      },
      billboard: {
        image: props.dotData.resultType === 2
                        ? getEventImage(item.status)	
                        : defaultIcon, // 初始为默认图标
        image: props.dotData.resultType === 2 ? getEventImage(item.status) : defaultIcon, // 初始为默认图标
        width: 40,
        height: 40,
        pixelOffset: new Cesium.Cartesian2(0, -15),
@@ -279,7 +265,6 @@
  watch(
    () => isMapInitialized.value,
    ready => {
      
      if (ready) {
        flyToEntity(data.metadata.shootPosition);
        labelBoxUpdate();
@@ -316,13 +301,16 @@
  }
});

onMounted(() => {});
onMounted(() => {

});
onBeforeUnmount(() => {
  if (viewer) {
    viewer.destroy();
  }
  removeHandler();
  clearDataPoints();

});

// 暴露方法给父组件

 src/views/dataCenter/dataCenter.vue

@@ -199,6 +199,7 @@
</template>

<script setup>
import EventBus from '@/utils/eventBus';
import dataCenterMap from '@/views/dataCenter/components/dataCenterMap.vue';
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
@@ -483,7 +484,18 @@

onMounted(() => {
  getaiImagesPage();
  // 监听打开全景事件
  EventBus.on('open-panorama', params => {
    console.log('收到全景事件:', params);
    panoramaParamsShow.value = params.show;
    panoramaParamsUrl.value = params.url;
  });
});
onBeforeUnmount(() => {
  // 组件卸载时移除事件监听，防止内存泄漏
  EventBus.off('open-panorama');
});

</script>

<style scoped lang="scss">