项目介绍
MapStage 把地图视觉方案拆成一组能在浏览器里逐项调整的参数,再交给编码 Agent 落到实际页面。调参器同时提供平面地图和地球投影视图,可组合卫星影像、海拔设色、地形阴影、3D 地形、区域拆出、城市层级与 CSS 调色。用户完成视觉选择后可以复制 JSON,其中包含镜头、资源和样式设置。仓库还提供 Skill 规则,提醒 Agent 将预设迁移到生产 MapStage 页面,并等待地图 idle 后再截图或导出。
核心功能
地图与地球投影
在同一个调参器中切换平面地图和地球投影,并调整镜头中心、缩放、方位和俯仰。
卫星、海拔与地形组合
独立控制卫星影像和海拔设色,叠加地形阴影与使用 Mapterhorn Terrarium DEM 的 3D 地形。
区域拆出与城市层级
用区域裁切和地形岛效果突出目标区域,并按首都、大型、中型、小型等层级呈现城市。
JSON 预设迁移
导出镜头、资源和视觉参数,让 Agent 将调参结果迁移到生产 MapStage 页面。
安装与使用
克隆仓库后,把完整的 mapstage 目录复制到当前 Agent 宿主的 Skills 目录。Codex 使用 ~/.codex/skills/mapstage,Grok 使用 ~/.grok/skills/mapstage。重载 Skills 后可先启动本地调参器,再让 Agent 读取导出的 JSON。
让 AI Agent 帮你安装
把这段话发送给 Codex、Claude Code 或其他可以操作本地环境的 AI Agent。
请帮我安装 MapStage,项目地址 https://github.com/hopechen067/MapStage。先阅读 README.md、mapstage/SKILL.md、mapstage/tuner/README.md、LICENSE-EXCEPTIONS.md、DATA-PROVENANCE.md 和 SECURITY.md,再根据当前 Agent 宿主选择仓库写明的 Skills 目录,只复制完整的 mapstage 目录。发现同名目录、需要覆盖文件、安装额外运行时、申请额外权限或提供任何凭据时先询问我。安装后重载 Skills,确认 MapStage 可发现;然后在 mapstage/tuner 运行 node verify.mjs,并用本地 HTTP 服务打开调参器完成最小加载检查。请报告安装路径、校验结果和任何外部数据端点,未经确认不要写入生产项目、上传素材或发布页面。- Git
- 支持 Agent Skills 的 Codex 或 Grok 客户端
- 目标 Skills 目录的写入权限
- 运行本地调参器时需要 Python 3 或可运行 npx 的 Node.js 环境
- 访问默认卫星、DEM、矢量底图和 CDN 资源的网络连接
git clone --depth 1 https://github.com/hopechen067/MapStage.git
cp -R MapStage/mapstage ~/.codex/skills/mapstage- 1克隆并复制 Skill
在 macOS 或 Linux 上执行以下命令 git clone --depth 1 https://github.com/hopechen067/MapStage.git cp -R MapStage/mapstage ~/.codex/skills/mapstage 使用 Grok 时把目标路径改为 ~/.grok/skills/mapstage。
- 2重载并确认发现
重启或重载 Agent 客户端,确认 MapStage Skill 能被发现。若目标目录已经存在,应先比较内容并取得用户同意后再覆盖。
- 3启动本地调参器
进入 mapstage/tuner 后运行 python -m http.server 8765,再打开 http://127.0.0.1:8765/。也可以运行 npx --yes serve -l 8765。
- 4调整并导出预设
切换地图或地球投影,调整卫星、海拔、地形、区域拆出与镜头参数,然后使用 Copy JSON 保存当前方案。
- 5交给 Agent 落地
把 JSON 粘贴给已加载 MapStage Skill 的 Agent,要求它迁移到生产页面,使用 jumpTo 设置最终镜头并等待地图 idle 后再截图或导出。
重载客户端并确认 MapStage Skill 可发现。随后进入 mapstage/tuner,运行 python -m http.server 8765,打开 http://127.0.0.1:8765/ 并确认地图界面载入。可再运行 node verify.mjs,看到 verify ok 代表当前调参器资产与静态约束校验通过。
- Windows PowerShell 的复制命令见仓库 README,目标目录位于用户目录下的 .codex 或 .grok。
- 调参器必须通过 HTTP 服务打开,直接使用 file 协议会导致资源路径与浏览器加载问题。
- 本地覆盖端点应写入 map-tiles.config.local.js,并避免提交密钥或私有 URL。
- 默认地图与地形数据来自第三方服务,生产使用前需要核对条款、署名、配额与稳定性。
使用场景
专题区域地图
突出省域、流域周边或路线区域,通过区域拆出、地形阴影和城市层级建立清楚的视觉层次。
地球视角叙事
用地球投影、卫星影像和镜头参数制作航线、地缘或自然地貌的开场画面。
地图视觉方案交接
由设计人员在调参器中确定效果并导出 JSON,再由编码 Agent 在正式页面中复现。
使用评价
MapStage 的价值在于把容易反复试错的地图视觉参数集中到一个浏览器调参器里,并用 JSON 连接设计选择与 Agent 实现。仓库对安装、生产迁移、数据来源、署名和安全边界写得较完整,自带校验脚本也能检查关键资产。当前项目仍很新,没有正式 Release,默认效果依赖多项外部网络资源,参考文档中还能看到少量旧名称和旧水体方案残留。本页完成了文档、许可、维护元数据和静态校验核验,没有完成视觉输出实测。
值得一试的地方
- 把地图、地球、卫星、海拔、地形和区域拆出放进同一套调参流程
- JSON 预设便于把视觉方案交给 Agent 复现
- 许可例外、数据来源和第三方署名边界有独立文档
- 自带 verify.mjs,可检查关键资产和部分配置风险
使用前要知道
- 仓库创建时间较短,尚无正式 Release
- 默认效果受第三方地图与 CDN 服务的网络和条款影响
- 本地调参器不能直接承担生产托管
- 部分参考资料仍有旧名称或旧水体叠加描述
- 安装与视觉输出没有在本次收录中实测
README
MapStage
Overview
MapStage 是一个面向编码 Agent 的开源 Skill,配有浏览器调参器,可组合平面地图与地球投影、卫星底图、海拔设色、地形阴影、3D 地形和区域拆出效果,并把镜头与样式导出为 JSON 预设。 MapStage live tuner: map/globe, satellite, hypsometric relief, region isolate, Mapterhorn DEM, JSON presets.
Getting started
- 克隆仓库后,把完整的 mapstage 目录复制到当前 Agent 宿主的 Skills 目录。Codex 使用 ~/.codex/skills/mapstage,Grok 使用 ~/.grok/skills/mapstage。重载 Skills 后可先启动本地调参器,再让 Agent 读取导出的 JSON。
- 项目提供 MapStage Agent Skill、浏览器调参器、JSON 预设、参考文档和示例配置。
- 调参器覆盖地图与地球投影、卫星影像、海拔设色、地形阴影、3D 地形、区域拆出和城市层级。
- 重载客户端并确认 MapStage Skill 可发现。随后进入 mapstage/tuner,运行 python -m http.server 8765,打开 http://127.0.0.1:8765/ 并确认地图界面载入。可再运行 node verify.mjs,看到 verify ok 代表当前调参器资产与静态约束校验通过。
Configuration
git clone --depth 1 https://github.com/hopechen067/MapStage.git
cp -R MapStage/mapstage ~/.codex/skills/mapstage在 GitHub 阅读完整 README →