AI编程实战：用Claude Code与GPT-5.6-Sol将GeoJSON变成交互式地图-港品优选

最近 Simon Willison 的这个实践挺值得跟踪：他用 GPT-5.6-Sol 与 Claude Code 组合，把一个偏数据展示的 GeoJSON 文件做成了交互式地图工具。这个案例的价值不在“AI 写了前端页面”这种表象，而在于它展示了一条比较清晰的路径：从数据获取、格式清洗到前端可视化，AI 编程工具现在能承担多少、哪些环节仍然需要人来把关。

如果你平时会接触地图数据、地理信息文件，或者正在尝试用 Claude Code、GPT-5.6-Sol 这类工具做前端小工具，这篇文章可以收藏。我会把 GeoJSON 的基础概念、这套 AI 工具组合的使用思路、部署步骤、常见报错和排错方法一次讲清楚。

1. 核心能力速览

能力项	说明
项目类型	AI 辅助开发的地理数据可视化工具构建
核心模型	GPT-5.6-Sol、Claude Code
主要功能	GeoJSON 解析、地图可视化、交互式浏览、样式控制
推荐硬件	无特殊要求，网络连接稳定即可
显存占用	不涉及本地大模型推理，无需 GPU
支持平台	Windows / macOS / Linux
启动方式	命令行 + 本地静态服务器
接口能力	可通过本地 HTTP 服务提供数据查询
批量任务	支持批量处理 GEOJSON 文件并生成多个图层
适合场景	地理数据展示、行政区划可视化、地理信息教学、前端工具快速验证

先不说概念，单说这个组合能做什么：

用 Claude Code 读取本地 GeoJSON 文件，理解数据结构。
用 GPT-5.6-Sol 推理样式方案和交互逻辑。
自动生成 HTML + JavaScript 可交互地图页面。
支持本地静态服务器运行。
可以继续追加新图层或修正坐标显示问题。

2. 适用场景与使用边界

2.1 适合谁

前端开发者想快速搭一个地图数据预览工具。
GIS 相关从业者需要验证 GeoJSON 文件是否正确。
数据分析师要把地理数据做成给非技术人员看的页面。
AI 编程工具爱好者想了解 Claude Code 的实际工作流。

2.2 能解决什么问题

传统方式下，做一个 GeoJSON 地图浏览器需要写 HTML 结构、引入地图库、写 GeoJSON 解析函数、处理边界和投影问题，前后至少几百行代码。使用 AI 编程工具组合，可以让模型先读取 GeoJSON 文件结构，再生成对应的渲染逻辑。

2.3 不适合什么场景

海量地理数据的专业级 GIS 分析，还是需要 QGIS 或 ArcGIS。
在线高并发地图服务，建议使用 Leaflet + 服务端瓦片方案。
涉及保密地理信息的数据，不应使用任何在线 AI 工具处理。

2.4 合规边界

GeoJSON 文件可能包含行政区划边界、土地利用、人口分布等数据。使用要注意三点：

行政区划边界以官方发布版本为准。
含有个人信息位置数据的文件需要脱敏处理。
商用前确认数据源版权和授权范围。

3. GeoJSON 数据格式基础

GeoJSON 是一种基于 JSON 的地理数据编码格式，用来表示点、线、面等地理要素及其属性。地图工具能直接解析并渲染，不需要额外的数据库支持。

一个典型的 GeoJSON 文件结构如下：

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "示例区域", "id": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [116.3, 39.9], [116.4, 39.9], [116.4, 40.0], [116.3, 40.0], [116.3, 39.9] ] ] } } ] }

关键点：

FeatureCollection：表示一个要素集合。
Feature：单个地理要素。
geometry中的Polygon表示面数据。
coordinates里第一个数组是多边形外环，通常需要首尾闭合。
properties存放属性数据，地图点击弹窗会用到这部分。

3.1 GeoJSON 数据来源建议

手动编写 GeoJSON 很容易出错，建议优先从可靠来源获取：

政府公开数据平台发布的标准行政区划 GeoJSON。
开源地理数据仓库中已校验过的文件。
通过 QGIS 将 Shapefile 转换生成的 GeoJSON。
通过在线工具或 Python 脚本从其他格式转换。

4. 环境准备与前置条件

这次实践不需要 GPU 和大量内存，核心前置条件是 Node.js 环境和 Claude Code CLI 工具。

4.1 环境要求

依赖项	建议要求
Node.js	18 或更高版本
操作系统	Windows 10/11、macOS 12+、主流 Linux 发行版
网络	能正常访问 Anthropic API
磁盘	预留 2GB 以上空间
浏览器	Chrome / Edge / Firefox 最新版本

4.2 Node.js 安装检查

node -v npm -v

如果提示找不到命令，需要先安装 Node.js 并配置 PATH 环境变量。

4.3 Claude Code 安装方式

Claude Code 是 Anthropic 推出的终端编程工具。它能读取项目代码库、修改文件、执行命令、检查运行结果，适合用来完成“从零写一个工具”的任务。

安装命令：

npm install -g @anthropic-ai/claude-code

安装后确认版本：

claude --version

如果claude命令找不到，问题通常出在 npm 全局安装目录未加入 PATH。排查方式：

npm config get prefix

将输出的目录加入系统 PATH 后重新打开终端。

4.4 GPT-5.6-Sol 的接入方式

标题中提到的 GPT-5.6-Sol 是推理模型接入方式的一种实践。如果你的 Claude Code 环境中模型名配置为gpt-5.6-sol，需要确认当前 Claude Code 版本是否支持该模型标识。从网络搜索材料看，有用户遇到类似提示：

the 'gpt-5.6-sol' model is not supported when using codex with a chatgpt acc

也就是说，模型标识与工具版本不匹配时，Claude Code 会直接拒绝调用。稳妥做法是：

先查看当前 Claude Code 支持的模型列表。
确认 API 账户有访问对应模型的权限。
在配置文件中使用工具真正支持的模型名。

4.5 Claude Code 配置模型

Claude Code 的模型配置通常在settings.json中完成。下面是一个示例：

{ "model": "gpt-5.6-sol", "permissions": { "allow": [ "Read", "Write", "Bash" ] } }

如果你的版本不支持 GPT-5.6-Sol，运行时会直接报错。处理方式是将model字段改为当前版本支持的模型标识，或升级 Claude Code。

claude update

5. 实战任务分解：构建 GeoJSON Map Viewer

Simon Willison 的构建思路本质上是一次“AI 辅助数据工具开发”的操作，核心包括：

准备 GeoJSON 数据。
让 Claude Code 理解数据结构和业务目标。
生成 Map Viewer 页面。
启动本地服务器并验证。
根据需求迭代修改样式与交互。

5.1 创建项目目录

mkdir geojson-map-viewer cd geojson-map-viewer npm init -y

5.2 准备测试 GeoJSON 文件

把测试数据放到项目根目录的data文件夹中。

mkdir data

在data/example.geojson中放入一份标准 GeoJSON 数据。可以从开源数据仓库下载世界地图 GeoJSON，也可以先用第 3 节的最小示例代码生成一个本地测试文件。

5.3 让 Claude Code 阅读数据

启动 Claude Code 并给出明确指令：

claude

在对话窗口中输入：

请阅读 data/example.geojson 文件，告诉我它包含哪些类型的要素，properties 中有哪些字段，然后设计一个单页 GeoJSON Map Viewer。要求： 1. 使用 Leaflet 渲染 GeoJSON 2. 支持鼠标点击区域弹出属性信息 3. 页面 UI 简洁，适合本地工具使用 4. 不修改数据文件本身

这个指令包含四层信息：任务目标、技术选型、交互要求、边界约束。AI 生成的结果会更可控。

5.4 Claude Code 处理流程参考

根据搜到的实践材料，Claude Code 的典型工作方式包括“读取文件 → 生成代码 → 执行命令 → 修复报错”的循环。这里不需要手工编写完整页面代码，模型会先解析出 GeoJSON 里的要素类型，再决定引入哪一个地图库。

实际运行中可能出现的输出行为：

读取文件并打印要素数量。
自动安装 Leaflet 或使用 CDN 引入。
生成index.html文件。
生成viewer.js文件。
启动本地服务器预览。
如果地图未渲染，会尝试检查 JS 报错并修复。

6. 手工搭建 Map Viewer 验证流程

AI 工具能力强，但建议你先手工跑通一个最小版本，这样后续用 Claude Code 生成复杂功能时，遇到问题能更快判断是数据问题还是代码问题。

6.1 引入 Leaflet

用 CDN 方式引入 Leaflet，能避免本地依赖问题：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>GeoJSON Map Viewer</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" ></script> <style> #map { height: 100vh; width: 100%; } body { margin: 0; } </style> </head> <body> <div id="map"></div> <script> const map = L.map('map').setView([35, 105], 4); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map); fetch('./data/example.geojson') .then((response) => response.json()) .then((data) => { const geoJsonLayer = L.geoJSON(data, { style: { color: '#3388ff', weight: 2, fillOpacity: 0.3 }, onEachFeature: (feature, layer) => { const props = feature.properties; let content = '<b>属性信息</b><br/>'; for (const key in props) { content += `${key}: ${props[key]}<br/>`; } layer.bindPopup(content); } }); geoJsonLayer.addTo(map); map.fitBounds(geoJsonLayer.getBounds()); }) .catch((error) => { console.error('GeoJSON 加载失败:', error); }); </script> </body> </html>

6.2 启动本地服务器

由于浏览器直接打开 HTML 文件时，fetch 本地 JSON 会受到跨域限制，所以必须启动本地服务器。

npx serve .

也可以使用 Python 的简易服务器：

python -m http.server 8080

然后在浏览器访问：

http://localhost:8080

看到地图加载并且点击区域可以弹出属性信息，就说明整个链路已经跑通。

7. 使用 GPT-5.6-Sol 与 Claude Code 增强工具能力

手工版本跑通后，就可以用 AI 工具继续增强功能。

7.1 Claude Code 负责代码结构与执行

Claude Code 在终端中直接读写文件，比较适合处理完整的前端工程。比如在已有项目中追加功能：

在当前项目中增加一个图层控制面板，让我可以切换不同 GeoJSON 文件的显示与隐藏。

Claude Code 会直接修改 HTML 和 JS 文件，然后提示刷新页面查看效果。

7.2 GPT-5.6-Sol 负责方案推理

GPT-5.6-Sol 这类模型在“思考方案”上的优势更明显。你可以让它作为“架构顾问”来给出迭代方案：

我有一个基于 Leaflet 的 GeoJSON Map Viewer，当前需要解决多文件快速切换、大数据量渲染性能、按属性值着色三个问题。请分优先级给出实施方案。

这类问题适合先推理再落代码，不必直接让 Claude Code 盲目修改。

7.3 组合工作流建议

步骤	使用工具	目标
任务分解	GPT-5.6-Sol	明确功能模块与优先级
文件搭建	Claude Code	生成基础 HTML/JS/CSS
数据解析	Claude Code	读取 GeoJSON 并输出结构摘要
功能迭代	两者配合	添加图层控制、样式切换、搜索定位
问题修复	Claude Code	定位 JS 报错并修改代码
效果审查	人工	确认数据边界、交互体验、合规问题

8. 接口 API 与批量任务

地图查看器这类工具同样可以扩展接口能力。

8.1 GeoJSON 文件批量处理

GeoJSON 文件较多时，人工逐个确认效率很低。项目中可以加一个 Node.js 批量检查脚本，自动读取data目录下所有.geojson文件，检查 type、geometry 结构和 properties 字段。

const fs = require('fs'); const path = require('path'); const dataDir = path.join(__dirname, 'data'); const files = fs.readdirSync(dataDir).filter((f) => f.endsWith('.geojson')); files.forEach((file) => { const content = JSON.parse(fs.readFileSync(path.join(dataDir, file), 'utf8')); const featureCount = content.features ? content.features.length : 0; console.log(`${file}: ${featureCount} 个要素`); });

运行方式：

node check.js

建议在批量处理流程里包含三个步骤：

先检查文件是否为合法 JSON。
再检查要素类型是否支持。
最后人工抽查边界显示是否准确。

8.2 本地接口服务

当前页面是静态页面，如果需要让其他脚本调用数据，可以加一个 Node.js 接口服务：

const express = require('express'); const fs = require('fs'); const path = require('path'); const app = express(); const port = 3000; app.get('/api/geojson/:name', (req, res) => { const name = req.params.name; const filePath = path.join(__dirname, 'data', `${name}.geojson`); try { const raw = fs.readFileSync(filePath, 'utf8'); const data = JSON.parse(raw); res.json(data); } catch (error) { res.status(404).json({ message: '文件不存在' }); } }); app.listen(port, () => { console.log(`服务已启动: http://localhost:${port}`); });

安装依赖：

npm install express

请求示例：

curl http://localhost:3000/api/geojson/example

返回结果是完整的 GeoJSON。这样外部工具可以批量获取不同地区的地图数据进行二次处理。

9. 资源占用与性能观察

这次实践完全不涉及 GPU 推理。资源占用主要集中在浏览器端的地图渲染和本地服务的内存占用。

9.1 浏览器端性能观察

打开调试工具 Performance 面板，重点观察两个指标：

GeoJSON 加载耗时。
图层添加到地图后的渲染帧率。

如果数据量很大，要素数量达到数万级别，直接渲染会出现明显卡顿。

9.2 降低性能压力的方法

问题	处理方式
文件体积过大	使用 TopoJSON 替代 GeoJSON
要素过多	只显示当前视野范围内的要素
每次请求全量文件	按需请求，切片加载
样式复杂	可考虑用 Canvas 图层替代 SVG 渲染路径

9.3 显存与硬件说明

这套工具不需要 GPU，也不需要关注显存占用。只要是能正常打开浏览器的电脑就可以运行。如果你之前尝试过本地大模型做类似功能，这次流程会明显更轻。

10. 常见问题与排查方法

问题现象	可能原因	排查方式	解决方案
claude 命令不存在	npm 全局目录未加入 PATH	执行`npm config get prefix`查看路径	将目录加入 PATH 后重开终端
Claude Code 提示模型不支持 GPT-5.6-Sol	当前版本模型列表未包含该标识	查看官方支持模型列表	更新 Claude Code 或换用已支持的模型名
页面白屏	JS 文件引入错误或浏览器缓存	打开 F12 查看 Console 报错	修复 CDN 地址或清空缓存
GeoJSON 加载失败	浏览器跨域限制	检查是否通过本地服务器访问	使用`npx serve`或`python -m http.server`
地图一片空白	坐标范围不在初始视野内	去掉`setView`，改用`fitBounds`	在加载完成后执行`map.fitBounds`
多边形颜色异常或内部填充错乱	GeoJSON 坐标顺序或闭合错误	用在线 GeoJSON 校验工具检查文件	修复文件或使用有效数据源
GeoJSON 文件很大，上传后卡顿	要素数量过多	检查网络请求耗时	数据简化、改用 TopoJSON 或按区域分文件
数据文件内容敏感被 AI 工具记录	在模型对话中上传了敏感数据	检查数据中是否含位置隐私字段	脱敏处理后再使用，尽量使用脱敏测试数据

10.1 依赖安装失败

如果npm install卡住或失败，可以临时切换 npm 镜像源：

npm config set registry https://registry.npmmirror.com

切换后再执行安装命令。

10.2 单独验证 GeoJSON

如果地图没有按预期显示，先脱离前端验证 GeoJSON 文件本身：

node -e "JSON.parse(require('fs').readFileSync('./data/example.geojson', 'utf8')); console.log('JSON OK')"

能输出 JSON OK，再检查前端逻辑。

10.3 解决坐标系偏移

部分 GeoJSON 数据使用非 WGS84 坐标系，直接用 Leaflet 渲染会偏移。需要在代码里做坐标转换，建议工具数据源统一采用 WGS84 坐标。

11. 最佳实践与使用建议

11.1 先小规模测试

第一次运行 Claude Code 或 GPT-5.6-Sol 时，先让它读取只有几个要素的 GeoJSON 文件，确认生成的结构稳定后再换真实数据集，能大幅减少排错时间。

11.2 目录结构保持干净

建议采用下面的目录结构：

geojson-map-viewer/ ├── data/ │ ├── example.geojson │ └── cn.json ├── index.html ├── viewer.js ├── check.js ├── server.js ├── package.json └── settings.json

模型文件、输入素材、输出页面分目录管理，会让 Claude Code 后续修改时更容易定位问题。

11.3 与 Claude Code 配合时表达要明确

建议每次提问都带上具体场景和约束。比如：

不要修改数据文件。 输出文件请在 viewer.js 中维护。 启动本地服务器后检查 Console 无报错。

模型在信息更充分的情况下，生成结果更符合预期。

11.4 数据合规要求

行政区划类数据必须使用官方发布版本。
涉及个人信息的位置数据要脱敏。
不要将内部敏感地理数据直接放入在线模型对话。
商用前核实数据源的授权协议。

12. 总结与下一步

Simon Willison 这次用 GPT-5.6-Sol 和 Claude Code 构建 GeoJSON Map Viewer 的实践，真正值得关注的不是生成了多少代码，而是展示了 AI 工具链在“数据工具开发”场景下的协作方式。Claude Code 负责读取文件、改代码、跑命令，GPT-5.6-Sol 这类模型负责提供思路和方案推理，配合起来确实能减少从数据文件到可用页面之间的重复工作。

最容易踩的坑有两个：一个是模型标识与工具版本不匹配，导致 Claude Code 直接拒绝调用；另一个是 GeoJSON 文件本身有问题，浏览器页面却显示白屏，排查方向一开始就偏了。

你可以先准备一个小文件，部署好 Claude Code 环境，让这个工具读取数据后生成一个最小版本的 Map Viewer，然后再尝试加入多图层切换和按属性配色这些增强功能。如果想法比较顺手，也可以继续往上扩展成本地数据预览工具，再接入批量处理脚本和接口服务，做成每天用起来都顺手的工具链。

企业官网建设流程全解析