Leaflet MCP Server

MCP服务器宣传册

A. 模型上下文协议 （MCP）服务器，为 传单.js -领先的开源JavaScript库，用于移动友好的交互式地图。

概述

此MCP服务器使Claude等AI助手能够通过提供以下功能来帮助开发人员使用Leaflet.js：

• 📚 完整的API文档 -完整传单API参考和快速入门指南
• 🛠️ 代码生成工具 -为常见模式生成即用型传单代码
• 🔍 智能搜索 -快速查找相关示例和文档
• 🎨 插件建议 -发现并集成传单插件
• 🐛 调试帮助 -常见传单问题的解决方案
• 🗺️ 互动示例 -使用代码访问官方传单示例

特性

资源

服务器公开了四个主要的文档资源：

1. API参考小册子 (leaflet://docs/api-reference)

- 所有传单类的完整API文档 - Map、Marker、TileLayer、Popup等的方法、选项和事件。 - 矢量图层（折线、多边形、圆形、矩形） - GeoJSON、LayerGroup、控件、事件和实用程序函数

1. 快速入门指南 (leaflet://docs/quick-start)

- 开始使用传单 - 通过CDN或npm安装 - 基本地图设置和初始化 - 常见模式和故障排除

1. 所有传单示例 (leaflet://examples/all)

- 官方传单示例集 - 移动友好地图、自定义图标、GeoJSON - Choropleth地图、图层控制、可访问性 - 性能提示和最佳实践

1. 插件目录 (leaflet://plugins/directory)

- 40多个流行传单插件的精选列表 - 按类别组织（标记、绘图、可视化、控件等） - 安装说明和代码示例 - 指向GitHub存储库的链接

工具

服务器提供了10个强大的工具来处理传单：

1. 创建地图

使用HTML样板生成完整的传单地图初始化代码。

参数：

• center （必填）： {lat: number, lng: number} -地图中心坐标
• zoom：初始缩放级别（0-19，默认值：13）
• tileProvider：瓷砖供应商-“openstreetmap”、“cartodb”或“雄蕊”
• containerId：HTML元素ID（默认值：“map”）
• includeHTML：包含完整的HTML页面（默认值：true）

示例用例：

"Create a map centered on San Francisco at zoom level 12"

2. add_marker

生成用于添加带有弹出窗口、工具提示和自定义图标的标记的代码。

参数：

• position （必填）： {lat: number, lng: number} -标记位置
• popup：弹出内容（支持HTML）
• tooltip：工具提示文本
• draggable：使标记可拖动（默认值：false）
• customIcon：包括自定义图标设置代码（默认值：false）

示例用例：

"Add a draggable marker at Golden Gate Bridge with a popup"

3. 创建层

生成用于创建矢量图层（折线、多边形、圆、矩形）的代码。

参数：

• layerType （必填）：“折线”、“多边形”、“圆形”、“矩形”或“圆形标记”
• coordinates：数组 {lat, lng} 对象（用于折线/多边形）
• center: {lat, lng} 用于圆圈/圆圈标记
• radius：半径（单位为米）（对于圆）或像素（对于圆标记）
• style：样式选项（颜色、权重、不透明度、fillColor、fillOpacity）
• popup：图层的弹出内容

示例用例：

"Draw a red polygon around downtown Seattle"

4. add_popup

生成用于创建和自定义弹出窗口的代码。

参数：

• content （必填）：弹出内容（支持HTML）
• position: {lat, lng} 用于独立弹出窗口
• maxWidth：最大宽度（像素）（默认值：300）
• attachTo：“标记”、“图层”或“平铺”（默认值：“标记器”）

示例用例：

"Create a popup with an image and button"

5. create_geojson_layer

生成用于加载和显示具有自定义样式的GeoJSON数据的代码。

参数：

• dataSource：“inline”、“url”或“variable”（默认值：“inlet”）
• includeExample：包括示例GeoJSON数据（默认值：true）
• style：要素的默认样式对象
• onEachFeature：包括onEachFeature处理程序示例（默认值：true）
• filter：包括过滤函数示例（默认值：false）

示例用例：

"Load GeoJSON from a URL and style features by property"

6. create_chorpleth

生成用于创建交互式choropleth（数据可视化）地图的代码。

参数：

• dataProperty：要从GeoJSON中可视化的属性名称（默认值：“密度”）
• colorScheme：“连续”、“发散”或“定性”（默认值：“顺序”）
• steps：颜色步数（默认值：5）
• includeLegend：包括图例控件（默认值：true）
• includeInteraction：包括悬停效果和信息框（默认值：true）

示例用例：

"Create a population density choropleth map with legend"

7. 转换器坐标

在不同坐标格式之间转换并验证坐标。

参数：

• input （必填）：任何通用格式的坐标
• outputFormat：“decimal”、“dms”、“传单”或“geojson”（默认值：“传单”）

支持的输入格式：

• 十进制度数： 51.505, -0.09
• 数组格式： [51.505, -0.09]
• DMS： 51°30'18"N 0°5'24"W

示例用例：

"Convert 40.7128° N, 74.0060° W to Leaflet format"

8. suggest_plugin

根据功能或类别获取传单插件的建议。

参数：

• functionality：您要查找的内容（例如，“热图”、“聚类”、“路线”）
• category：“标记”、“覆盖”、“矢量”、“数据”、“控件”、“交互”、“动画”或“平铺”

示例用例：

"Find a plugin for marker clustering"
"Suggest plugins for drawing shapes"

9. 搜索示例

在官方传单示例中搜索特定功能。

参数：

• query （必填）：搜索词（例如“mobile”、“geojson”、“choropleth”）
• includeCode：在结果中包含代码片段（默认值：true）

示例用例：

"Show me examples of custom marker icons"
"Find examples for mobile geolocation"

10. debug_common_issues

获取调试常见传单问题的帮助。

参数：

• issue （必填）：问题类型

- “地图未显示” - “瓷砖未加载” - “标记未出现” - “图标损坏” - “弹出窗口不工作” - “缺少控件” - “其他”

• description：问题的详细描述

示例用例：

"Why is my map not showing?"
"Help fix broken marker icons in webpack"

安装

作为MCP服务器

1. 克隆或下载此存储库：

   git clone 
   cd leaflet-mcp-server

1. 安装依赖项：

   npm install

1. 构建服务器：

   npm run build

1. 配置您的MCP客户端 （例如，克劳德桌面）：

添加到MCP设置文件中：

macOS/Linux： ~/Library/Application Support/Claude/claude_desktop_config.json 窗户： %APPDATA%\Claude\claude_desktop_config.json

   {
     "mcpServers": {
       "leaflet": {
         "command": "node",
         "args": ["/absolute/path/to/leaflet-mcp-server/build/index.js"]
       }
     }
   }

1. 重新启动MCP客户端 加载服务器。

发展模式

注意开发过程中的变化：

npm run watch

使用示例

配置后，您可以向AI助手提出以下问题：

入门指南

• “创建以东京为中心的基本传单地图”
• “演示如何使用弹出窗口添加标记”
• “如何初始化传单地图？”

使用数据

• “从URL加载GeoJSON数据并将其显示在地图上”
• “创建显示人口密度的choropleth地图”
• “如何根据属性设置GeoJSON功能的样式？”

定制

• “添加带有自定义图标的可拖动标记”
• “围绕一点画一个半径为500米的圆”
• “创建一个多边形并向其添加一个弹出窗口”

寻找解决方案

• “为什么我的地图图块没有加载？”
• “查找用于聚类标记的插件”
• “显示自定义标记图标的示例”
• “将这些GPS坐标转换为传单格式”

高级功能

• “如何在传单中创建热图？”
• “查找用于绘制和编辑形状的插件”
• “演示如何使用图层控件”

建筑

项目结构

leaflet-mcp-server/
├── src/
│   ├── index.ts        # Main MCP server implementation
│   ├── tools.ts        # Code generation tool implementations
│   ├── docs.ts         # API reference and quick start documentation
│   ├── examples.ts     # Official Leaflet examples collection
│   └── plugins.ts      # Curated plugins directory
├── build/              # Compiled JavaScript (generated)
├── package.json        # Project metadata and dependencies
├── tsconfig.json       # TypeScript configuration
└── README.md          # This file

技术细节

• 语言： TypeScript编译为ES2022
• 模块系统： ES模块（节点16）
• MCP-SDK： @modelcontextprotocol/sdk v1.0.4+
• 运行时间： Node.js（需要ES2022支持）
• 运输： 标准输入/输出

运作原理

1. 服务器初始化：

- 服务器启动并监听stdio - 注册资源（文档）和工具（代码生成器） - 等待MCP客户端的请求

1. 资源访问：

- 客户端可以通过URI方案读取文档资源(leaflet://) - 资源返回格式化的markdown内容 - 内容包括代码示例和API引用

1. 工具执行：

- 客户端调用具有结构化参数的工具 - 工具根据参数生成适当的传单代码 - 结果包括带有解释和后续步骤的代码片段

1. 沟通：

- 所有通信都使用模型上下文协议 - 请求和响应是JSON-RPC格式的 - 服务器是无状态的-每个请求都是独立的

API文档

资源URI

工具架构

所有工具均遵循MCP工具模式格式，包括：

• 姓名： 工具标识符
• 描述： 该工具的功能是什么
• 输入方案 ： 参数的JSON模式

看 工具详细信息 以上部分为完整的参数文档。

发展

先决条件

• Node.js 16+（支持ES2022）
• npm或纱线
• TypeScript知识（可选，用于修改）

从源头构建

# Install dependencies
npm install

# Build once
npm run build

# Watch mode (auto-rebuild on changes)
npm run watch

# Prepare for distribution
npm run prepare

添加新工具

1. 在中添加工具实现 src/tools.ts:

   export function myNewTool(args: any): string {
     // Implementation
     return formattedResult;
   }

1. 在中注册工具 src/index.ts:

   // In ListToolsRequestSchema handler
   {
     name: "my_new_tool",
     description: "What this tool does",
     inputSchema: { /* JSON Schema */ }
   }

   // In CallToolRequestSchema handler
   case "my_new_tool": {
     const result = myNewTool(args);
     return { content: [{ type: "text", text: result }] };
   }

1. 重建和测试：

   npm run build

添加新资源

1. 在适当的文件中添加内容 (src/docs.ts, src/examples.ts等等）

1. 注册 src/index.ts:

   // In ListResourcesRequestSchema handler
   {
     uri: "leaflet://my/resource",
     mimeType: "text/plain",
     name: "Resource Name",
     description: "Resource description"
   }

   // In ReadResourceRequestSchema handler
   if (uri === "leaflet://my/resource") {
     return {
       contents: [{
         uri,
         mimeType: "text/plain",
         text: MY_RESOURCE_CONTENT
       }]
     };
   }

常见用例

网站开发

• 快速构建新的地图应用程序
• 为现有网站添加交互式地图功能
• 基于位置的原型功能
• 通过示例学习API传单

数据可视化

• 创建choropleth图以进行数据分析
• 显示地理数据集
• 使用嵌入式地图构建仪表板
• 从GeoJSON可视化空间数据

移动开发

• 实施移动友好型地图
• 添加地理定位功能
• 优化触摸交互
• 构建响应式地图界面

教育与学习

• 通过引导示例学习Leaflet.js
• 理解映射概念
• 探索插件生态系统
• 调试常见问题

故障排除

服务器未连接

问题： MCP客户端无法连接到服务器

解决：

1. 验证MCP配置中的路径是否绝对正确
2. 确保生成目录存在： npm run build
3. 检查Node.js是否在您的PATH中
4. 在MCP客户端日志中查找错误
5. 配置更改后重新启动MCP客户端

构建错误

问题： npm run build 失败

解决：

1. 删除 node_modules 和 build 目录
2. 跑 npm install 再次
3. 检查Node.js版本： node --version （需要16+）
4. 确保TypeScript安装正确

工具不工作

问题： 工具返回意外结果

解决：

1. 检查参数类型是否与架构匹配
2. 验证是否提供了所需的参数
3. 在工具输出中查找错误消息
4. 首先尝试使用最小参数

文档未加载

问题： 资源内容为空或不正确

解决：

1. 重建服务器： npm run build
2. 检查中的源文件 src/ 不变
3. 验证请求中的URI语法

资源

传单文件

• 官方网站： https://leafletjs.com/
• API参考： https://leafletjs.com/reference.html
• 示例： https://leafletjs.com/examples.html
• 插件： https://leafletjs.com/plugins.html

模型上下文协议

• 文档： https://modelcontextprotocol.io/
• 规范： https://spec.modelcontextprotocol.io/
• SDK参考： https://github.com/modelcontextprotocol/sdk

社区

• 传单GitHub： https://github.com/Leaflet/Leaflet
• 堆栈溢出： 传单标签
• GIS堆栈交换： 传单标签
• 很棒的传单： https://github.com/tomik23/awesome-leaflet

贡献

欢迎投稿！以下是帮助的方法：

1. 报告问题： 发现错误或有建议？打开一个问题
2. 添加工具： 实施新的代码生成工具
3. 改进文档： 增强内联文档和示例
4. 添加插件信息： 为目录建议其他插件
5. 共享用例： 告诉我们您是如何使用此服务器的

许可证

MIT许可证-有关详细信息，请参阅许可证文件

致谢

• 传单.js -创建者： 弗拉基米尔·阿加福金 由开源社区维护
• 模型上下文协议 -由开发 Anthropic
• 插件作者 -感谢所有Leaflet插件维护者
• 开放街道图 -提供免费地图数据

版本历史

1.0.0（当前）

• 初始版本
• 10个代码生成工具
• 4文档资源
• 完整的API参考
• 40+插件推荐
• 官方示例集
• 常见问题调试器

______________________________________________________________________

内置❤️ 传单和MCP社区

如有疑问、问题或反馈，请在GitHub上打开问题。