一个开源的 3D 地图数据可视化大屏工程：Three.js 渲染带厚度的省级地图，叠加轮廓飞线、侧边扫光、热力与多图表联动，整体按驾驶舱版式布局。仓库以四川省地理轮廓为示例，作者 knight-L，Apache-2.0 协议。

线上预览：[knight-l.github.io/sc-datav](https://knight-l.github.io/sc-datav/)，内置 demo0 ~ demo3 四套不同风格的大屏页面。

说明：它本身不是 SKILL.md 形式的 Agent Skill，而是一套可直接运行的大屏底座。放在这里，是因为「让 Agent 基于成熟模板改大屏」比让它从零写 Three.js 地图靠谱得多。

能做什么

  • 3D 地图：用 D3-geo / TopoJSON 把 GeoJSON 投影成 Three.js 立体地块，边界轮廓精确，可换成任意省市。
  • 动效：轮廓飞线、侧边扫光、GSAP 入场动画，配合 @react-three/postprocessing 做辉光等后期。
  • 图表联动：ECharts 6 柱状、折线等图表围绕地图排布，另带无缝滚动列表组件。
  • 自适应：autofit.js 按设计稿等比缩放，适配普通显示器与大屏拼接。
  • 实时调参：Leva 调试面板直接拖动相机、光照、颜色等参数，调好再写回代码。

技术栈

React 19 + TypeScript、Vite 8、Three.js + @react-three/fiber / drei、ECharts 6、D3-geo、GSAP、Zustand、styled-components、React Router 7。要求 Node.js ≥ 18、pnpm ≥ 8。

怎么用

本地跑起来：

git clone https://github.com/knight-L/sc-datav.git
cd sc-datav
pnpm install
pnpm dev

构建用 pnpm build，预览产物用 pnpm preview。注意 vite.config.ts 里 base 为 /sc-datav/，部署到根路径或其他子路径时要先改掉。

交给 Agent 改造时，把仓库克隆进工作区，再明确告诉它参照哪一页、换什么，例如：

  • 「参考 src/pages/Demo1，把地图换成浙江省（GeoJSON 放 src/assets/），左右两栏改成园区能耗与告警统计，数据先 mock，留好接口位。」
  • 「保留飞线和扫光效果，主色从蓝改成青绿，用 Leva 面板把相机初始角度调低 15°。」

地图贴图可以用作者的另一个工具 [sat-hunter](https://github.com/knight-L/sat-hunter) 下载目标区域卫星底图。

何时用

  • 需要一块带 3D 地图的驾驶舱大屏：智慧城市、数字园区、政务 / 指挥中心、企业经营看板
  • 想要飞线、扫光这类「大屏味」动效，但不想从零调 Three.js 着色器
  • 团队技术栈本来就是 React + TypeScript，接受 Vite 工程而不是单文件 HTML

如果只要一页纯 ECharts 看板、不需要 3D 地图，用单文件 HTML 方案会更轻。