## 1. 项目简介

`bilawalsidhu/gods-eye-view` 是一个在浏览器中运行的实时开源情报（OSINT）可视化项目。它把一颗照片级渲染的 3D 地球放进网页，并在球面上实时叠加全球飞机、船只、卫星等动态目标，让用户像“上帝视角”一样观察整个星球的交通与太空活动。

最近该项目热度持续攀升，日增 Star 约 1.8k – 3.8k，在 JavaScript 开源项目中表现非常亮眼。它的吸引力在于：不需要安装任何客户端，打开浏览器就能看到一颗逼真的地球，上面不断流动着来自真实世界的 ADS-B（飞机广播式自动相关监视）和 AIS（船舶自动识别系统）轨迹。

## 2. 核心亮点

- **照片级 3D 地球**：基于 Cesium/WebGL 渲染，支持昼夜、地形、大气、卫星影像等高质量视觉效果。
- **实时轨迹叠加**：将 ADS-B、AIS 等公开实时数据源渲染为地球表面的动态标记与飞行/航行轨迹。
- **多目标类型**：覆盖飞机、船舶以及卫星等不同类型的运动目标。
- **纯浏览器运行**：无需后端私有数据源，前端直接消费实时数据流。
- **开源情报属性**：数据来自公开渠道，适合技术研究、数据可视化学习和开源情报演示。

## 3. 技术原理

### 3.1 Cesium / WebGL 三维球体

项目的可视化底座是 Cesium，一个基于 WebGL 的开源三维地球引擎。Cesium 负责：

- 构建可交互、可旋转缩放的全球三维场景；
- 加载高精度地形和影像图层；
- 提供相机、时钟、实体（Entity）等高层 API，方便把动态数据绑定到地球表面。

```js
const viewer = new Cesium.Viewer("cesiumContainer", {
  terrain: Cesium.Terrain.fromWorldTerrain(),
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(
    Cesium.TileMapServiceImageryProvider.fromUrl(
      Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
    )
  ),
});
```

### 3.2 实时开源轨迹流

飞机和船只的位置分别来自两类公开数据源：

- **ADS-B**：飞机通过广播方式周期性发送自身的位置、速度、高度、呼号等信息。社区项目（如 OpenSky Network、ADS-B Exchange 等）汇聚这些信号并提供公开 API。
- **AIS**：船舶自动识别系统，船只会广播位置、航向、船名、MMSI 等数据，同样有公开聚合接口。

前端通过 WebSocket 或轮询接口获取实时数据，再把每条记录转换为 Cesium 实体并更新其位置：

```js
function upsertAircraft(record) {
  const position = Cesium.Cartesian3.fromDegrees(
    record.longitude,
    record.latitude,
    record.altitude ?? 0
  );

  const entity = viewer.entities.getById(`aircraft-${record.icao24}`);
  if (entity) {
    // 更新已有实体位置
    entity.position = new Cesium.ConstantPositionProperty(position);
  } else {
    // 新建飞机实体
    viewer.entities.add({
      id: `aircraft-${record.icao24}`,
      position,
      point: {
        pixelSize: 6,
        color: Cesium.Color.fromCssColorString("#ffd166"),
      },
      label: {
        text: record.callsign ?? record.icao24,
        font: "12px sans-serif",
        pixelOffset: new Cesium.Cartesian2(0, -12),
      },
    });
  }
}
```

船舶的处理方式类似，只是数据字段从 `icao24/callsign` 换成 `mmsi/name`，颜色和图标也可以区分显示。

### 3.3 数据流与渲染管线

整体流程可以概括为：

```mermaid
flowchart LR
  A["公开数据源 ADS-B / AIS"] --> B["WebSocket / API 获取"]
  B --> C["数据解析与过滤"]
  C --> D["映射为 Cesium Entity"]
  D --> E["地球表面实时渲染"]
```

实时数据通常包含大量噪声和无效位置，因此还需要在解析阶段做经纬度合法性校验、时间戳去重等处理，避免出现数据跳变。

## 4. 快速上手

在本地运行项目，大致流程如下：

```bash
# 克隆仓库
git clone https://github.com/bilawalsidhu/gods-eye-view.git
cd gods-eye-view

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

启动后浏览器会打开本地页面，加载一颗 3D 地球。如果数据源接口需要 API Key，需要在配置文件中填写，然后即可看到实时飞机和船只的轨迹。

## 6. 应用场景与排查

运行 `gods-eye-view` 时，如果页面没有出现预期的实时轨迹，可以按下面几类典型问题逐项排查。

### 5.1 API Key 缺失或配置错误

**现象**：控制台报 `401 Unauthorized`、`API key is required`，或接口返回空数据。

**排查步骤**：

1. 打开项目中的配置文件（如 `.env`、`config.js` 或数据服务配置）。
2. 检查是否已填写 ADS-B / AIS 服务要求的 API Key。
3. 确认 Key 没有多余空格、引号，且与数据源平台后台一致。

**代码检查点**：

```js
const API_KEY = import.meta.env.VITE_ADS_B_API_KEY;
if (!API_KEY) {
  console.error("VITE_ADS_B_API_KEY 未配置");
}
```

### 5.2 WebSocket 连接失败

**现象**：浏览器控制台出现 `WebSocket connection failed`、`ws://...` 连接被拒绝，或连接后立即断开。

**排查步骤**：

1. 确认远程 WebSocket 地址可访问，先使用在线工具或 `wscat` 测试。
2. 检查页面是通过 `https` 打开，而 WebSocket 地址是否为 `wss://`；浏览器会拦截混合内容。
3. 查看网络层面是否受防火墙、代理或跨域策略影响。

**代码检查点**：

```js
const ws = new WebSocket("wss://example.com/stream");
ws.onopen = () => console.log("WebSocket 已连接");
ws.onerror = (err) => console.error("WebSocket 错误", err);
ws.onclose = (evt) => console.warn("连接关闭", evt.code, evt.reason);
```

### 5.3 实体不显示或位置异常

**现象**：地球显示正常，但看不到飞机/船只图标，或实体位置跳变、飞出画面。

**排查步骤**：

1. 确认实时数据中经纬度字段存在且合法（经度 `-180~180`，纬度 `-90~90`）。
2. 检查实体 `id` 是否与更新逻辑一致，避免同一目标重复创建。
3. 确认 Cesium `viewer.entities` 中已添加实体，并打开 `viewer.zoomTo(entity)` 快速定位验证。

**代码检查点**：

```js
function isValidLngLat(lng, lat) {
  return (
    Number.isFinite(lng) && Number.isFinite(lat) &&
    lng >= -180 && lng <= 180 &&
    lat >= -90 && lat <= 90
  );
}

if (isValidLngLat(record.longitude, record.latitude)) {
  upsertAircraft(record);
} else {
  console.warn("忽略无效坐标", record);
}
```

### 5.4 性能卡顿或帧率下降

**现象**：目标数量增多后页面掉帧、交互变卡，甚至浏览器无响应。

**排查步骤**：

1. 限制同一时间渲染的实体数量，优先展示可见区域或最近更新的目标。
2. 避免在每个数据帧中创建大量新实体，尽量复用已有实体并更新位置。
3. 对高频数据做节流/批量更新，例如每 1 秒合并刷新一次，而不是每条记录立即刷新。

**代码检查点**：

```js
const MAX_ENTITIES = 500;
if (viewer.entities.values.length > MAX_ENTITIES) {
  const oldest = viewer.entities.values[0];
  viewer.entities.remove(oldest);
}
```

排查完上述问题后，如果仍然异常，可以在浏览器开发者工具中查看网络请求状态、Console 报错及 Performance 面板，进一步定位瓶颈。

## 5. 应用场景

- **技术学习**：理解 Cesium 三维渲染、WebSocket 实时数据流、地理坐标系转换等前端可视化技术。
- **开源情报演示**：直观展示公开 ADS-B/AIS 数据的规模与实时性，用于教学、演讲和安全意识科普。
- **数据可视化灵感**：借鉴“地图 + 实时点 + 轨迹”的交互模式，迁移到物流、航班、船舶监控等业务场景。
- **个人兴趣项目**：航空爱好者、航海爱好者可以用它观察全球交通脉搏。

## 7. 总结
`gods-eye-view` 的价值在于把两个成熟能力组合起来：Cesium 提供高质量三维地球渲染，公开 ADS-B/AIS 流提供真实世界的实时运动数据，再通过简洁的前端逻辑将它们叠加展示。它代码规模不大，却是学习“实时数据可视化 + 三维地理信息”的绝佳范例，也难怪能在短时间内收获大量开发者关注。

如果你对全球实时态势可视化感兴趣，这个项目是一个很值得阅读源码和动手复现的起点。

bilawalsidhu/gods-eye-view 是一个在浏览器中运行的实时开源情报（OSINT）可视化项目。它把一颗照片级渲染的 3D 地球放进网页，并在球面上实时叠加全球飞机、船只、卫星等动态目标，让用户像“上帝视角”一样观察整个星球的交通与太空活动。

“实时数据可视化 + 三维地理信息-高质量三维地球渲染

前端

开发工具

人工智能

bilawalsidhu/gods-eye-view是一款浏览器端开源OSINT可视化工具，基于Cesium/WebGL将照片级3D地球与ADS-B飞机、AIS船舶等公开实时数据流叠加，实现全球动态目标追踪。无需安装客户端，打开网页即可观察真实世界交通轨迹，适合技术学习、开源情报演示及数据可视化实践，近期GitHub热度激增。

数据可视化

代码解释

服务器

防火墙

数据流

WebSocket

2026上云采购 | AI焕新·智启新局

coding

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

bilawalsidhu/gods-eye-view是一款浏览器端开源OSINT可视化工具，基于Cesium/WebGL将照片级3D地球与ADS-B飞机、AIS船舶等公开实时数据流叠加，实现全球动态目标追踪。无需安装客户端，打开网页即可观察真实世界交通轨迹，适合技术学习、开源情报演示及数据可视化实践，近期GitHub热...

“实时数据可视化 + 三维地理信息-高质量三维地球渲染-腾讯云开发者社区-腾讯云

“实时数据可视化 + 三维地理信息-高质量三维地球渲染

“实时数据可视化 + 三维地理信息-高质量三维地球渲染

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐