diff --git a/src/components/WarMap.tsx b/src/components/WarMap.tsx
index edadfe7..040f911 100644
--- a/src/components/WarMap.tsx
+++ b/src/components/WarMap.tsx
@@ -1,51 +1,213 @@
-import { useRef, useEffect } from 'react'
-import Map, { Marker } from 'react-map-gl'
+import { useMemo, useEffect, useRef } from 'react'
+import Map, { Source, Layer } from 'react-map-gl'
import type { MapRef } from 'react-map-gl'
+import type { Map as MapboxMap } from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { useSituationStore } from '@/store/situationStore'
+import { ATTACKED_TARGETS } from '@/data/mapLocations'
const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN || ''
-// Persian Gulf center
-const DEFAULT_VIEW = {
- longitude: 54,
- latitude: 27,
- zoom: 5.5,
+const DEFAULT_VIEW = { longitude: 52.5, latitude: 26.5, zoom: 5.2 }
+
+const COUNTRIES_GEOJSON =
+ 'https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson'
+
+const IRAN_ADMIN = 'Iran'
+const ALLIES_ADMIN = [
+ 'Qatar',
+ 'Bahrain',
+ 'Kuwait',
+ 'United Arab Emirates',
+ 'Saudi Arabia',
+ 'Iraq',
+ 'Syria',
+ 'Jordan',
+ 'Turkey',
+ 'Israel',
+ 'Oman',
+ 'Egypt',
+ 'Djibouti',
+]
+
+// 伊朗攻击源 德黑兰 [lng, lat]
+const TEHRAN_SOURCE: [number, number] = [51.389, 35.6892]
+
+function parabolaPath(
+ start: [number, number],
+ end: [number, number],
+ height = 2
+): [number, number][] {
+ const midLng = (start[0] + end[0]) / 2
+ const midLat = (start[1] + end[1]) / 2 + height
+ return [start, [midLng, midLat], end]
+}
+
+type BaseStatus = 'operational' | 'damaged' | 'attacked'
+
+interface KeyLoc {
+ name: string
+ lat: number
+ lng: number
+ type?: string
+ status?: BaseStatus
+ damage_level?: number
+}
+
+function toFeature(loc: KeyLoc, side: 'us' | 'iran', status?: BaseStatus) {
+ return {
+ type: 'Feature' as const,
+ properties: {
+ side,
+ name: loc.name,
+ status: status ?? (loc as KeyLoc & { status?: BaseStatus }).status ?? 'operational',
+ },
+ geometry: {
+ type: 'Point' as const,
+ coordinates: [loc.lng, loc.lat] as [number, number],
+ },
+ }
}
export function WarMap() {
const mapRef = useRef
(null)
+ const animRef = useRef(0)
+ const startRef = useRef(0)
const { situation } = useSituationStore()
const { usForces, iranForces } = situation
- const usMarkers = usForces.keyLocations
- const iranMarkers = iranForces.keyLocations
+ const usLocs = (usForces.keyLocations || []) as KeyLoc[]
+ const irLocs = (iranForces.keyLocations || []) as KeyLoc[]
+
+ const { usNaval, usBaseOp, usBaseDamaged, usBaseAttacked, labelsGeoJson } = useMemo(() => {
+ const naval: GeoJSON.Feature[] = []
+ const op: GeoJSON.Feature[] = []
+ const damaged: GeoJSON.Feature[] = []
+ const attacked: GeoJSON.Feature[] = []
+ const labels: GeoJSON.Feature[] = []
+
+ for (const loc of usLocs as KeyLoc[]) {
+ const f = toFeature(loc, 'us')
+ labels.push({ ...f, properties: { ...f.properties, name: loc.name } })
+ if (loc.type === 'Base') {
+ const s = (loc.status ?? 'operational') as BaseStatus
+ if (s === 'attacked') attacked.push(f)
+ else if (s === 'damaged') damaged.push(f)
+ else op.push(f)
+ } else {
+ naval.push(f)
+ }
+ }
+
+ for (const loc of irLocs) {
+ const f = toFeature(loc, 'iran')
+ labels.push({ ...f, properties: { ...f.properties, name: loc.name } })
+ }
+
+ return {
+ usNaval: { type: 'FeatureCollection' as const, features: naval },
+ usBaseOp: { type: 'FeatureCollection' as const, features: op },
+ usBaseDamaged: { type: 'FeatureCollection' as const, features: damaged },
+ usBaseAttacked: { type: 'FeatureCollection' as const, features: attacked },
+ labelsGeoJson: { type: 'FeatureCollection' as const, features: labels },
+ }
+ }, [usForces.keyLocations, iranForces.keyLocations])
+
+ // 德黑兰到 27 个被袭目标的攻击曲线
+ const attackLinesGeoJson = useMemo(
+ () => ({
+ type: 'FeatureCollection' as const,
+ features: ATTACKED_TARGETS.map((target) => ({
+ type: 'Feature' as const,
+ properties: {},
+ geometry: {
+ type: 'LineString' as const,
+ coordinates: parabolaPath(TEHRAN_SOURCE, target as [number, number]),
+ },
+ })),
+ }),
+ []
+ )
+
+ const hideNonBelligerentLabels = (map: MapboxMap) => {
+ const labelLayers = [
+ 'country-label',
+ 'state-label',
+ 'place-label',
+ 'place-label-capital',
+ 'place-label-city',
+ 'place-label-town',
+ 'place-label-village',
+ 'poi-label',
+ ]
+ for (const id of labelLayers) {
+ try {
+ if (map.getLayer(id)) map.setLayoutProperty(id, 'visibility', 'none')
+ } catch (_) {}
+ }
+ }
+
+ useEffect(() => {
+ const map = mapRef.current?.getMap()
+ if (!map) return
+ startRef.current = performance.now()
+
+ const tick = (t: number) => {
+ const elapsed = t - startRef.current
+ try {
+ if (map.getLayer('attack-lines')) {
+ const offset = (elapsed / 16) * 0.8
+ map.setPaintProperty('attack-lines', 'line-dasharray', [2, 2])
+ map.setPaintProperty('attack-lines', 'line-dash-offset', -offset)
+ }
+ // damaged: 橙色闪烁 opacity 0.5 ~ 1, 约 1s 周期
+ if (map.getLayer('points-damaged')) {
+ const blink = 0.5 + 0.5 * Math.sin(elapsed * 0.003)
+ map.setPaintProperty('points-damaged', 'circle-opacity', blink)
+ }
+ // attacked: 红色脉冲 2s 循环, 扩散半径 0→40px, opacity 1→0 (map.md)
+ if (map.getLayer('points-attacked-pulse')) {
+ const cycle = 2000
+ const phase = (elapsed % cycle) / cycle
+ const r = 40 * phase
+ const opacity = 1 - phase
+ map.setPaintProperty('points-attacked-pulse', 'circle-radius', r)
+ map.setPaintProperty('points-attacked-pulse', 'circle-opacity', opacity)
+ }
+ } catch (_) {}
+ animRef.current = requestAnimationFrame(tick)
+ }
+
+ const start = () => {
+ hideNonBelligerentLabels(map)
+ if (map.getLayer('attack-lines')) {
+ animRef.current = requestAnimationFrame(tick)
+ } else {
+ animRef.current = requestAnimationFrame(start)
+ }
+ }
+ if (map.isStyleLoaded()) start()
+ else map.once('load', start)
+
+ return () => cancelAnimationFrame(animRef.current)
+ }, [])
- // Fallback when no Mapbox token - show placeholder
if (!MAPBOX_TOKEN) {
return (
-
-
- 地图需要 Mapbox 令牌
-
+
+
地图需要 Mapbox 令牌
- 请在 .env 中设置 VITE_MAPBOX_ACCESS_TOKEN
+ 复制 .env.example 为 .env，填入令牌后重启
-
-
-
美方位置
- {usMarkers.map((loc) => (
-
{loc.name}
- ))}
-
-
-
伊方位置
- {iranMarkers.map((loc) => (
-
{loc.name}
- ))}
-
-
+
+ 免费申请 Mapbox 令牌 →
+
)
@@ -59,40 +221,160 @@ export function WarMap() {
mapStyle="mapbox://styles/mapbox/dark-v11"
mapboxAccessToken={MAPBOX_TOKEN}
attributionControl={false}
+ dragRotate={false}
+ touchRotate={false}
style={{ width: '100%', height: '100%' }}
>
- {usMarkers.map((loc) => (
-
-
-
- ))}
- {iranMarkers.map((loc) => (
-
-
-
- ))}
+ {/* 美国海军 - 蓝色 */}
+
+
+
+
+ {/* 美军基地-正常 - 绿色 */}
+
+
+
+
+ {/* 美军基地-损毁 - 橙色闪烁 */}
+
+
+
+
+ {/* 美军基地-遭袭 - 红点 + 脉冲 */}
+
+
+
+
+
+ {/* 伊朗 - 红色 */}
+
toFeature(loc, 'iran')),
+ }}
+ >
+
+
+
+
+
+
+
+ {/* 中文标注 */}
+
+
+
+
+
+ {/* 以色列 mesh 高亮 */}
+
+
+
+
+ {lastError && (
+
+ {lastError}（使用本地缓存，请确保 API + WebSocket 已启动：npm run api）
+
+ )}
@@ -50,10 +58,14 @@ export function Dashboard() {
-
+
+
+
+