概述
WebGIS 开发从来都不是简单的页面拼凑。它不仅涉及传统前端的 UI/UX 和复杂的状态管理，更包含了晦涩的空间逻辑、沉重的地图引擎（如 OpenLayers, Mapbox, Cesium）调用，以及海量地理数据的处理。
如何在这些复杂的概念中穿梭而不翻车？今天，我们将探讨如何利用 CodeBuddy 的 AI 能力，极大降低 GIS 开发的认知负荷，打造高效、规范的 WebGIS 工程。
🏗️ 一、 夯实基础：项目初始化与架构规范
在 WebGIS 项目初期，最关键的不是急着画图层，而是确立地图逻辑与业务逻辑的解耦规范。
1. 规范化初始化流程
- 运行
/init快速初始化.codebuddy/目录。 - 使用
/rules指令，让 AI 结合你的具体技术栈（如Vue3 + OpenLayers或React + Mapbox GL JS）生成基础的工程规范。
2. 配置 WebGIS 专属规则 (Rules)
利用 CodeBuddy 的 Rules 系统，我们可以强制约束那些极易出错的 GIS 细节。
💡 最佳实践示例： 将以下内容保存为 RULE.mdc（并设置为 Always Apply）：
markdown
---
description: WebGIS 核心编码与架构规范
alwaysApply: true
enabled: true
---
# WebGIS 编码规范
## 🌍 坐标系管理 (投影)
- 内部计算和存储，默认统一使用 **EPSG:4326 (WGS84)**。
- 仅在地图渲染阶段（如添加到 Map 实例），才转换为 **EPSG:3857 (Web Mercator)**。
- 所有坐标转换必须调用 `src/utils/projection.ts` 工具类，**严禁**在 UI 组件内散落转换逻辑。
## 📦 地图实例与组件解耦
- **绝对禁止**将 Map 实例直接挂载到 Vue/React 的响应式状态（如 `ref` 或 `useState`）中，这会导致灾难性的性能卡顿！应使用普通变量或通过 `markRaw` / `useRef` 处理。
- 地图操作逻辑（添加图层、绘制交互）必须封装在独立的 Hooks (如 `useMapLayer`) 或原生的 JS/TS 类中。
## 📊 空间数据格式
- 矢量数据流转，强制统一使用标准 **GeoJSON** 格式。
- 涉及复杂的空间拓扑计算，优先使用 **Turf.js**。🗺️ 二、 攻克复杂场景：WebGIS 五步开发法则
WebGIS 开发常遇到跨模块的复杂需求（如：底图切换 + 多边形绘制 + 区域内 POI 数量统计）。此时，强烈建议启用 CodeBuddy 的 Plan 模式。
遵循以下五步法则，让 AI 帮你理清思路：
- 🎯 需求澄清 ：描述具体 GIS 逻辑。例如："我需要使用 Leaflet 实现多边形绘制，并调用 Turf.js 计算其面积。"
- 📝 方案制定：AI 会自动拆解任务，生成包含 UI 组件、Map 事件监听、图层管理及 Turf 计算的方案草稿。
- 🧐 方案审阅（极其关键！） ：重点检查 AI 是否正确处理了 GeoJSON 结构？坐标系数组顺序是
[lng, lat]还是[lat, lng]？（这是 GIS 新手最容易踩的坑）。 - 💻 方案实施：确认无误后，一键让 AI 自动编写组件文件和 GIS 逻辑类。
- 💾 保存与复用 ：将生成的计划保存在
.codebuddy/plans/。下次开发"线段长度测量"时，这就是完美的参考上下文！
🧠 三、 精准投喂：上下文管理与代码提速
GIS 库的 API 往往极其庞大，合理利用 CodeBuddy 的 @ 引用系统，是写出正确代码的捷径。
📖 @Docs：拯救记不住的 GIS API
- 痛点 ：忘了 Mapbox GL JS 的
Expressions怎么写？找不到 Cesium 的Entity文档？ - 妙招 ：直接输入
@Docs: Mapbox GL JS或粘贴官方文档链接。 - 示例 ："@Docs:Turf.js 请根据文档，帮我写一个函数，计算点到一个多边形的最短距离。"
📂 @Files & @Code：精准处理地理数据
- 处理后端 Mock 数据 ：面对复杂的 GeoJSON 或 WKT 数据，使用
@Files:mockData.json投喂结构。
告诉 AI："根据这个 GeoJSON 的properties生成 TS 接口，并写一个按population字段分级渲染颜色的样式函数。" - 局部修改 ：用
@Code选中初始化函数："帮我为这段底图代码添加一个加载失败的重试机制。"
🛠️ 斜杠指令：解决 GIS 疑难杂症
/explain算法解析：接手老项目？选中前人留下的晦涩聚类算法或坐标转换矩阵，一键解析原理。/fix渲染报错排查 ：当控制台报出Canvas context lost或 WebGL 底层错误时，结合@Terminal的报错信息使用/fix快速定位。
🤖 四、 进阶高阶玩法：SubAgent 与 MCP 空间赋能
1. 创建专属的 "GIS 审查员" (SubAgent)
团队里不可能人人都是 GIS 专家。你可以创建一个 Agentic 模式 的 SubAgent 辅助把关：
- Name :
GIS-Code-Reviewer - System Prompt : "你是一个高级 GIS 专家。审查代码时请严格检查：1. LngLat 与 LatLng 顺序是否反转；2. 添加图层前是否清除了旧图层；3. 海量点渲染是否使用了 Cluster 或 WebGL 方案..."
2. 沉淀团队 GIS 技能库 (Skills)
将高频操作封装为 Skill。例如创建指令 wkt-to-geojson，当开发者需要处理 WKT 时，AI 会自动调用预设脚本完成数据转换并生成解析代码。
3. 接入 MCP：解锁空间能力的杀手锏 🌟
WebGIS 强依赖后端服务（如 PostGIS, GeoServer）。通过配置 MCP Server，CodeBuddy 能直接打破前后端壁垒：
- 直连 PostGIS ："帮我查询数据库中与这个多边形相交的建筑物，并转成前端需要的 GeoJSON 格式代码。"
- 对接 GeoServer：配置读取 WMS GetCapabilities 的工具，AI 即可根据真实后台图层，直接为你生成前端加载该 WMS 服务的完整配置代码。
⚠️ 五、 避坑指南：给 AI 减负，也给自己避雷
- 🚫 拒绝投喂超大矢量数据
不要将包含几万个坐标点的 GeoJSON 整个用@Files喂给 AI。这不仅会瞬间耗尽 Token，还会让 AI 直接宕机。只需截取前 2 个 Feature 样本说明数据结构即可。 - 📌 利用记忆 (Memory) 固化偏好
明确告诉 AI："请记住，我们在本项目中处理地图经纬度时，数组顺序永远是[经度(Lng), 纬度(Lat)]，千万不要搞反！" - ⚙️ 聪明地切换大模型
写普通的 UI 交互，基础模型即可；但涉及复杂的 3D 着色器 (Cesium) 或 Turf.js 复杂拓扑计算 时，务必在models.json中切换到推理能力最强的模型（如 Claude 3.5 Sonnet 或 GPT-4o）。
结语
工具的进化正在重塑我们的开发范式。将繁琐的 API 记忆、基础的坐标系处理和数据转换交给 CodeBuddy，让开发者把核心精力聚焦在真正的空间业务逻辑 与用户体验上。这就是现代 WebGIS 工程师该有的开发姿势！