Преглед изворни кода

过渡动画新增北京市政府微观图淡入淡出效果,替换旧卫星底图

画安 пре 2 недеља
родитељ
комит
a738e575c2
3 измењених фајлова са 40 додато и 4 уклоњено
  1. BIN
      public/beijing-gov-satellite.jpg
  2. 35 3
      src/components/CesiumTransition.vue
  3. 5 1
      src/views/TransitionPage.vue

BIN
public/beijing-gov-satellite.jpg


+ 35 - 3
src/components/CesiumTransition.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="cesium-transition-wrapper">
     <div ref="cesiumContainer" class="cesium-container"></div>
+    <img
+      v-if="microImage"
+      ref="microOverlay"
+      :src="microImage"
+      class="micro-overlay"
+    />
     <div class="ui-layer">
       <div
         v-if="poi"
@@ -94,6 +100,11 @@ export default {
     microViewRange: {
       type: Number,
       default: 10000
+    },
+    // 微观覆盖图片路径(淡入淡出展示)
+    microImage: {
+      type: String,
+      default: null
     }
   },
   data() {
@@ -224,8 +235,8 @@ export default {
       cam.enableTilt = false;
       cam.enableLook = false;
 
-      // 微观区域高清卫星底图
-      if (this.satelliteImage && this.satelliteImage.url) {
+      // 微观区域高清卫星底图(有 microImage 覆盖层时跳过,避免重复)
+      if (!this.microImage && this.satelliteImage && this.satelliteImage.url) {
         const b = this.satelliteImage.bounds;
         this._viewer.imageryLayers.addImageryProvider(
           new Cesium.SingleTileImageryProvider({
@@ -460,7 +471,15 @@ export default {
       this._microEffectsSource.show = true;
       if (this.poi && this.$refs.poiLabel) this.$refs.poiLabel.style.opacity = 1;
 
-      await this._safeDelay(1000);
+      // 阶段4: 微观图片淡入
+      if (this.microImage && this.$refs.microOverlay) {
+        await this._safeDelay(500);
+        if (this._destroyed) return;
+        this.$refs.microOverlay.style.opacity = 1;
+        await this._safeDelay(2000); // 等待淡入完成 + 停留展示
+      } else {
+        await this._safeDelay(1000);
+      }
       if (this._destroyed) return;
       this.$emit('complete');
     }
@@ -488,6 +507,19 @@ export default {
   padding: 0;
 }
 
+.micro-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 1.5s ease;
+  z-index: 2;
+  pointer-events: none;
+}
+
 .ui-layer {
   position: absolute;
   top: 0;

+ 5 - 1
src/views/TransitionPage.vue

@@ -10,6 +10,7 @@
         :satellite-image="satelliteImage"
         :boundary-url="boundaryUrl"
         :micro-view-range="microViewRange"
+        :micro-image="microImage"
         @complete="onTransitionComplete"
       />
     </transition>
@@ -41,7 +42,10 @@ export default {
       // 路网数据和卫星底图(因为不同城市的数据不同,如果是动态全国切换,建议默认清空)
       // 如果你需要保留北京的默认路网,可以在 if(targetCity === '北京市') 里面再单独赋回来
       roads: [],
-      satelliteImage: null
+      satelliteImage: null,
+
+      // 微观覆盖图片(过渡动画最后淡入展示)
+      microImage: './beijing-gov-satellite.jpg'
     };
   },
   created() {