mapbox-create-map-mcp

一个基于Mapbox的地理数据可视化MCP工具，根据用户需求和地理数据生成图层配置信息。

安装

npm install mapbox-create-map-mcp

MCP 服务使用

直接启动

npx mapbox-create-map-mcp

MCP 客户端配置

在 MCP 客户端（如 Claude Desktop、Cursor 等）的配置文件中添加：

{
  "mcpServers": {
    "mapbox-createmap": {
      "command": "npx",
      "args": ["mapbox-create-map-mcp"]
    }
  }
}

MCP 工具

CreateMap - 生成地图图层配置

输入参数：

• title (string, 必需): 地图标题
• description (string, 必需): 地图描述
• layers (array, 必需): 图层配置数组
• baseStyle (string, 可选): 底图样式
• center (array, 可选): 中心点 [经度, 纬度]
• zoom (number, 可选): 缩放级别

CreatePopup - 生成弹框样式配置

输入参数：

• name (string, 必需): 弹框样式名称
• htmlContent (string, 必需): 弹框的HTML内容，支持{fieldName}占位符动态绑定数据
• theme (string, 可选): 预设主题 light | dark | minimal | custom
• closeButton (boolean, 可选): 是否显示关闭按钮
• closeOnClick (boolean, 可选): 点击地图时是否关闭
• closeOnMove (boolean, 可选): 地图移动时是否关闭
• anchor (string, 可选): 锚点位置 top | bottom | left | right 等
• offset (array, 可选): 偏移量 [x, y]
• maxWidth (number, 可选): 最大宽度(px)
• altitude (number, 可选): 海拔高度(米)
• className (string, 可选): 自定义CSS类名

占位符用法：

htmlContent 支持使用 {fieldName} 占位符动态绑定 GeoJSON 要素的 properties 属性。当点击地图上的要素时，占位符会被替换为实际值。

<!-- htmlContent 示例 -->
<div>
  <h3>{name}</h3>
  <p>地址: {address}</p>
  <p>类型: {type}</p>
  <p>数值: {value}</p>
</div>

当点击的要素 properties 为：

{"name": "北京站", "address": "北京市东城区", "type": "火车站", "value": 12345}

弹框显示：

<div>
  <h3>北京站</h3>
  <p>地址: 北京市东城区</p>
  <p>类型: 火车站</p>
  <p>数值: 12345</p>
</div>

返回结果示例：

{
  "success": true,
  "config": {
    "name": "深色主题",
    "closeButton": true,
    "closeOnClick": true,
    "closeOnMove": false,
    "anchor": "top",
    "offset": [0, 0],
    "maxWidth": 240,
    "className": "dark-popup",
    "altitude": 0,
    "htmlContent": "<div style=\"padding: 15px; background: #2d2d2d; color: #fff;\">...</div>"
  }
}

CreateIcon - 搜索图标

从 iconfont 搜索图标并返回 data:image/svg+xml;base64 格式的图标数据，可直接用于 <img> 标签的 src 属性。

输入参数：

• keyword (string, 必需): 搜索关键词，例如 "车辆"、"建筑"、"定位"
• id (number, 可选): 图标ID，传入后会优先查找该ID的图标，方便复用之前的图标
• index (number, 可选): 选择搜索结果中的第几个图标，从0开始，范围0-49，默认0
• color (string, 可选): 图标颜色，十六进制格式如 "#FF0000"。不传则保持原始颜色
• size (number, 可选): 图标大小，单位像素，默认48

返回结果示例：

{
  "success": true,
  "data": "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0i...",
  "name": "建筑",
  "id": 3841001
}

使用示例：

// 基本搜索
{ keyword: "建筑" }

// 选择第3个结果
{ keyword: "建筑", index: 2 }

// 使用之前的ID精确查找
{ keyword: "建筑", id: 3841001 }

// 指定颜色和大小
{ keyword: "建筑", color: "#FF5500", size: 64 }

返回的 data 可直接用于：

<img src="data:image/svg+xml;base64,PHN2Zy..." />

JavaScript 库使用

基本使用

import CreateMap from 'mapbox-create-map-mcp';

// 初始化工具
const createMap = new CreateMap();

// 配置地图
const config = {
  title: "我的地图标题",
  description: "地图描述信息",
  baseStyle: "light",
  center: [116.3974, 39.9092],
  zoom: 10,
  layers: [
    {
      type: "point",
      id: "my-points",
      fileUrl: "https://example.com/points.geojson",
      config: {
        'circle-color': '#FF0000',
        'circle-radius': 8,
        'circle-opacity': 0.8
      }
    }
  ]
};

// 生成图层配置信息
createMap.create(config)
  .then(result => {
    console.log("生成成功", result);
    // result 是 FeatureCollection 格式，包含图层配置信息
  })
  .catch(error => {
    console.error("生成失败", error);
  });

返回格式

{
  type: "FeatureCollection",
  features: [
    {
      data: "https://example.com/points.geojson",
      properties: {
        name: "my-points",
        type: "point",
        style: {
          type: "point",
          "circle-color": "#FF0000",
          "circle-radius": 8,
          "circle-opacity": 0.8
        }
      }
    }
  ]
}

图层类型

仅支持三种几何类型：point、linestring、polygon

point（点图层）

对应 Mapbox circle 图层

{
  type: "point",
  id: "my-points",
  fileUrl: "path/to/data.geojson",
  config: {
    'circle-color': '#0000FF',           // 填充颜色
    'circle-radius': 5,                   // 半径（像素）
    'circle-opacity': 1,                  // 填充透明度 0-1
    'circle-stroke-color': '#000000',    // 边框颜色
    'circle-stroke-width': 0,            // 边框宽度（像素）
    'circle-stroke-opacity': 1,          // 边框透明度 0-1
    'circle-blur': 0,                    // 模糊量（像素）
    'circle-translate': [0, 0],          // 偏移量 [x, y]
    'circle-translate-anchor': 'map',    // 偏移参考 'map' | 'viewport'
    'circle-pitch-scale': 'map',         // 倾斜缩放 'map' | 'viewport'
    'circle-pitch-alignment': 'viewport' // 倾斜方向 'map' | 'viewport'
  }
}

linestring（线图层）

对应 Mapbox line 图层

{
  type: "linestring",
  id: "my-lines",
  fileUrl: "path/to/data.geojson",
  config: {
    'line-color': '#FF0000',    // 线条颜色
    'line-width': 1,            // 线条宽度
    'line-opacity': 1,          // 透明度 0-1
    'line-blur': 0,             // 模糊度
    'line-gap-width': 0,        // 间隙宽度
    'line-offset': 0,           // 偏移量
    'line-dasharray': null      // 虚线样式，如 [2, 2]
  }
}

polygon（面图层）

对应 Mapbox fill 图层

{
  type: "polygon",
  id: "my-polygons",
  fileUrl: "path/to/data.geojson",
  config: {
    'fill-color': '#FFFF00',         // 填充颜色
    'fill-opacity': 1,               // 填充透明度 0-1
    'fill-outline-color': '#000000', // 边框颜色
    'fill-antialias': true,          // 抗锯齿
    'fill-z-offset': 0               // 高程偏移（米）
  }
}

底图样式

• standard: 标准
• light: 浅色
• dark: 深色
• satellite: 卫星图

API

CreateMap()

构造函数，初始化实例。

create(config)

生成图层配置信息。

参数：

• config.title (string, 必需): 地图标题
• config.description (string, 必需): 地图描述
• config.layers (array, 必需): 图层配置数组
• config.baseStyle (string, 可选): 底图样式，默认 'light'
• config.center (array, 可选): 中心点 [经度, 纬度]
• config.zoom (number, 可选): 缩放级别

返回： Promise，resolve 后返回 FeatureCollection 格式的配置信息

metadata

获取参数元数据定义，包含所有参数的类型、默认值、描述等信息。

layerMetadata

获取各图层类型的配置属性元数据。

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm test

# 发布
npm run publish:npm

许可证

MIT