dtScreen/src/views/TransitionPage.vue

<template>
  <div class="page">
    <transition name="fade">
      <CesiumTransition
        v-if="isTransitioning && isDataReady"
        :province="province"
        :poi="poi"
        :district-center="districtCenter"
        :roads="roads"
        :satellite-image="satelliteImage"
        :boundary-url="boundaryUrl"
        :micro-view-range="microViewRange"
        @complete="onTransitionComplete"
      />
    </transition>
  </div>
</template>

<script>
import CesiumTransition from '@/components/CesiumTransition.vue';

export default {
  name: "TransitionPage",
  components: { CesiumTransition },
  data() {
    return {
      isTransitioning: true,
      isDataReady: false, // 控制加载时机

      // ====== 以下数据将在 initCityData 中被动态替换，这里填入默认兜底值 ======
      province: '北京市',
      districtCenter: [116.70, 39.80],
      microViewRange: 80000,
      
      // 中国边界 GeoJSON
      boundaryUrl: './china.json',

      // 微观标记点（可根据城市动态配置，暂设为null）
      poi: null,

      // 路网数据和卫星底图（因为不同城市的数据不同，如果是动态全国切换，建议默认清空）
      // 如果你需要保留北京的默认路网，可以在 if(targetCity === '北京市') 里面再单独赋回来
      roads: [],
      satelliteImage: null
    };
  },
  created() {
    // 组件创建时，立即去获取城市数据
    this.initCityData();
  },
  methods: {
    async initCityData() {
      // 1. 获取登录页通过路由传过来的城市名称，默认走北京
      // 例如：this.$router.push({ path: '/transition', query: { city: '成都市' } })
      const targetCity = this.$route.query.city || '北京市';
      
      try {
        // 2. 动态请求 public 目录下的全量城市配置文件
        // 请确保通过上一步的脚本生成的 cities.json 已经放置在 public 目录下
        const response = await fetch('./cities.json');
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const allCitiesConfig = await response.json();
        
        // 3. 查找当前匹配城市的配置
        const config = allCitiesConfig[targetCity];
        
        if (config) {
          this.province = config.province; // 用于宏观视角高亮对应省份边界
          this.districtCenter = config.districtCenter; // 用于微观俯冲视角的中心点
          this.microViewRange = config.microViewRange; // 用于微观视角的相机高度

          // 动态提取卫星图：如果有配置则加载，没有则设为 null（避免显示错位）
          this.satelliteImage = config.satellite || null;

          // 如果不是北京，建议清空路网，或者根据需要加载该城市的路网
          this.roads = (targetCity === '北京市') ? this.defaultBeijingRoads : [];

        } else {
          console.warn(`⚠️ 未在 cities.json 中匹配到【${targetCity}】的配置，将使用默认北京视角`);
        }
      } catch (error) {
        console.error("加载城市配置 cities.json 失败，请检查文件是否在 public 目录下！", error);
      } finally {
        // 4. 无论成功还是失败（走兜底），都开放渲染条件，开始地球动画
        this.isDataReady = true;
      }
    },
    onTransitionComplete() {
      this.isTransitioning = false;
      console.log("地球过渡动画结束，正式进入系统首页！");
      this.$router.replace("/main");
    }
  }
}
</script>

<style scoped>
.page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>