- 本项目将remotion所有的skills技能全部汉化，在.opencode/skills/remotion-best-practices-zh文件夹下
- 另外本项目搭建了一个基本的地图视频案例。
Install Dependencies
npm iStart Preview
项目名： 全国省级 GDP 可视化（Remotion + D3 + TopoJSON）
简介
- 这是一个基于 Remotion 的视频/演示工程，使用 D3 与 TopoJSON 渲染中国省级地图，并按 GDP 排名逐省放大镜头，展示 3D 凸出效果与动态 GDP 数值。
- 地图数据请放在
public/china-provinces.json（TopoJSON，feature.properties 需包含省份名称字段），GDP 数据请放在public/gdp-data.json（键为省份名称，值为数值）。
主要功能
- 全国到省级的镜头推进与回缩（可配置时长）。
- 选中省份的“3D 凸出”视觉效果（通过多层偏移模拟挤出）。
- 右上角按出现顺序显示 GDP 排行榜，随着镜头进度逐项淡入。
- 每个省出现时展示动态计数的 GDP 数值。
运行（开发预览）
- 安装依赖：
npm install- 启动 Remotion Studio（打开预览页面，通常在 http://localhost:3000）：
npm run dev- 在 Studio 中选择相应的合成（composition）来预览动画或帧。
渲染最终视频
npm run build
# 或使用 remotion CLI 精确渲染
npx remotion render <entry> <composition> --codec=vp9文件说明
src/ChinaMap.tsx：地图主组件（加载 TopoJSON 与 GDP 数据，控制镜头与动画）。public/china-provinces.json：TopoJSON 地理数据（需自行提供）。public/gdp-data.json：省级 GDP 数据（JSON 对象，键为省名）。
自定义与调优
- 可修改
src/ChinaMap.tsx中的参数：入/出场时长、展示时长、最大凸出像素（extrude）、缓动函数等，以获得不同视觉节奏。
常见问题
- 如果出现空白或定位偏移：确认 TopoJSON 的坐标系与
geoMercator()兼容，且properties.name与gdp-data.json的键完全一致（包含“省/市”后缀）。
许可
- 本项目为私有工程，根据需要自行添加 LICENSE。
欢迎反馈与改进建议。
npm install -g mapshaper
mapshaper china.geojson -simplify dp 10% -o format=topojson public/china-provinces.json
说明：
dp = Douglas–Peucker；10% 是保留细节比例，越小文件越小但细节越少，按需调整（5%~20% 常用）。 mapshaper 会保留属性（properties），确保其中有省名字段（如 name）与你的 gdp-data.json 键匹配。