最近技术圈不少人都在讨论 Simon Willison 的一个 AI 编程实验把 GPT-5.6-Sol 和 Claude Code 放到同一条编码流水线里快速构建一个 GeoJSON Map Viewer。这类工具平时做起来不复杂却很考验前端对 GeoJSON、地图渲染、要素拾取这些细节的处理。AI 编程代理能不能把这一整套东西串起来正好是这个实验最有价值的地方。如果你平时接触 GIS 数据或者正在研究“AI 能不能直接帮我写完一个小工具”这篇内容可以当成一份操作笔记。整个流程不依赖本地大模型也不吃显卡显存主要环境是 Node.js、Claude Code CLI 和一个浏览器。最后得到的是一套可以直接拖拽 GeoJSON 文件、在网页上查看点线面属性数据的本地工具。这篇文章会先分析这个案例里的 AI 工具链是怎么组织的然后带你从 Claude Code 安装开始一步步搭建、运行和验证一个 GeoJSON 地图查看器最后补充我在排查过程中遇到的高频报错和对应的解决思路。1. 核心能力速览在开始部署之前先把这套方案的核心信息整理出来。能力项说明案例背景Simon Willison 借助 GPT-5.6-Sol 与 Claude Code 构建 GeoJSON Map Viewer 工具技术形态AI 编码代理 前端 GIS 工具涉及模型GPT-5.6-Sol、Claude Code可配合不同后端模型主要产物支持拖拽加载 GeoJSON 的网页地图查看器前端能力文件解析、要素渲染、属性弹窗、视角适配硬件门槛无需本地大模型无需独立 GPU浏览器 WebGL 即可渲染推荐技术栈Node.js MapLibre GL JS 或 Leaflet启动方式Vite / 静态服务器是否支持 API基础版无后端接口可按需扩展是否支持批量任务基础版不内置可由 Claude Code 迭代扩展典型适用场景前端 GIS 工具原型、AI 编码工作流研究、本地数据快速预览使用边界底图服务需遵循瓦片授权业务或隐私地理数据需确认发布权限简单来说这个项目更接近“AI 辅助开发流程演示”而不是一个依赖特定硬件的推理服务。它的核心价值是验证模型和 CLI 代理配合时能不能把“需求 → 代码生成 → 文件修改 → 运行验证”这条链路真正跑通。2. GPT-5.6-Sol 与 Claude Code 是怎么配合的很多第一次看到这个案例的人会有一个疑问GPT-5.6-Sol 是 OpenAI 系的模型Claude Code 是 Anthropic 的 CLI 编程工具两个东西怎么能放到一起用首先要明确一件事Claude Code 不等于 Claude 模型。Claude Code 本质是一个运行在终端里的编码代理它负责读取项目文件、生成补丁、执行命令并观察输出。真正负责“思考”的模型可以通过配置指向不同来源包括 Anthropic 官方模型、代理网关甚至一些兼容 OpenAI 接口的服务。但这个“指向”并不是随便改个参数就能成功。Claude Code 原生使用 Anthropic Messages API 的工具调用格式如果要把 GPT-5.6-Sol 接进去通常有两种做法第一种并行互补。开发者在 Claude Code 里使用它默认支持良好的模型来生成和修改代码同时单独向 GPT-5.6-Sol 提问让 GPT-5.6-Sol 负责架构梳理、代码审查或边界条件设计然后把结论粘贴回 Claude Code 继续执行。这种方法最稳定也最容易复现。第二种网关转发。通过一个兼容层把 Claude Code 的请求转换成 OpenAI Chat Completions 格式并转发给 GPT-5.6-Sol。这种方式依赖网关对 Anthropic API 的兼容程度尤其是工具调用tool use是否完整转换。如果不能处理好工具调用Claude Code 会反复出现“读不到模型返回的调用参数”等问题。从 Simon Willison 的案例来看这个实验更像是想验证第一种工作流的上限。GPT-5.6-Sol 负责把 GeoJSON Viewer 的整体实现思路拆清楚Claude Code 负责在真实目录里把代码写出来并且让项目跑起来。如果你完全没接触过 Claude Code第一遍建议不要折腾“接入 GPT-5.6-Sol”。先让 Claude Code 使用默认模型把流程跑通后面再研究模型切换不迟。# 基本命令格式具体以项目内执行为准 claude 帮我创建一个 GeoJSON Map Viewer先说明实现方案再开始生成代码另外网络上有不少关于“GPT-5.6-Sol 无法在 Codex 中通过 ChatGPT 账号使用”的报错。这类问题说明同一个模型标识在不同工具和不同账号体系下的支持程度可能不同。使用前最好先确认你当前账号对模型的访问权限而不是直接假定所有 CLI 都能识别同一个 model 名称。3. GeoJSON Map Viewer 的功能拆解GeoJSON 是一种基于 JSON 的地理数据交换格式本质上就是把点、线、面以及它们的属性塞进一个结构化对象里。一个最简单的 GeoJSON FeatureCollection 大致长这样{ type: FeatureCollection, features: [ { type: Feature, properties: { name: 起点, type: point }, geometry: { type: Point, coordinates: [116.39, 39.9] } } ] }要在网页里做一个 GeoJSON Map Viewer至少要处理这几个环节功能点说明文件读取用户选择或拖拽.geojson/.json文件JSON 解析用JSON.parse把文件内容转成 JavaScript 对象结构校验判断是 FeatureCollection、Feature 还是 Geometry地图渲染把解析后的 GeoJSON 塞给地图引擎要素样式不同几何类型显示为点、线、面属性交互点击要素后显示 properties 字段视角适配数据加载后自动调整地图视野地图引擎方面我更推荐 MapLibre GL JS。它是开源地图库渲染性能不错并且自带对 GeoJSON 数据源的支持只要把数据放进 source再定义几个 layer 就能显示。为了让 Claude Code 生成时少走弯路Prompt 里需要明确功能边界。如果只说“做一个地图查看器”生成的代码通常只有地图初始化文件上传和属性弹窗大概率是残缺的。4. Claude Code 安装与环境准备Claude Code 的运行基础是 Node.js。虽然网页端也可以体验类似功能但要在本地目录里自动读写项目文件还是需要使用命令行版本。4.1 安装 Claude Code先确认 Node 版本建议使用 20 及以上 LTS 版本node -v npm -v安装方式以官方推荐为准通常可以用 npm 全局安装npm install -g anthropic-ai/claude-code安装完成后检查版本claude --version需要注意Windows 环境下如果使用 PowerShell可能遇到执行策略限制。遇到execution policy相关报错时可以换用管理员 PowerShell 调整策略或使用 CMD 执行 npx 版本。npx anthropic-ai/claude-code --version4.2 模型访问凭据Claude Code 第一次启动会询问使用方式。如果你使用 Anthropic 官方 API可以提前设置环境变量export ANTHROPIC_API_KEY你的 API Key如果你需要通过网关接入其他模型常见的环境变量写法如下。需要注意不同网关对模型名的兼容程度不同这个配置不一定对所有网关生效。export ANTHROPIC_BASE_URLhttp://127.0.0.1:8000 export ANTHROPIC_AUTH_TOKEN你的网关注册 Token export ANTHROPIC_MODELgpt-5.6-sol如果在启动后看到 “model is not recognized” 或 “not supported” 类报错先检查 Claude Code 版本和网关版本是否匹配再检查模型名是否写错。模型名往往区分大小写并且不同服务的命名规则不一样。4.3 VSCode 插件方式Claude Code 官方也提供了 VS Code 插件插件会调用本机安装的 CLI。Windows 下最常见的问题是 VS Code 找不到claude命令尤其是通过 npm 全局安装但 VS Code 里的 PATH 没有更新。解决方法是重启 VS Code或者在终端里先执行一次claude --version确认命令行可以访问。如果在项目里新建.vscode/settings.json也能解决一些搜索路径问题但核心还是先让系统 PATH 生效。{ terminal.integrated.env.windows: { PATH: ${env:PATH};${env:APPDATA}\\npm } }5. 用一套 Prompt 生成 GeoJSON Map Viewer下面进入完整复现。你需要做的操作如下新建一个空目录。在目录里启动 Claude Code。输入一条结构化 Prompt。让 Claude Code 自行生成文件、安装依赖并启动服务。先创建项目目录mkdir geojson-viewer cd geojson-viewer claude进入交互界面后给出一段比较完整的 Prompt。Prompt 不需要非常长但要包含技术栈、输入方式、渲染要求和交互要求。我要开发一个纯前端的 GeoJSON Map Viewer技术栈使用 Vite React MapLibre GL JS。 功能要求 1. 页面支持用户通过文件选择或拖拽方式加载 .geojson / .json 文件。 2. 加载后用 FileReader 读取文本再 JSON.parse 解析数据。 3. 解析后对数据做基本校验 - 支持 FeatureCollection 和 Feature - 如果数据结构不对页面需要显示明确错误信息而不能白屏。 4. 解析合法后把 GeoJSON 添加到 MapLibre 的 geojson source 中。 5. 显示规则 - Point 用 circle 样式 - LineString 用 line 样式 - Polygon 用 fill outline 样式。 6. 点击或悬停要素时显示 properties 中的所有字段。 7. GeoJSON 每次加载完成后用 fitBounds 自动调整到数据范围。 8. 如果用户重复加载新文件旧数据需要先移除再重新添加不能叠加图层。 9. 页面样式尽量简洁适合作为本地地图数据预览工具。 实现完成后告诉我如何启动并列出主要文件结构。从实践看Claude Code 会先创建 package.json再安装相关依赖最后生成源码文件。期间可能需要你确认是否允许执行 npm install。如果出现依赖安装失败先看日志中提示的是网络原因还是 Node 版本不兼容不要直接反复重试。生成后的目录结构一般会接近下面这样geojson-viewer/ ├─ index.html ├─ package.json ├─ vite.config.js └─ src/ ├─ main.jsx ├─ App.jsx └─ components/ └─ MapView.jsx用一个通用的启动命令把服务跑起来npm run dev浏览器打开终端输出的本地地址就能看到地图页面。6. MapLibre 渲染 GeoJSON 的关键代码如果你是手动实现而不是完全依赖 Claude Code核心渲染逻辑可以参考下面的代码。这个示例直接用浏览器原生模块引入 MapLibre适合用来理解原理。先准备一段测试 GeoJSON{ type: FeatureCollection, features: [ { type: Feature, properties: { name: sample-point, source: test }, geometry: { type: Point, coordinates: [116.39, 39.9] } }, { type: Feature, properties: { name: sample-polygon }, geometry: { type: Polygon, coordinates: [ [ [116.3, 39.8], [116.5, 39.8], [116.5, 40.0], [116.3, 40.0], [116.3, 39.8] ] ] } } ] }把 GeoJSON 数据添加到地图里并按照几何类型分别设置图层function loadGeoJSONToMap(map, geojson) { const sourceId local-geojson; if (map.getSource(sourceId)) { map.getSource(sourceId).setData(geojson); } else { map.addSource(sourceId, { type: geojson, data: geojson }); map.addLayer({ id: geojson-polygon-fill, type: fill, source: sourceId, filter: [, $type, Polygon], paint: { fill-color: #43A047, fill-opacity: 0.3 } }); map.addLayer({ id: geojson-polygon-line, type: line, source: sourceId, filter: [, $type, Polygon], paint: { line-color: #2E7D32, line-width: 2 } }); map.addLayer({ id: geojson-point, type: circle, source: sourceId, filter: [, $type, Point], paint: { circle-radius: 6, circle-color: #E53935 } }); } const bounds new maplibregl.LngLatBounds(); const features geojson.features || [geojson]; features.forEach((feature) { if (!feature.geometry) return; const coords extractAllCoordinates(feature.geometry.coordinates); coords.forEach((coord) { if (Array.isArray(coord) coord.length 2) { bounds.extend([coord[0], coord[1]]); } }); }); if (!bounds.isEmpty()) { map.fitBounds(bounds, { padding: 40, duration: 300 }); } } function extractAllCoordinates(coordinates) { const result []; const stack [coordinates]; while (stack.length) { const current stack.pop(); for (let i 0; i current.length; i) { const item current[i]; if (typeof item[0] number) { result.push(item); } else { stack.push(item); } } } return result; }在属性弹窗部分可以监听地图 clicks 事件然后从图层里找到被点击的 featuremap.on(click, geojson-point, (e) { if (!e.features || e.features.length 0) return; const feature e.features[0]; const props feature.properties || {}; new maplibregl.Popup() .setLngLat(feature.geometry.coordinates) .setHTML( pre JSON.stringify(props, null, 2) /pre ) .addTo(map); });上述代码里最值得注意的就是递归提取坐标。GeoJSON 的坐标可能是二维数组、三维数组、四维数组不能简单地用一次flat()处理。如果是人工写代码这个环节很容易漏。如果用的是 Claude Code 生成那么你最好在 Prompt 里写一句“Point / LineString / Polygon 都要支持”否则不同模型的代码可能会只覆盖点或者只覆盖面。7. 功能测试与效果验证项目跑起来之后建议不要只丢一个文件进去看它显示不出来就结束。至少要验证六个维度7.1 正常加载操作点击上传或拖拽一段合法的 GeoJSON 文件。预期地图自动缩放到数据范围点以红色圆点显示多边形以半透明绿色显示。7.2 数据覆盖操作连续加载两个不同的 GeoJSON 文件。预期第二次加载后第一次的图层数据被替换地图中心会变化页面没有控制台报错。7.3 属性弹窗操作点击地图上的点或多边形。预期弹出窗口展示该要素 properties 里的字段。如果没有弹窗优先检查事件绑定是否写在了对应图层 ID 上也检查圆形图层是否有被其他图层遮挡。7.4 错误数据操作加载一个不包含type的 JSON 文件或者直接加载一个文本文件。预期页面显示“不是合法的 GeoJSON”不能白屏也不能出现未捕获异常。错误提示示例 当前文件不是合法的 GeoJSON请确认 type 字段。7.5 线要素预览很多 Viewer 只写了点和面的渲染没有给 LineString 增加 line 图层。测试数据里至少要包含一条线确认线能显示否则后续读路网数据时会发现地图上一片空白。7.6 加载状态与重复点击操作快速点击上传按钮选择文件后立刻再选另一个文件。预期地图上的数据源没有无限叠加图层数量稳定。如果 Claude Code 生成的代码出现“重复 addSource 报错”通常是因为组件没有在旧 source 移除后再重新添加。解决方法是检查 React 组件卸载逻辑或者在加载新数据前先执行if (map.getLayer(geojson-point)) { map.removeLayer(geojson-point); } if (map.getSource(local-geojson)) { map.removeSource(local-geojson); }8. 批量数据处理与性能观察原项目的 MVP 不需要后端接口但 GIS 场景里大家经常要同时预览多个文件。如果你希望 Claude Code 生成批量能力可以继续追加 Prompt。例如在已有项目基础上输入给现有工具增加两个能力 1. 支持同时拖入多个 .geojson 文件并在页面左侧生成文件列表。 2. 点击列表项时切换到对应文件的地图视图。 3. 点击某个文件时如果解析失败只提示该文件的问题不影响其他文件继续查看。这种扩展对 Claude Code 来说并不难关键要注意状态管理。如果多个 GeoJSON 都由同一个地图数据源承载切换文件时最好在一个switchFile方法里完成“清理旧数据 → 解析新数据 → 渲染新数据”三个动作避免用多个并发的异步回调同时修改同一个 Map 实例。关于性能要特别说明一点GeoJSON 中的坐标数据会被完整读入浏览器内存MapLibre 底层用 WebGL