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