refactor(WipeEffectMap):优化卷帘效果组件
-移除了不必要的开关按钮和状态显示 - 调整了控制面板的样式和布局 -简化了 wipeEffect.js 中的遮罩层创建逻辑 - 优化了 WipeEffectMap组件的初始化和渲染逻辑
This commit is contained in:
parent
44f895e1b1
commit
46b3724f2e
|
@ -4,13 +4,10 @@
|
|||
<div class="wipe-controls">
|
||||
<div class="control-panel">
|
||||
<h3>卷帘效果对比</h3>
|
||||
<div class="control-buttons">
|
||||
<button @click="toggleWipeEffect" class="control-btn" :class="{ active: isWipeActive }">
|
||||
{{ isWipeActive ? '关闭卷帘' : '开启卷帘' }}
|
||||
</button>
|
||||
<button @click="resetWipe" class="control-btn">
|
||||
重置位置
|
||||
</button>
|
||||
<div class="control-buttons">
|
||||
<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;
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue