最近 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.js18 或更高版本操作系统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 update5. 实战任务分解构建 GeoJSON Map ViewerSimon Willison 的构建思路本质上是一次“AI 辅助数据工具开发”的操作核心包括准备 GeoJSON 数据。让 Claude Code 理解数据结构和业务目标。生成 Map Viewer 页面。启动本地服务器并验证。根据需求迭代修改样式与交互。5.1 创建项目目录mkdir geojson-map-viewer cd geojson-map-viewer npm init -y5.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 langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleGeoJSON Map Viewer/title link relstylesheet hrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css / script srchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js /script style #map { height: 100vh; width: 100%; } body { margin: 0; } /style /head body div idmap/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属性信息/bbr/; 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 /html6.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然后再尝试加入多图层切换和按属性配色这些增强功能。如果想法比较顺手也可以继续往上扩展成本地数据预览工具再接入批量处理脚本和接口服务做成每天用起来都顺手的工具链。
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.js18 或更高版本操作系统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 update5. 实战任务分解构建 GeoJSON Map ViewerSimon Willison 的构建思路本质上是一次“AI 辅助数据工具开发”的操作核心包括准备 GeoJSON 数据。让 Claude Code 理解数据结构和业务目标。生成 Map Viewer 页面。启动本地服务器并验证。根据需求迭代修改样式与交互。5.1 创建项目目录mkdir geojson-map-viewer cd geojson-map-viewer npm init -y5.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 langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleGeoJSON Map Viewer/title link relstylesheet hrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css / script srchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js /script style #map { height: 100vh; width: 100%; } body { margin: 0; } /style /head body div idmap/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属性信息/bbr/; 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 /html6.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然后再尝试加入多图层切换和按属性配色这些增强功能。如果想法比较顺手也可以继续往上扩展成本地数据预览工具再接入批量处理脚本和接口服务做成每天用起来都顺手的工具链。