Wing Fleet Dashboard
htlee
81fb4a2bca
gc-wing-simple의 SVG 기반 선종별 아이콘 시스템을 도입하여 기타 AIS 선박을 8종 선종별 색상+형태(이동:화살표/정지:원형)로 구분하고, 대상 선박에는 legacy code 색상 + 브리딩 링 강조 효과를 적용한다. - shipKind.ts: 선종별 SVG 생성기 + 아이콘 스펙 사전 생성 - Mercator: 기타 AIS 20px SVG IconLayer, 대상 선박 26px SVG IconLayer - Globe: signalKindCode 기반 색상, 대상 선박 1.3x 크기 - 브리딩 rAF: 시안(선택)/주황(강조) 링, 2000ms 주기 - 범례: "기타 AIS(선종)" 7항목으로 변경 - shipIconCache.ts, SHIP_ICON_MAPPING 삭제 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| .claude | ||
| .gitea/workflows | ||
| .githooks | ||
| apps | ||
| data/raw/zones | ||
| legacy | ||
| packages/ui | ||
| scripts | ||
| .editorconfig | ||
| .gitignore | ||
| .node-version | ||
| .npmrc | ||
| .prettierrc | ||
| CLAUDE.md | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
WING Fleet Dashboard (Prototype to Project)
This repo started as a single HTML prototype and is being refactored into a structured React + TypeScript project.
Layout
legacy/: original single-file HTML prototype (reference)data/raw/zones/: raw GeoJSON zone polygons as receivedapps/web/: React + TS frontend (MapLibre GL JS + Deck.gl, single WebGL context)apps/api/: optional API server (proxy/stub)scripts/: data preparation scripts (e.g. zone reprojection)
What Works Now (GIS Demo)
- Live AIS polling (initial 10 minutes, then every 1 minute / last 2 minutes incremental) with MMSI upsert store:
- frontend hook:
apps/web/src/features/aisPolling/useAisTargetPolling.ts - API proxy (CORS safe):
apps/api/src/index.ts(GET /api/ais-target/search?minutes=...&bbox=...)
- frontend hook:
- MapLibre basemap:
- default (no MapTiler key): local raster style + OpenSeaMap seamark overlay:
apps/web/public/map/styles/osm-seamark.json - optional (recommended): MapTiler
dataviz-dark+ Ocean (bathymetry) vector overlays, plus OpenSeaMap seamark raster overlay
- default (no MapTiler key): local raster style + OpenSeaMap seamark overlay:
- Deck.gl layers rendered into MapLibre WebGL context (single context via
MapboxOverlay):- ships
IconLayer, zonesGeoJsonLayer, optional 3D densityHexagonLayer - map widget:
apps/web/src/widgets/map3d/Map3D.tsx
- ships
- Zone polygons converted to WGS84 GeoJSON:
- input:
data/raw/zones/*.json - build:
pnpm prepare:data->apps/web/public/data/zones/zones.wgs84.geojson
- input:
- Legacy CN-permit overlay (name/callsign/mmsi match; ring + color by 업종):
- legacy sources:
legacy/*.xlsx,legacy/*.jsx - build:
pnpm prepare:data->apps/web/public/data/legacy/chinese-permitted.v1.json
- legacy sources:
Quick Start
pnpm installpnpm prepare:datapnpm dev:web- (optional)
pnpm dev:api# only needed when you start adding DB-backed/local APIs
API server (optional): pnpm dev:api (defaults to http://127.0.0.1:5174)
Ports (dev):
- Web (Vite):
http://127.0.0.1:5175(default, strict). Change viaWEB_PORT=.... - API (Fastify):
http://127.0.0.1:5174(default). Change viaPORT=....and matchAPI_PORT=....for the web proxy.
Vite proxy (dev):
/snp-api/*->http://211.208.115.83:8041(override viaVITE_SNP_API_TARGET=...)
MapTiler (Optional, Bathymetry Vector Map)
To enable a dark-mode basemap + bathymetry (MapTiler Ocean tiles):
- Create a free MapTiler Cloud account and get an API key
- Set env vars for the web app:
# enables MapTiler style + ocean bathymetry layers in MapLibre
VITE_MAPTILER_KEY="YOUR_KEY"
# optional: change basemap style id (default: dataviz-dark)
VITE_MAPTILER_BASE_MAP_ID="dataviz-dark"