# OSCHINA **Repository Path**: wdracky/oschina ## Basic Information - **Project Name**: OSCHINA - **Description**: No description available - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-10-14 - **Last Updated**: 2026-10-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # HighwayStream · 海量空间数据流式高性能渲染 > OS2026 上海开源软件应用创新大赛 · 赛道一（AI+工业软件）· 百度地图赛题 > **基于百度地图 JSAPI 的海量空间数据流式高性能渲染技术** 百万级空间要素在浏览器地图上的流式加载与高性能渲染，面向公路勘察设计等海量线性空间数据场景。 **代码仓库**：[Gitee](https://gitee.com/wdracky/oschina)（Apache-2.0，公开） **演示导播台**（项目介绍视频 / 现场演示用）：启动服务端后打开 `http://localhost:8010/web/tour_live.html`—— 左侧为**实时可操控的演示地图**，右侧操作台每个按钮都真实操作地图（飞走廊 / 分层显隐 / 车流 / 缩放 / 切换 GPU 渲染路径 / 18s 基准巡航），实时指标面板同步显示 FPS 与要素数。 4 分钟时间轴自动导播；**若百度地图 JSAPI 因 AK 白名单或网络不可用，25 秒后自动降级为 「静态证据模式」**——全部实测截图与数据图表均为本地预存（`docs/screenshots/`、`docs/charts/`， 并随导播台分发一份至 `web/shots/`、`web/charts/`），以相对路径引用，**直接双击 `web/tour_live.html`（file:// 协议）同样完整可用**，点击可放大，完全无需实时网络即可完成演示与录屏。 ## 快速开始 ```bash # 1. 生成仿真数据集（120km 高速走廊 / 120,000 设施点 / 1,378 瓦片） python data/gen_corridor.py # 2. 启动瓦片服务端（零依赖，Python 3.8+） python server/tile_server.py --port 8000 # 3. 打开 http://localhost:8000/web/ ``` 服务端自检与压测： ```bash python server/verify_e2e.py # 47 项端到端断言（服务未运行时会自动拉起） python tools/loadtest.py # 瓦片 QPS / 延迟分位 / 304 命中率 ``` > **AK 说明**：`web/config.js` 中已配置百度地图 JSAPI AK。JSAPI AK 按设计随前端下发， > 但请先在[百度地图开放平台控制台](https://lbsyun.baidu.com/)为该 AK 配置 Referer 白名单 > （加入 `http://localhost:8000`），防止额度被盗用。若加载失败，页面会给出排查提示。 ## 解决什么问题 公路勘察设计成果天然是海量线性空间数据：一条 120km 的高速走廊，线形中心线、桥梁、隧道、 涵洞、门架、摄像头等要素轻松达到 10^5 量级。传统"一次性全量加载 + 逐个加 Marker"的方案 在浏览器里会直接卡死。本项目回答三个问题： 1. **流式**：数据按视口 XYZ 瓦片渐进加载，SSE 推送实时车辆流，首屏不等全量； 2. **高性能**：GPU 路径 WebGLCustomLayer POINTS 批量绘制（`?renderer=gl`）， 兼容路径 9 层 PointCollection canvas 批量（`?renderer=pc`）+ 视口剔除 + LOD 降采样； 3. **可量化**：内置基准巡航（自动飞行动画 + FPS/传输量采样 + 服务端落报告）， 并与"逐个加 Marker"的传统基线对比。 ## 架构 ``` ┌───────────────────────── 浏览器 ─────────────────────────┐ │ 渲染后端（?renderer=gl｜pc，同一数据管线） │ │ gl: JSAPI v4.0 · WebGLCustomLayer ×9（GPU POINTS 批量） │ │ + 中心线 LINE_STRIP │ │ pc: JSAPI v2.0 · PointCollection ×9（canvas 批量） │ │ ▲ 视口驱动 │ setAttribute / setPoints(批量) │ │ ┌──────┴──────┐ ┌────────┴────────┐ ┌─────────────┐ │ │ │ 瓦片调度器 │→ │ Web Worker 解析 │→ │ 分层渲染数据 │ │ │ │ 并发6/LRU │ │ JSON.parse + │ │ Float32 数组 │ │ │ │ 防抖60ms │ │ WGS84→BD-09 转换│ │ BMap.Point[]│ │ │ └──────┬──────┘ └─────────────────┘ └─────────────┘ │ │ │ fetch /tiles/{z}/{x}/{y}.json │ │ │ EventSource /api/vehicles/stream (SSE 车流) │ └────────┼─────────────────────────────────────────────────┘ │ ┌────────┴───────── 服务端（Python 标准库，零依赖）─────────┐ │ /tiles/ 预压缩 gz + ETag 协商缓存 + 空瓦片负缓存 │ │ /api/corridor 中心线全量（Polyline 图层） │ │ /api/vehicles/stream SSE：2000 辆车 / 0.5s │ │ /api/bench 客户端基准结果落盘 │ └──────────────────────────────────────────────────────────┘ ``` ## 性能数据（实测） 测试环境：本机 Windows + Python 3.13 stdlib 服务端，数据集 12 万点 / 1,378 瓦片 / 3.3MB gz。 | 指标 | 数值 | 说明 | |---|---|---| | 瓦片平均体积 | 2.8 KB（gz） | z12-z14 混合采样 | | 并发 8 QPS | **868** | p50 6.5ms / p95 22.2ms / p99 33.6ms | | 并发 1 QPS | 78 | p50 9.1ms | | 304 协商缓存命中 | **600/600（100%）** | 二次访问零传输 | | SSE 车流 | 2 帧/s × 2000 辆 | 平均帧 ~51KB（含 HTTP 头） | | 端到端自检 | **47/47 通过** | `server/verify_e2e.py` | 客户端渲染指标（FPS / 可见要素数）由页面内置基准巡航实测并上报 `POST /api/bench`， 报告存于 `reports/bench_*.json`；浏览器端实测数据填入 `docs/PERF.md`。 **生产化说明**：服务端为 Python stdlib 实现，面向零依赖一键复现；高并发场景可无缝替换为 nginx/Caddy 静态服务（仓库附 `docs/ARCHITECTURE.md` 中的 nginx 配置）——瓦片文件本身就是 静态资产，替换零成本，服务端 p95 < 25ms 已不构成交互瓶颈。 ## 实测截图 以下为 agent-browser（Chrome 155）自动化实测截图，完整过程可复现 （`sh tools/final_bench.sh`）： | 初始加载完成（零交互，2,884 要素上屏） | 基准巡航结果（18s 压力巡航） | 传统基线：3,000 个独立 Marker | |---|---|---| | ![初始加载](docs/screenshots/01_loaded.png) | ![基准结果](docs/screenshots/02_bench_result.png) | ![基线对比](docs/screenshots/03_baseline_result.png) | 巡航实测（Headless Chrome 软件渲染、视口 1258×566、z12–z14 连续飞越 120km 走廊）： | 指标 | 历史环境实测 | 当前环境复测 | |---|---|---| | 平均 FPS / P10 / 最低 | 18.8 / 5 / 3 | 9.2 / 3 / 3 | | 18s 巡航瓦片请求 | **563**（流式加载真实发生） | 60–108 | | 18s 巡航传输量 | **16.6 MB**（gz） | 313–502 KB | | 可见要素峰值 | **27,429**（z14 单视口） | 2,884（层级回退，见 PERF.md §3.5） | | 主线程繁忙度 / JS 堆 | — / — | 24.6%–29.9% / 12.8–20.2 MB | 两组数据均为无 GPU 无头环境（软件渲染）真实实测，差异来自浏览器构建与机器负载； 共同结论：瓶颈在软件渲染持续重绘数万点位，服务端瓦片链路 p95 < 25ms 不构成瓶颈。 静态对照（仅渲染初始视口 2,884 点）为 51–56 FPS。GPU 路径（`?renderer=gl`， WebGLCustomLayer）需真实 GPU 浏览器发挥完整性能，无头环境限制与验证记录见 `docs/PERF.md` §4。 ## 目录结构 ``` 仓库根目录/ ├── README.md ← 本文件 ├── 演示口播稿.md ← 4 分钟演示口播稿（与 tour_live.html 导播台逐章对应） ├── data/ │ ├── gen_corridor.py ← 仿真数据生成器（确定性、纯标准库） │ ├── corridor_centerline.geojson │ ├── facilities.json.gz ← 120,000 设施点（生成产物） │ ├── tiles/{z}/{x}/{y}.json.gz ← 瓦片金字塔 z10-z14（生成产物） │ └── manifest.json ├── server/ │ ├── tile_server.py ← 瓦片服务端（零依赖） │ └── verify_e2e.py ← 47 项端到端断言 ├── web/ │ ├── index.html / style.css │ ├── config.js ← AK 与渲染参数 │ ├── coord.js ← WGS-84 → GCJ-02 → BD-09 客户端转换管线 │ ├── gl_layer.js ← WebGLCustomLayer GPU 渲染后端（?renderer=gl） │ ├── app.js ← 渲染引擎（瓦片调度/Worker/双渲染后端/基准） │ ├── tour.html ← 项目介绍录屏引导页（7 章分镜导航） │ ├── tour_live.html ← 交互式演示导播台：iframe 实时地图 + 一键操作台 + 实时指标面板（4 分钟自动导播） │ ├── shots/ charts/ ← 预存实测截图与数据图表（导播台本地引用，file:// 可用） ├── tools/ │ ├── loadtest.py ← 服务端压测（--base 指定端口） │ ├── client_bench.js ← 无人值守客户端巡航 + 截图 + GPU 探针一条龙 │ ├── make_charts.py ← 从实测 JSON 生成 5 张 SVG 数据图表（docs/charts/） │ ├── make_pdf.py ← 项目介绍文档 md → PDF（Chrome 打印管线） │ ├── verify_tour.js ← 导播台端到端验证（iframe 就绪/按钮链路/破图检测） │ └── final_bench.sh ← 浏览器端自动基准巡航（截图+采集，需 agent-browser） ├── submission/ ← 大赛申报材料（01 参赛方案 / 02 评审四维应答 / 03 性能实测报告 / │ 04 演示视频脚本 / 05 报名信息速查 / 06 评委问答准备 / 07 申报邮件稿件） ├── docs/ │ ├── ARCHITECTURE.md ← 技术方案详设 │ ├── PERF.md ← 性能报告（含实测数据与工程迭代记录） │ ├── DEMO_VIDEO_SCRIPT.md ← 90 秒演示视频分镜脚本 │ └── screenshots/ ← 浏览器实测截图 └── reports/ ← 基准巡航服务端存档（bench_*.json） ``` ## 关键技术点（对着赛题要求） | 赛题要求 | 实现 | |---|---| | 基于 WebGLLayer 的高性能渲染 | **WebGLCustomLayer**（JSAPI v4.0）：9 类设施点各一个自定义 WebGL 图层，POINTS 批量绘制；中心线 LINE_STRIP 按可见段绘制；`type:'lnglat'` 属性内部投影 + `referCenter` 防 float32 精度抖动（`?renderer=gl` 切换，兼容路径 `?renderer=pc` 走 PointCollection） | | 海量空间数据 | 120,000 设施点 + 1,201 顶点线形，对标勘察设计成果量级 | | 流式 | XYZ 瓦片视口驱动渐进加载（并发 6 + LRU 600）+ SSE 实时车流；Web Worker 内解析 + 坐标转换不阻塞主线程 | | 可量化验证 | 内置基准巡航（`?autobench=1` 无人值守）+ 传统 Marker 基线对比 + 服务端压测报告 | | 工程严谨性 | ETag/304、空瓦片负缓存、防路径穿越、135 项断言、Apache-2.0 | ## 路线图 - [ ] 接入勘察设计单位生产数据管道（行业瓦片规范） - [ ] MVT（Mapbox Vector Tile）瓦片格式 + 真实 LOD 几何简化 - [x] WebGL 自定义图层（BMap.WebGLCustomLayer GPU 批量渲染，?renderer=gl） - [ ] 100 万点规模冲刺 + 真实 GPU 环境基准回填 - [ ] 瓦片服务端生产化：nginx 静态化 + CDN ## 许可 Apache-2.0