325 lines
9.6 KiB
TypeScript
325 lines
9.6 KiB
TypeScript
import { useEffect, useRef, useCallback } from 'react'
|
|
import { useMap } from '@vis.gl/react-maplibre'
|
|
import type { Map as MapLibreMap } from 'maplibre-gl'
|
|
|
|
interface CurrentVectorPoint {
|
|
lat: number
|
|
lon: number
|
|
u: number // 동서 방향 속도 (양수=동, 음수=서) [m/s]
|
|
v: number // 남북 방향 속도 (양수=북, 음수=남) [m/s]
|
|
}
|
|
|
|
interface Particle {
|
|
x: number
|
|
y: number
|
|
age: number
|
|
maxAge: number
|
|
}
|
|
|
|
interface OceanCurrentParticleLayerProps {
|
|
visible: boolean
|
|
}
|
|
|
|
// 해류 속도 기반 색상
|
|
function getCurrentColor(speed: number): string {
|
|
if (speed < 0.2) return 'rgba(59, 130, 246, 0.8)' // 파랑
|
|
if (speed < 0.4) return 'rgba(6, 182, 212, 0.8)' // 청록
|
|
if (speed < 0.6) return 'rgba(34, 197, 94, 0.8)' // 초록
|
|
return 'rgba(249, 115, 22, 0.8)' // 주황
|
|
}
|
|
|
|
// 한반도 육지 영역 판별 (간략화된 폴리곤)
|
|
const isOnLand = (lat: number, lon: number): boolean => {
|
|
const peninsula: [number, number][] = [
|
|
[38.5, 124.5], [38.5, 128.3],
|
|
[37.8, 128.8], [37.0, 129.2],
|
|
[36.0, 129.5], [35.1, 129.2],
|
|
[34.8, 128.6], [34.5, 127.8],
|
|
[34.3, 126.5], [34.8, 126.1],
|
|
[35.5, 126.0], [36.0, 126.3],
|
|
[36.8, 126.0], [37.5, 126.2],
|
|
[38.5, 124.5],
|
|
]
|
|
|
|
// 제주도 영역
|
|
if (lat >= 33.1 && lat <= 33.7 && lon >= 126.1 && lon <= 127.0) return true
|
|
|
|
// Ray casting algorithm
|
|
let inside = false
|
|
for (let i = 0, j = peninsula.length - 1; i < peninsula.length; j = i++) {
|
|
const [yi, xi] = peninsula[i]
|
|
const [yj, xj] = peninsula[j]
|
|
if ((yi > lat) !== (yj > lat) && lon < ((xj - xi) * (lat - yi)) / (yj - yi) + xi) {
|
|
inside = !inside
|
|
}
|
|
}
|
|
return inside
|
|
}
|
|
|
|
// 한국 해역의 해류 u,v 벡터 데이터 생성 (Mock)
|
|
const generateOceanCurrentData = (): CurrentVectorPoint[] => {
|
|
const data: CurrentVectorPoint[] = []
|
|
|
|
for (let lat = 33.5; lat <= 38.0; lat += 0.8) {
|
|
for (let lon = 125.0; lon <= 130.5; lon += 0.8) {
|
|
if (isOnLand(lat, lon)) continue
|
|
|
|
let u = 0
|
|
let v = 0
|
|
|
|
if (lon > 128.5) {
|
|
// 동해 — 북동진하는 동한난류
|
|
u = 0.2 + Math.random() * 0.2 // 동쪽 0.2~0.4
|
|
v = 0.3 + Math.random() * 0.2 // 북쪽 0.3~0.5
|
|
} else if (lon < 126.5) {
|
|
// 서해 — 북진
|
|
u = -0.05 + Math.random() * 0.1 // 동서 -0.05~0.05
|
|
v = 0.15 + Math.random() * 0.15 // 북쪽 0.15~0.3
|
|
} else {
|
|
// 남해 — 동진
|
|
u = 0.3 + Math.random() * 0.2 // 동쪽 0.3~0.5
|
|
v = -0.05 + Math.random() * 0.15 // 남북 -0.05~0.1
|
|
}
|
|
|
|
data.push({ lat, lon, u, v })
|
|
}
|
|
}
|
|
|
|
return data
|
|
}
|
|
|
|
// 해류 데이터는 한 번만 생성
|
|
const CURRENT_DATA = generateOceanCurrentData()
|
|
|
|
// IDW 보간으로 특정 위치의 u,v 벡터 추정 → speed/direction 반환
|
|
function interpolateCurrent(
|
|
lat: number,
|
|
lon: number,
|
|
points: CurrentVectorPoint[]
|
|
): { speed: number; direction: number } {
|
|
if (points.length === 0) return { speed: 0.3, direction: 90 }
|
|
|
|
let totalWeight = 0
|
|
let weightedU = 0
|
|
let weightedV = 0
|
|
|
|
for (const point of points) {
|
|
const dist = Math.sqrt(
|
|
Math.pow(point.lat - lat, 2) + Math.pow(point.lon - lon, 2)
|
|
)
|
|
const weight = 1 / Math.pow(Math.max(dist, 0.01), 2)
|
|
totalWeight += weight
|
|
weightedU += point.u * weight
|
|
weightedV += point.v * weight
|
|
}
|
|
|
|
const u = weightedU / totalWeight
|
|
const v = weightedV / totalWeight
|
|
const speed = Math.sqrt(u * u + v * v)
|
|
// u=동(+), v=북(+) → 화면 방향: sin=동(+x), -cos=남(+y)
|
|
const direction = (Math.atan2(u, v) * 180) / Math.PI
|
|
return { speed, direction: (direction + 360) % 360 }
|
|
}
|
|
|
|
// MapLibre map.unproject()를 통해 픽셀 → 경위도 변환
|
|
function containerPointToLatLng(
|
|
map: MapLibreMap,
|
|
x: number,
|
|
y: number
|
|
): { lat: number; lng: number } {
|
|
const lngLat = map.unproject([x, y])
|
|
return { lat: lngLat.lat, lng: lngLat.lng }
|
|
}
|
|
|
|
const PARTICLE_COUNT = 400
|
|
const FADE_ALPHA = 0.93
|
|
|
|
/**
|
|
* OceanCurrentParticleLayer
|
|
*
|
|
* Canvas 2D + requestAnimationFrame 패턴으로 해류 흐름 시각화
|
|
* u,v 벡터 격자 데이터를 IDW 보간하여 파티클 애니메이션 렌더링
|
|
* 바람 파티클 대비: 적은 입자, 느린 속도, 긴 트레일
|
|
*/
|
|
export function OceanCurrentParticleLayer({ visible }: OceanCurrentParticleLayerProps) {
|
|
const { current: mapRef } = useMap()
|
|
const canvasRef = useRef<HTMLCanvasElement | null>(null)
|
|
const particlesRef = useRef<Particle[]>([])
|
|
const animFrameRef = useRef<number>(0)
|
|
|
|
const initParticles = useCallback((width: number, height: number) => {
|
|
particlesRef.current = []
|
|
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
|
particlesRef.current.push({
|
|
x: Math.random() * width,
|
|
y: Math.random() * height,
|
|
age: Math.floor(Math.random() * 150),
|
|
maxAge: 120 + Math.floor(Math.random() * 60),
|
|
})
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const map = mapRef?.getMap()
|
|
if (!map) return
|
|
|
|
if (!visible) {
|
|
if (canvasRef.current) {
|
|
canvasRef.current.remove()
|
|
canvasRef.current = null
|
|
}
|
|
cancelAnimationFrame(animFrameRef.current)
|
|
return
|
|
}
|
|
|
|
const container = map.getContainer()
|
|
|
|
// Canvas 생성 또는 재사용
|
|
let canvas = canvasRef.current
|
|
if (!canvas) {
|
|
canvas = document.createElement('canvas')
|
|
canvas.style.position = 'absolute'
|
|
canvas.style.top = '0'
|
|
canvas.style.left = '0'
|
|
canvas.style.pointerEvents = 'none'
|
|
canvas.style.zIndex = '440'
|
|
container.appendChild(canvas)
|
|
canvasRef.current = canvas
|
|
}
|
|
|
|
const resize = () => {
|
|
if (!canvas) return
|
|
const { clientWidth: w, clientHeight: h } = container
|
|
canvas.width = w
|
|
canvas.height = h
|
|
}
|
|
resize()
|
|
|
|
const ctx = canvas.getContext('2d')
|
|
if (!ctx) return
|
|
|
|
initParticles(canvas.width, canvas.height)
|
|
|
|
// 오프스크린 캔버스 (트레일 효과)
|
|
let offCanvas: HTMLCanvasElement | null = null
|
|
let offCtx: CanvasRenderingContext2D | null = null
|
|
|
|
function animate() {
|
|
if (!ctx || !canvas) return
|
|
|
|
// 오프스크린 캔버스 크기 동기화
|
|
if (!offCanvas || offCanvas.width !== canvas.width || offCanvas.height !== canvas.height) {
|
|
offCanvas = document.createElement('canvas')
|
|
offCanvas.width = canvas.width
|
|
offCanvas.height = canvas.height
|
|
offCtx = offCanvas.getContext('2d')
|
|
}
|
|
|
|
if (!offCtx) return
|
|
|
|
// 트레일 페이드 효과 (느린 페이드 = 부드러운 흐름)
|
|
offCtx.globalCompositeOperation = 'destination-in'
|
|
offCtx.fillStyle = `rgba(0, 0, 0, ${FADE_ALPHA})`
|
|
offCtx.fillRect(0, 0, offCanvas.width, offCanvas.height)
|
|
offCtx.globalCompositeOperation = 'source-over'
|
|
|
|
// 현재 지도 bounds 확인
|
|
const bounds = map!.getBounds()
|
|
|
|
for (const particle of particlesRef.current) {
|
|
particle.age++
|
|
|
|
// 수명 초과 시 리셋
|
|
if (particle.age > particle.maxAge) {
|
|
particle.x = Math.random() * canvas.width
|
|
particle.y = Math.random() * canvas.height
|
|
particle.age = 0
|
|
particle.maxAge = 120 + Math.floor(Math.random() * 60)
|
|
continue
|
|
}
|
|
|
|
const { lat, lng } = containerPointToLatLng(map!, particle.x, particle.y)
|
|
|
|
// 화면 밖이면 리셋
|
|
if (!bounds.contains([lng, lat])) {
|
|
particle.x = Math.random() * canvas.width
|
|
particle.y = Math.random() * canvas.height
|
|
particle.age = 0
|
|
continue
|
|
}
|
|
|
|
// 육지 위이면 리셋
|
|
if (isOnLand(lat, lng)) {
|
|
particle.x = Math.random() * canvas.width
|
|
particle.y = Math.random() * canvas.height
|
|
particle.age = 0
|
|
continue
|
|
}
|
|
|
|
const current = interpolateCurrent(lat, lng, CURRENT_DATA)
|
|
const rad = (current.direction * Math.PI) / 180
|
|
const pixelSpeed = current.speed * 2.0
|
|
|
|
const newX = particle.x + Math.sin(rad) * pixelSpeed
|
|
const newY = particle.y + -Math.cos(rad) * pixelSpeed
|
|
|
|
// 다음 위치가 육지이면 리셋
|
|
const nextPos = containerPointToLatLng(map!, newX, newY)
|
|
if (isOnLand(nextPos.lat, nextPos.lng)) {
|
|
particle.x = Math.random() * canvas.width
|
|
particle.y = Math.random() * canvas.height
|
|
particle.age = 0
|
|
continue
|
|
}
|
|
|
|
const oldX = particle.x
|
|
const oldY = particle.y
|
|
particle.x = newX
|
|
particle.y = newY
|
|
|
|
// 파티클 트레일 그리기
|
|
const alpha = 1 - particle.age / particle.maxAge
|
|
offCtx.strokeStyle = getCurrentColor(current.speed).replace('0.8', String(alpha * 0.8))
|
|
offCtx.lineWidth = 0.8
|
|
offCtx.beginPath()
|
|
offCtx.moveTo(oldX, oldY)
|
|
offCtx.lineTo(particle.x, particle.y)
|
|
offCtx.stroke()
|
|
}
|
|
|
|
// 메인 캔버스에 합성 (배경 오버레이 없이 파티클만)
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
ctx.drawImage(offCanvas, 0, 0)
|
|
|
|
animFrameRef.current = requestAnimationFrame(animate)
|
|
}
|
|
|
|
animate()
|
|
|
|
// 지도 이동/줌 시 리셋
|
|
const onMoveEnd = () => {
|
|
resize()
|
|
if (canvas) initParticles(canvas.width, canvas.height)
|
|
if (offCanvas && canvas) {
|
|
offCanvas.width = canvas.width
|
|
offCanvas.height = canvas.height
|
|
}
|
|
}
|
|
map.on('moveend', onMoveEnd)
|
|
map.on('zoomend', onMoveEnd)
|
|
|
|
return () => {
|
|
cancelAnimationFrame(animFrameRef.current)
|
|
map.off('moveend', onMoveEnd)
|
|
map.off('zoomend', onMoveEnd)
|
|
if (canvasRef.current) {
|
|
canvasRef.current.remove()
|
|
canvasRef.current = null
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [mapRef, visible, initParticles])
|
|
|
|
return null
|
|
}
|