diff --git a/src/components/WipeEffectMap.vue b/src/components/WipeEffectMap.vue index aecac7a..7949e62 100644 --- a/src/components/WipeEffectMap.vue +++ b/src/components/WipeEffectMap.vue @@ -4,13 +4,10 @@

卷帘效果对比

-
- - +
+ @@ -41,12 +38,7 @@ 卷帘方向: {{ isVertical ? '垂直' : '水平' }}
-
- 状态: - - {{ isWipeActive ? '激活' : '停用' }} - -
+
@@ -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; @@ -302,19 +290,19 @@ onUnmounted(() => { left: 10px; right: 10px; } - + .control-panel { padding: 15px; min-width: auto; } - + .control-panel h3 { font-size: 14px; } - + .control-btn { padding: 8px 12px; font-size: 13px; } } - \ No newline at end of file + diff --git a/src/utils/wipeEffect.js b/src/utils/wipeEffect.js index 443ff54..a8fcd42 100644 --- a/src/utils/wipeEffect.js +++ b/src/utils/wipeEffect.js @@ -45,19 +45,7 @@ export class WipeEffectManager { height: 100%; pointer-events: none; z-index: 1000; - ` - - // 创建卷帘遮罩 - 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; + background: transparent; ` // 创建卷帘线 @@ -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,再更新位置 - this.wipeElement.appendChild(mask) + // 添加到DOM 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) { - console.warn('Wipe elements not found, skipping position update') + if (!line) { + 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) } /**