fix:优化移动端打击效果

This commit is contained in:
Daniel
2026-03-06 14:01:47 +08:00
parent 9f86de0125
commit 3251de6406
2 changed files with 10 additions and 6 deletions

View File

@@ -253,20 +253,21 @@ export function WarMap() {
const toggleStrikeFilter = (key: LegendFilterKey | null) => {
const next = strikeLegendFilter === key ? null : key
strikeLegendFilterRef.current = next
// 点击时同步飞镜头,避免等 useEffect 造成的明显延迟;缓动曲线使动画更顺滑
// 点击时同步飞镜头;移动端减小 padding、缩短 duration使小屏更顺滑
if (next != null) {
const bounds = getBoundsForFilterRef.current(next)
const map = mapRef.current?.getMap()
if (bounds && map) {
const isMobile = typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches
map.fitBounds(
[
[bounds[0], bounds[1]],
[bounds[2], bounds[3]],
],
{
padding: 80,
maxZoom: 8,
duration: 500,
padding: isMobile ? 40 : 80,
maxZoom: isMobile ? 7.5 : 8,
duration: isMobile ? 400 : 500,
easing: (t) => 1 - Math.pow(1 - t, 3), // easeOutCubic
}
)
@@ -1101,12 +1102,15 @@ export function WarMap() {
return () => cancelAnimationFrame(animRef.current)
}, [])
// 主视角:容器尺寸变化时无动画;图例点「全部/实时」时平滑飞回
// 主视角:容器尺寸变化时无动画;图例点「全部/实时」时平滑飞回;移动端减小 padding、缩短 duration
const fitToTheater = useCallback((options?: { duration?: number }) => {
const map = mapRef.current?.getMap()
if (!map) return
const duration = options?.duration ?? 0
map.fitBounds(THEATER_BOUNDS, { padding: 32, maxZoom: 6, duration })
const isMobile = typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches
const padding = duration > 0 && isMobile ? 24 : 32
const flyDuration = duration > 0 && isMobile ? 400 : duration
map.fitBounds(THEATER_BOUNDS, { padding, maxZoom: 6, duration: flyDuration })
}, [])
useEffect(() => {