AI导哈

Leaflet地图开发工具

一个为Leaflet.js提供API文档、代码生成和交互式工具支持的MCP服务器，帮助开发者快速构建移动友好的交互式地图应用。

  • by philgebauer
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 philgebauer/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、控件、事件和实用程序函数

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

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

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

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

  4. 插件目录 (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 <repository-url>
cd leaflet-mcp-server

  2. 安装依赖项：

    npm install

  3. 构建服务器：

    npm run build

  4. 配置您的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"]
    }
  }
}

  5. 重新启动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客户端的请求

  2. 资源访问：

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

  3. 工具执行：

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

  4. 沟通：

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

API文档

资源URI

URI 描述 内容
leaflet://docs/api-reference 完整的API传单 类、方法、选项、事件
leaflet://docs/quick-start 入门指南 安装、设置、常见模式
leaflet://examples/all 官方示例 15+示例教程及代码
leaflet://plugins/directory 插件目录 按类别组织的40多个插件

工具架构

所有工具均遵循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;
}

  2. 在中注册工具 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 }] };
}

  3. 重建和测试：

    npm run build

添加新资源

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

  2. 注册 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上打开问题。

相关 MCP