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 @@
@@ -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)
}
/**