Bladeren bron

修改过渡动画可以指定城市的功能;下载北京市和四川省的微观地图;修改cesium.js使用国内的cdn节点;

画安 5 maanden geleden
bovenliggende
commit
f9d74ce45e
44 gewijzigde bestanden met toevoegingen van 748 en 34 verwijderingen
  1. 2 0
      .gitignore
  2. 665 0
      public/cities.json
  3. 11 6
      public/index.html
  4. BIN
      public/map_data/东城区/satellite.webp
  5. BIN
      public/map_data/丰台区/satellite.webp
  6. BIN
      public/map_data/乐山市/satellite.webp
  7. BIN
      public/map_data/内江市/satellite.webp
  8. BIN
      public/map_data/凉山彝族自治州/satellite.webp
  9. BIN
      public/map_data/北京市/satellite.webp
  10. BIN
      public/map_data/南充市/satellite.webp
  11. BIN
      public/map_data/四川省/satellite.webp
  12. BIN
      public/map_data/大兴区/satellite.webp
  13. BIN
      public/map_data/宜宾市/satellite.webp
  14. BIN
      public/map_data/密云区/satellite.webp
  15. BIN
      public/map_data/巴中市/satellite.webp
  16. BIN
      public/map_data/平谷区/satellite.webp
  17. BIN
      public/map_data/广元市/satellite.webp
  18. BIN
      public/map_data/广安市/satellite.webp
  19. BIN
      public/map_data/延庆区/satellite.webp
  20. BIN
      public/map_data/德阳市/satellite.webp
  21. BIN
      public/map_data/怀柔区/satellite.webp
  22. BIN
      public/map_data/成都市/satellite.webp
  23. BIN
      public/map_data/房山区/satellite.webp
  24. BIN
      public/map_data/攀枝花市/satellite.webp
  25. BIN
      public/map_data/昌平区/satellite.webp
  26. BIN
      public/map_data/朝阳区/satellite.webp
  27. BIN
      public/map_data/泸州市/satellite.webp
  28. BIN
      public/map_data/海淀区/satellite.webp
  29. BIN
      public/map_data/甘孜藏族自治州/satellite.webp
  30. BIN
      public/map_data/眉山市/satellite.webp
  31. BIN
      public/map_data/石景山区/satellite.webp
  32. BIN
      public/map_data/绵阳市/satellite.webp
  33. BIN
      public/map_data/自贡市/satellite.webp
  34. BIN
      public/map_data/西城区/satellite.webp
  35. BIN
      public/map_data/资阳市/satellite.webp
  36. BIN
      public/map_data/达州市/satellite.webp
  37. BIN
      public/map_data/通州区/satellite.webp
  38. BIN
      public/map_data/遂宁市/satellite.webp
  39. BIN
      public/map_data/门头沟区/satellite.webp
  40. BIN
      public/map_data/阿坝藏族羌族自治州/satellite.webp
  41. BIN
      public/map_data/雅安市/satellite.webp
  42. BIN
      public/map_data/顺义区/satellite.webp
  43. 5 0
      src/components/CesiumTransition.vue
  44. 65 28
      src/views/TransitionPage.vue

+ 2 - 0
.gitignore

@@ -24,3 +24,5 @@ pnpm-debug.log*
 .claude
 *.py
 .history
+pyscripts
+pyscripts/*

+ 665 - 0
public/cities.json

@@ -0,0 +1,665 @@
+{
+  "北京市": {
+    "province": "北京市",
+    "districtCenter": [
+      116.405285,
+      39.904989
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/北京市/satellite.webp",
+      "bounds": [
+        116.053975,
+        39.635496,
+        116.756595,
+        40.174482
+      ]
+    }
+  },
+  "东城区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.418757,
+      39.917544
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/东城区/satellite.webp",
+      "bounds": [
+        116.125945,
+        39.692966,
+        116.711569,
+        40.142122
+      ]
+    }
+  },
+  "西城区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.366794,
+      39.915309
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/西城区/satellite.webp",
+      "bounds": [
+        116.073991,
+        39.690731,
+        116.659597,
+        40.139887
+      ]
+    }
+  },
+  "朝阳区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.486409,
+      39.921489
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/朝阳区/satellite.webp",
+      "bounds": [
+        116.19358,
+        39.696911,
+        116.779238,
+        40.146067
+      ]
+    }
+  },
+  "丰台区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.286968,
+      39.863642
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/丰台区/satellite.webp",
+      "bounds": [
+        115.994386,
+        39.639064,
+        116.57955,
+        40.08822
+      ]
+    }
+  },
+  "石景山区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.195445,
+      39.914601
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/石景山区/satellite.webp",
+      "bounds": [
+        115.902645,
+        39.690023,
+        116.488245,
+        40.139179
+      ]
+    }
+  },
+  "海淀区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.310316,
+      39.956074
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/海淀区/satellite.webp",
+      "bounds": [
+        116.017339,
+        39.731496,
+        116.603293,
+        40.180652
+      ]
+    }
+  },
+  "门头沟区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.105381,
+      39.937183
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/门头沟区/satellite.webp",
+      "bounds": [
+        115.812485,
+        39.712605,
+        116.398277,
+        40.161761
+      ]
+    }
+  },
+  "房山区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.139157,
+      39.735535
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/房山区/satellite.webp",
+      "bounds": [
+        115.847119,
+        39.510957,
+        116.431195,
+        39.960113
+      ]
+    }
+  },
+  "通州区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.658603,
+      39.902486
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/通州区/satellite.webp",
+      "bounds": [
+        116.365855,
+        39.677908,
+        116.951351,
+        40.127064
+      ]
+    }
+  },
+  "顺义区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.653525,
+      40.128936
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/顺义区/satellite.webp",
+      "bounds": [
+        116.359804,
+        39.904358,
+        116.947246,
+        40.353514
+      ]
+    }
+  },
+  "昌平区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.235906,
+      40.218085
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/昌平区/satellite.webp",
+      "bounds": [
+        115.941799,
+        39.993507,
+        116.530013,
+        40.442663
+      ]
+    }
+  },
+  "大兴区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.338033,
+      39.728908
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/大兴区/satellite.webp",
+      "bounds": [
+        116.046024,
+        39.50433,
+        116.630042,
+        39.953486
+      ]
+    }
+  },
+  "怀柔区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.637122,
+      40.324272
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/怀柔区/satellite.webp",
+      "bounds": [
+        116.342553,
+        40.099694,
+        116.931691,
+        40.54885
+      ]
+    }
+  },
+  "平谷区": {
+    "province": "北京市",
+    "districtCenter": [
+      117.112335,
+      40.144783
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/平谷区/satellite.webp",
+      "bounds": [
+        116.818546,
+        39.920205,
+        117.406124,
+        40.369361
+      ]
+    }
+  },
+  "密云区": {
+    "province": "北京市",
+    "districtCenter": [
+      116.843352,
+      40.377362
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/密云区/satellite.webp",
+      "bounds": [
+        116.548551,
+        40.152784,
+        117.138153,
+        40.60194
+      ]
+    }
+  },
+  "延庆区": {
+    "province": "北京市",
+    "districtCenter": [
+      115.985006,
+      40.465325
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/延庆区/satellite.webp",
+      "bounds": [
+        115.689819,
+        40.240747,
+        116.280193,
+        40.689903
+      ]
+    }
+  },
+  "四川省": {
+    "province": "四川省",
+    "districtCenter": [
+      104.065735,
+      30.659462
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/四川省/satellite.webp",
+      "bounds": [
+        103.752448,
+        30.389969,
+        104.379022,
+        30.928955
+      ]
+    }
+  },
+  "成都市": {
+    "province": "四川省",
+    "districtCenter": [
+      104.065735,
+      30.659462
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/成都市/satellite.webp",
+      "bounds": [
+        103.804663,
+        30.434884,
+        104.326807,
+        30.88404
+      ]
+    }
+  },
+  "自贡市": {
+    "province": "四川省",
+    "districtCenter": [
+      104.773447,
+      29.352765
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/自贡市/satellite.webp",
+      "bounds": [
+        104.515791,
+        29.128187,
+        105.031103,
+        29.577343
+      ]
+    }
+  },
+  "攀枝花市": {
+    "province": "四川省",
+    "districtCenter": [
+      101.716007,
+      26.580446
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/攀枝花市/satellite.webp",
+      "bounds": [
+        101.464888,
+        26.355868,
+        101.967126,
+        26.805024
+      ]
+    }
+  },
+  "泸州市": {
+    "province": "四川省",
+    "districtCenter": [
+      105.443348,
+      28.889138
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/泸州市/satellite.webp",
+      "bounds": [
+        105.186851,
+        28.66456,
+        105.699845,
+        29.113716
+      ]
+    }
+  },
+  "德阳市": {
+    "province": "四川省",
+    "districtCenter": [
+      104.398651,
+      31.127991
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/德阳市/satellite.webp",
+      "bounds": [
+        104.136298,
+        30.903413,
+        104.661004,
+        31.352569
+      ]
+    }
+  },
+  "绵阳市": {
+    "province": "四川省",
+    "districtCenter": [
+      104.741722,
+      31.46402
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/绵阳市/satellite.webp",
+      "bounds": [
+        104.478432,
+        31.239442,
+        105.005012,
+        31.688598
+      ]
+    }
+  },
+  "广元市": {
+    "province": "四川省",
+    "districtCenter": [
+      105.829757,
+      32.433668
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/广元市/satellite.webp",
+      "bounds": [
+        105.563674,
+        32.20909,
+        106.09584,
+        32.658246
+      ]
+    }
+  },
+  "遂宁市": {
+    "province": "四川省",
+    "districtCenter": [
+      105.571331,
+      30.513311
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/遂宁市/satellite.webp",
+      "bounds": [
+        105.310652,
+        30.288733,
+        105.83201,
+        30.737889
+      ]
+    }
+  },
+  "内江市": {
+    "province": "四川省",
+    "districtCenter": [
+      105.066138,
+      29.58708
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/内江市/satellite.webp",
+      "bounds": [
+        104.807886,
+        29.362502,
+        105.32439,
+        29.811658
+      ]
+    }
+  },
+  "乐山市": {
+    "province": "四川省",
+    "districtCenter": [
+      103.761263,
+      29.582024
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/乐山市/satellite.webp",
+      "bounds": [
+        103.503024,
+        29.357446,
+        104.019502,
+        29.806602
+      ]
+    }
+  },
+  "南充市": {
+    "province": "四川省",
+    "districtCenter": [
+      106.082974,
+      30.795281
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/南充市/satellite.webp",
+      "bounds": [
+        105.821534,
+        30.570703,
+        106.344414,
+        31.019859
+      ]
+    }
+  },
+  "眉山市": {
+    "province": "四川省",
+    "districtCenter": [
+      103.831788,
+      30.048318
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/眉山市/satellite.webp",
+      "bounds": [
+        103.572341,
+        29.82374,
+        104.091235,
+        30.272896
+      ]
+    }
+  },
+  "宜宾市": {
+    "province": "四川省",
+    "districtCenter": [
+      104.630825,
+      28.760189
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/宜宾市/satellite.webp",
+      "bounds": [
+        104.374645,
+        28.535611,
+        104.887005,
+        28.984767
+      ]
+    }
+  },
+  "广安市": {
+    "province": "四川省",
+    "districtCenter": [
+      106.633369,
+      30.456398
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/广安市/satellite.webp",
+      "bounds": [
+        106.372842,
+        30.23182,
+        106.893896,
+        30.680976
+      ]
+    }
+  },
+  "达州市": {
+    "province": "四川省",
+    "districtCenter": [
+      107.502262,
+      31.209484
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/达州市/satellite.webp",
+      "bounds": [
+        107.239683,
+        30.984906,
+        107.764841,
+        31.434062
+      ]
+    }
+  },
+  "雅安市": {
+    "province": "四川省",
+    "districtCenter": [
+      103.001033,
+      29.987722
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/雅安市/satellite.webp",
+      "bounds": [
+        102.741745,
+        29.763144,
+        103.260321,
+        30.2123
+      ]
+    }
+  },
+  "巴中市": {
+    "province": "四川省",
+    "districtCenter": [
+      106.753669,
+      31.858809
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/巴中市/satellite.webp",
+      "bounds": [
+        106.489258,
+        31.634231,
+        107.01808,
+        32.083387
+      ]
+    }
+  },
+  "资阳市": {
+    "province": "四川省",
+    "districtCenter": [
+      104.641917,
+      30.122211
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/资阳市/satellite.webp",
+      "bounds": [
+        104.382277,
+        29.897633,
+        104.901557,
+        30.346789
+      ]
+    }
+  },
+  "阿坝藏族羌族自治州": {
+    "province": "四川省",
+    "districtCenter": [
+      102.221374,
+      31.899792
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/阿坝藏族羌族自治州/satellite.webp",
+      "bounds": [
+        101.956845,
+        31.675214,
+        102.485903,
+        32.12437
+      ]
+    }
+  },
+  "甘孜藏族自治州": {
+    "province": "四川省",
+    "districtCenter": [
+      101.963815,
+      30.050663
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/甘孜藏族自治州/satellite.webp",
+      "bounds": [
+        101.704362,
+        29.826085,
+        102.223268,
+        30.275241
+      ]
+    }
+  },
+  "凉山彝族自治州": {
+    "province": "四川省",
+    "districtCenter": [
+      102.258746,
+      27.886762
+    ],
+    "microViewRange": 25000,
+    "satellite": {
+      "url": "./map_data/凉山彝族自治州/satellite.webp",
+      "bounds": [
+        102.004662,
+        27.662184,
+        102.51283,
+        28.11134
+      ]
+    }
+  }
+}

+ 11 - 6
public/index.html

@@ -5,17 +5,22 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
+    
+    <link rel="preconnect" href="https://cdn.staticfile.org">
+    
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.105.1/Cesium.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.105.1/Widgets/widgets.min.css" rel="stylesheet">
+    
+    <script>
+      window.CESIUM_BASE_URL = 'https://cdn.staticfile.org/cesium/1.105.1/';
+    </script>
+    
+    <script src="https://cdn.staticfile.org/cesium/1.105.1/Cesium.js"></script>
+    <link href="https://cdn.staticfile.org/cesium/1.105.1/Widgets/widgets.min.css" rel="stylesheet">
   </head>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- 本地瓦片,无需预加载 -->
-    <!-- built files will be auto injected -->
-  </body>
+    </body>
 </html>

BIN
public/map_data/东城区/satellite.webp


BIN
public/map_data/丰台区/satellite.webp


BIN
public/map_data/乐山市/satellite.webp


BIN
public/map_data/内江市/satellite.webp


BIN
public/map_data/凉山彝族自治州/satellite.webp


BIN
public/map_data/北京市/satellite.webp


BIN
public/map_data/南充市/satellite.webp


BIN
public/map_data/四川省/satellite.webp


BIN
public/map_data/大兴区/satellite.webp


BIN
public/map_data/宜宾市/satellite.webp


BIN
public/map_data/密云区/satellite.webp


BIN
public/map_data/巴中市/satellite.webp


BIN
public/map_data/平谷区/satellite.webp


BIN
public/map_data/广元市/satellite.webp


BIN
public/map_data/广安市/satellite.webp


BIN
public/map_data/延庆区/satellite.webp


BIN
public/map_data/德阳市/satellite.webp


BIN
public/map_data/怀柔区/satellite.webp


BIN
public/map_data/成都市/satellite.webp


BIN
public/map_data/房山区/satellite.webp


BIN
public/map_data/攀枝花市/satellite.webp


BIN
public/map_data/昌平区/satellite.webp


BIN
public/map_data/朝阳区/satellite.webp


BIN
public/map_data/泸州市/satellite.webp


BIN
public/map_data/海淀区/satellite.webp


BIN
public/map_data/甘孜藏族自治州/satellite.webp


BIN
public/map_data/眉山市/satellite.webp


BIN
public/map_data/石景山区/satellite.webp


BIN
public/map_data/绵阳市/satellite.webp


BIN
public/map_data/自贡市/satellite.webp


BIN
public/map_data/西城区/satellite.webp


BIN
public/map_data/资阳市/satellite.webp


BIN
public/map_data/达州市/satellite.webp


BIN
public/map_data/通州区/satellite.webp


BIN
public/map_data/遂宁市/satellite.webp


BIN
public/map_data/门头沟区/satellite.webp


BIN
public/map_data/阿坝藏族羌族自治州/satellite.webp


BIN
public/map_data/雅安市/satellite.webp


BIN
public/map_data/顺义区/satellite.webp


+ 5 - 0
src/components/CesiumTransition.vue

@@ -233,6 +233,11 @@ export default {
             rectangle: Cesium.Rectangle.fromDegrees(b[0], b[1], b[2], b[3])
           })
         );
+
+        // 针对本地大图的专项优化
+        this._viewer.scene.globe.maximumScreenSpaceError = 1.0; // 降低误差,强制渲染高清
+        this._viewer.scene.globe.tileCacheSize = 200;           // 增加缓存
+
       }
 
       this._viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(...this._coords.start) });

+ 65 - 28
src/views/TransitionPage.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <transition name="fade">
       <CesiumTransition
-        v-if="isTransitioning"
+        v-if="isTransitioning && isDataReady"
         :province="province"
         :poi="poi"
         :district-center="districtCenter"
@@ -25,43 +25,73 @@ export default {
   data() {
     return {
       isTransitioning: true,
+      isDataReady: false, // 控制加载时机
 
-      // ====== 以下数据可动态替换 ======
-
-      // 高亮的省份
+      // ====== 以下数据将在 initCityData 中被动态替换,这里填入默认兜底值 ======
       province: '北京市',
-
-      // 微观标记点(null 则不显示POI)
-      poi: null,
-
-      // 区域中心(用于相机定位)
       districtCenter: [116.70, 39.80],
-
-      // 路网数据:两横三纵
-      roads: [
-        // 两横
-        { name: "京通快速路", width: 12, glowPower: 0.3, color: '#00ffff', path: [[116.48, 39.91], [116.55, 39.91], [116.62, 39.905], [116.70, 39.90], [116.78, 39.895], [116.86, 39.89], [116.94, 39.885]] },
-        { name: "京哈高速", width: 12, glowPower: 0.3, color: '#ff3333', path: [[116.48, 39.82], [116.56, 39.82], [116.64, 39.815], [116.72, 39.81], [116.80, 39.805], [116.88, 39.80], [116.94, 39.795]] },
-        // 三纵
-        { name: "六环路(东段)", width: 10, glowPower: 0.25, color: '#ffaa00', path: [[116.58, 39.98], [116.585, 39.94], [116.59, 39.90], [116.59, 39.86], [116.585, 39.82], [116.58, 39.78], [116.58, 39.72]] },
-        { name: "通州北运河大道", width: 10, glowPower: 0.25, color: '#cc00ff', path: [[116.70, 39.98], [116.705, 39.94], [116.71, 39.90], [116.71, 39.86], [116.705, 39.82], [116.70, 39.78], [116.70, 39.72]] },
-        { name: "京津公路", width: 10, glowPower: 0.25, color: '#00ff88', path: [[116.82, 39.98], [116.825, 39.94], [116.83, 39.90], [116.83, 39.86], [116.825, 39.82], [116.82, 39.78], [116.82, 39.72]] }
-      ],
-
-      // 微观区域卫星底图(已使用本地瓦片覆盖,无需单独叠加)
-      satelliteImage: null,
-
+      microViewRange: 80000,
+      
       // 中国边界 GeoJSON
       boundaryUrl: './china.json',
 
-      // 微观俯冲视角高度(米) — 通州全区需要更高视角
-      microViewRange: 80000
+      // 微观标记点(可根据城市动态配置,暂设为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("进入系统!");
+      console.log("地球过渡动画结束,正式进入系统首页!");
       this.$router.replace("/main");
     }
   }
@@ -69,10 +99,17 @@ export default {
 </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>
+</style>