Giuseppe84-code/Worldview-project

# WorldView — 地理空间 OSINT 指挥中心     一个实时态势感知仪表板，将公共数据源——航班、船舶、卫星、地震、GPS 干扰区——聚合到单个正交投影地球仪中。完全在浏览器中运行，可安装为 PWA，无需后端。 **在线演示：** https://giuseppe84-code.github.io/Worldview-project/ **咨询方案：** https://giuseppe84-code.github.io/Worldview-project/landing.html  ## 问题 OSINT 实践者、海事安全分析师和新闻编辑室研究人员需要关联多个实时地理空间数据源，以**当下**评估某地区正在发生的情况。现有工具存在两种失效模式： - **企业级方案**（Flightradar24、MarineTraffic、Palantir 类平台）成本高昂、领域孤岛化，需要席位许可或服务器部署。 - **业余工具**在 GitHub 上通常只选取单一数据源（航班 *或* 船舶），并以原始数据表格呈现，而非地理空间画面。 中间地带缺失：一个轻量级、移动友好、多源实时的态势视图，让单人分析师可在手机上安装并在事件期间打开使用。 ## 方法 构建一个单页客户端应用，擅长三件事： 1. **在交互式正交投影地球仪上展示**，支持主流触摸手势（拖拽、捏合、点击）与桌面键盘控制。 2. **实时聚合免费公共数据源**——ADS‑B、AIS、轨道要素、USGS 地震——每种数据源以其原生频率（流式 vs 轮询）接入。 3. **在单一 Canvas 上渲染整个 HUD**，由确定性动画循环驱动，即使视野内有数千个实体也能保持流畅性能。 无后端、无认证、无数据库。整个产品是一个约 85 kB 压缩的 JavaScript 捆绑包，以静态站点形式提供。 ## 关键技术决策 ### 1. 使用 D3 正交投影在 Canvas 上渲染，而非 Mapbox / Leaflet **理由。** Mapbox 与 Leaflet 基于墨卡托投影并依赖瓦片图层，而产品需要一个 3D 感性的地球仪，能够优雅地处理反子午线与极点，同时以 60 fps 在手机上渲染 500+ 动画标记。瓦片会带来带宽、网络请求与内存开销；SVG DOM 在标记数量上会卡顿。 **接受的折衷。** 不内置光栅底图。国家边界来自 TopoJSON 文件（`world-atlas`，约 100 kB），在客户端解码——足以提供地缘政治背景，不使用卫星影像。若客户需要影像，可替换为在片段管线中采样的预渲染等矩形纹理。 ### 2. 纯客户端架构 **理由。** 每个候选数据源均提供跨域友好的 REST 或 WebSocket 端点。移除后端可降低托管成本、认证面与大部分运维风险，也使代码库可复用为白牌资产：只需替换一组数据源 URL，重新构建并发布即可。 **接受的折衷。** 需要 API 密钥的服务（如 aisstream.io）密钥保存在 `localStorage` 中——由用户自行提供。这对分析师级工具可行；若要作为多租户 SaaS 使用，则需要代理层。 ### 3. WebSocket 用于 AIS，其余使用轮询 **理由。** AIS 位置每秒变化；一艘出现后 30 秒未更新的船舶已无价值。`aisstream.io` 提供基于 bbox 过滤的 WebSocket，仅推送视图区域内的数据。OpenSky 的航班、CelesTrak 的卫星与 USGS 地震按分钟级更新——使用后台轮询更简单，也更尊重其速率限制。 **难点：二进制帧。** `aisstream.io` 通过 WSS 订阅但载荷为**二进制**（Blob 或 ArrayBuffer），而非文本。初始的朴素处理（`typeof ev.data === "string"`）静默丢弃了每一帧。修复方法强制设置 `ws.binaryType = "arraybuffer"`，用 `TextDecoder("utf-8")` 解码，并通过共享的 `processMsg` 管道处理文本与二进制路径。诊断子面板（Shift+D）展示每计数器指标——`parseErr`、`binary`、`apiError`、`handlerErr`——使未来边缘情况可自我报告而非静默失败。 ### 4. 重连 + 看门狗 长生命 WebSocket 在野外易断：手机休眠、代理空闲、网络波动。AIS 客户端跟踪 `lastMsgAt`；若 45 秒内无帧到达，10 秒看门狗会触发重连。重连采用指数退避，上限为 30 秒，在移动网络上可靠。 ### 5. PWA：HTML 网络优先，资源哈希缓存 **理由。** 野外分析师可能失去连接。Service Worker 缓存最后一次成功的 HTML 与所有哈希化的 JS/CSS，使应用可离线启动。新部署可立即被获取，因为 HTML 使用 `network-first` 并回退到缓存——哪个捆绑包被新鲜 HTML 引用即使用哪个。 实时数据流**明确不缓存**（否则会提供过期位置）。 ### 6. CI/CD 通过 GitHub Actions 部署到 `gh-pages` 每次推送到 `main` 触发工作流，执行 `npm ci && npm run build` 并通过 `peaceiris/actions-gh-pages` 发布到 `gh-pages` 分支。并发保护确保重叠部署会取消旧运行。零手动步骤；特性分支 → PR → 合并 → 上线流程约 60 秒。 ### 7. LocalStorage 保存用户状态 区域选择、可视化过滤器、船舶类型过滤器、AIS 密钥均在重载间持久化。廉价、无需同步服务器、离线可用。 ## 结果 | 指标 | 值 | |---|---| | JS 捆绑包（压缩后） | ~84 kB | | 4G 冷启动耗时 | < 2 秒 | | 60 fps 下的实时标记预算 | 中端 Android 上 500+ | | 并发数据源 | 5（ADS‑B 轮询、AIS 流、卫星轮询、地震轮询、TopoJSON） | | 静态资源数量 | 6（HTML + JS + CSS + 3 个图标） | | 后端 | 无 | | 每月基础设施成本 | $0（GitHub Pages） | ## 生产环境功能 - 正交投影地球仪，支持触摸拖拽旋转、捏合/滚轮缩放、键盘控制（方向键、±、/、Esc、1‑4 区域切换、F 过滤循环） - 实时 ADS‑B 航班追踪，含军用呼号高亮与 15 秒刷新 - 通过 WebSocket 实时获取 AIS 船舶，按类型过滤标签（海军 / 油轮 / 货船 / 客轮 / 其他）、航向矢量与类型着色 - 基于 CelesTrak GP 要素（Kepler + J2）的卫星轨道实时推算 - USGS 地震数据，标记大小随震级缩放 - 发布的 GPS 干扰区叠加层 - 视觉过滤器：NVG、FLIR、SIGINT、默认——不同分析上下文使用不同配色方案 - 白天/黑夜分界线、UTC 时钟、针对中东、美洲、欧洲与全球的区域边界框 - 搜索栏，支持国家、城市、军事机场、高价值目标检索 - 移动端优先响应式 UI，含 PWA 安装提示与离线回退 ## 技术栈 React 18 · Vite · D3.js（`geoOrthographic`）· Canvas 2D · WebSocket · Service Worker · GitHub Actions ## 本地运行 ``` npm install npm run dev # dev server on http://localhost:5173 npm run build # production bundle in dist/ ``` 如需实时 AIS 数据，请在 [aisstream.io](https://aisstream.io) 获取免费 API 密钥并粘贴到“船舶”面板——密钥仅保存在浏览器的 `localStorage` 中。 ## 数据来源 | 来源 | 数据源 | 频率 | |---|---|---| | [OpenSky Network](https://opensky-network.org/) | ADS‑B 航班 | 15 秒轮询 | [aisstream.io](https://aisstream.io) | AIS 船舶位置 | WebSocket 流 | | [CelesTrak](https://celestrak.org/) | 卫星轨道要素 | 5 分钟轮询 | | [USGS](https://earthquake.usgs.gov/) | 地震事件 | 2 分钟轮询 | | [world-atlas](https://github.com/topojson/world-atlas) | 国家边界（TopoJSON） | 加载时 | 所有数据均为公开 OSINT。不适用于操作认证用途。 ## 关于 由 [Giuseppe84-code](https://github.com/Giuseppe84-code) 构建。提供定制地理空间 / 实时数据仪表板服务——海事安全、冲突监测、新闻编辑室工具、内部 SOC 可视化。欢迎在 GitHub 提交问题或通过上方个人资料联系。 ## 许可证 MIT

标签：ADS-B, GPS干扰, HTTP/HTTPS抓包, OSINT工具, PWA, SEO: PWA态势感知, SEO: 实时OSINT, SEO: 浏览器地球仪, USGS地震, 交互式地球仪, 公共数据源, 单页应用, 卫星轨道, 地理可视化, 地理空间, 地震数据, 实时OSINT, 实时数据聚合, 客户端仅应用, 开源监控, 态势仪表盘, 态势感知, 捏合缩放, 新闻调研, 无后端, 正交投影, 浏览器应用, 海事安全, 移动优先, 移动端分析, 自定义脚本, 航班追踪, 船舶AIS, 触摸拖拽, 键盘控制