refactor(WipeEffectMap):优化卷帘效果组件

-移除了不必要的开关按钮和状态显示
- 调整了控制面板的样式和布局
-简化了 wipeEffect.js 中的遮罩层创建逻辑
- 优化了 WipeEffectMap组件的初始化和渲染逻辑

src/components/WipeEffectMap.vue

@@ -4,13 +4,10 @@
     <div class="wipe-controls">
       <div class="control-panel">
         <h3>卷帘效果对比</h3>
-        <div class="control-buttons">
+                 <div class="control-buttons">
-          <button @click="toggleWipeEffect" class="control-btn" :class="{ active: isWipeActive }">
+           <button @click="resetWipe" class="control-btn">
-            {{ isWipeActive ? '关闭卷帘' : '开启卷帘' }}
+             重置位置
-          </button>
+           </button>
-          <button @click="resetWipe" class="control-btn">
-            重置位置
-          </button>
           <button @click="toggleDirection" class="control-btn">
             {{ isVertical ? '水平卷帘' : '垂直卷帘' }}
           </button>
@@ -41,12 +38,7 @@
             <span class="label">卷帘方向:</span>
             <span class="value">{{ isVertical ? '垂直' : '水平' }}</span>
           </div>
-          <div class="info-item">
+
-            <span class="label">状态:</span>
-            <span class="value" :class="{ active: isWipeActive }">
-              {{ isWipeActive ? '激活' : '停用' }}
-            </span>
-          </div>
         </div>
       </div>
     </div>
@@ -67,7 +59,7 @@ const mapDiv = ref()
 let map = null
 let wipeManager = null
 let wipeAnimator = null
-const isWipeActive = ref(false)
+
 const isVertical = ref(true)
 const currentPosition = ref(50)
 
@@ -107,6 +99,9 @@ const initMap = () => {
   // 覆盖图层（右侧/下方显示）：影像地图
   wipeManager.setLayers(satelliteLayers, vectorLayers)
 
+  // 默认激活卷帘效果
+  wipeManager.activate()
+
   // 监听位置变化
   const updatePosition = () => {
     currentPosition.value = wipeManager.options.position
@@ -116,16 +111,7 @@ const initMap = () => {
   setInterval(updatePosition, 100)
 }
 
-// 切换卷帘效果
+
-const toggleWipeEffect = () => {
-  if (isWipeActive.value) {
-    wipeManager.deactivate()
-    isWipeActive.value = false
-  } else {
-    wipeManager.activate()
-    isWipeActive.value = true
-  }
-}
 
 // 重置卷帘位置
 const resetWipe = async () => {
@@ -262,6 +248,8 @@ onUnmounted(() => {
   color: white;
 }
 
+
+
 .map-info {
   border-top: 1px solid #e0e0e0;
   padding-top: 15px;

src/utils/wipeEffect.js

@@ -45,19 +45,7 @@ export class WipeEffectManager {
       height: 100%;
       pointer-events: none;
       z-index: 1000;
-    `
+      background: transparent;
-    
-    // 创建卷帘遮罩
-    const mask = document.createElement('div')
-    mask.className = 'wipe-mask'
-    mask.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.3);
-      pointer-events: none;
     `
     
     // 创建卷帘线
@@ -70,10 +58,10 @@ export class WipeEffectManager {
       pointer-events: auto;
       cursor: ${this.options.direction === 'vertical' ? 'col-resize' : 'row-resize'};
       z-index: 1001;
+      mix-blend-mode: normal;
     `
     
-    // 先添加到DOM，再更新位置
+    // 添加到DOM
-    this.wipeElement.appendChild(mask)
     this.wipeElement.appendChild(line)
     
     // 添加到地图容器
@@ -91,11 +79,10 @@ export class WipeEffectManager {
     if (!this.wipeElement) return
     
     const line = this.wipeElement.querySelector('.wipe-line')
-    const mask = this.wipeElement.querySelector('.wipe-mask')
     
     // 确保元素存在
-    if (!line || !mask) {
+    if (!line) {
-      console.warn('Wipe elements not found, skipping position update')
+      console.warn('Wipe line element not found, skipping position update')
       return
     }
     
@@ -105,16 +92,12 @@ export class WipeEffectManager {
       line.style.top = '0'
       line.style.width = '4px'
       line.style.height = '100%'
-      
-      mask.style.clipPath = `polygon(0 0, ${this.options.position}% 0, ${this.options.position}% 100%, 0 100%)`
     } else {
       // 水平卷帘
       line.style.top = `${this.options.position}%`
       line.style.left = '0'
       line.style.width = '100%'
       line.style.height = '4px'
-      
-      mask.style.clipPath = `polygon(0 0, 100% 0, 100% ${this.options.position}%, 0 ${this.options.position}%)`
     }
   }
 
@@ -209,6 +192,8 @@ export class WipeEffectManager {
   setupRenderEvents() {
     if (!this.isActive) return
     
+    console.log('设置渲染事件，位置:', this.options.position)
+    
     // 为覆盖图层添加预渲染事件
     this.overlayLayers.forEach(layer => {
       const prerenderKey = layer.on('prerender', (event) => {
@@ -341,6 +326,8 @@ export class WipeEffectManager {
     
     // 触发重新渲染
     this.map.render()
+    
+    console.log('卷帘效果已激活，位置:', this.options.position)
   }
 
   /**