mapbox-create-map-mcp 1.2.1 → 1.3.1

package/README.md

@@ -33,7 +33,7 @@ npx mapbox-create-map-mcp
 
 ### MCP 工具
 
-**CreateMap** - 根据配置生成地图图层配置信息
+#### CreateMap - 生成地图图层配置
 
 输入参数：
 - `title` (string, 必需): 地图标题
@@ -43,6 +43,40 @@ npx mapbox-create-map-mcp
 - `center` (array, 可选): 中心点 [经度, 纬度]
 - `zoom` (number, 可选): 缩放级别
 
+#### CreatePopup - 生成弹框样式配置
+
+输入参数：
+- `name` (string, 必需): 弹框样式名称
+- `htmlContent` (string, 必需): 弹框的HTML内容
+- `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类名
+
+返回结果示例：
+```json
+{
+  "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>"
+  }
+}
+```
+
 ## JavaScript 库使用
 
 ### 基本使用

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-create-map-mcp",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "description": "A Mapbox-based MCP tool for creating geographic data visualizations",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/popui.js

@@ -0,0 +1,209 @@
+/**
+ * CreatePopup - 弹框样式配置生成工具
+ * 用于生成Mapbox弹框(Popup)的样式配置
+ */
+
+class CreatePopup {
+  constructor() {
+    /**
+     * 参数元数据定义
+     */
+    this.metadata = {
+      name: {
+        type: 'string',
+        required: true,
+        default: '默认样式',
+        description: '弹框样式名称'
+      },
+      closeButton: {
+        type: 'boolean',
+        required: false,
+        default: true,
+        description: '是否显示右上角的关闭按钮'
+      },
+      closeOnClick: {
+        type: 'boolean',
+        required: false,
+        default: true,
+        description: '点击地图任意地方时是否自动关闭Popup'
+      },
+      closeOnMove: {
+        type: 'boolean',
+        required: false,
+        default: false,
+        description: '地图移动（拖动或缩放）时是否自动关闭Popup'
+      },
+      anchor: {
+        type: 'string',
+        required: false,
+        default: 'top',
+        enum: ['auto', 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+        description: 'Popup箭头朝向锚点位置'
+      },
+      offset: {
+        type: 'array',
+        required: false,
+        default: [0, 0],
+        description: '偏移量，用于微调Popup位置，格式为[x, y]，单位为像素'
+      },
+      maxWidth: {
+        type: 'number',
+        required: false,
+        default: 240,
+        min: 100,
+        max: 800,
+        description: '弹框最大宽度，单位为像素(px)'
+      },
+      className: {
+        type: 'string',
+        required: false,
+        default: '',
+        description: '给Popup添加自定义CSS class名'
+      },
+      altitude: {
+        type: 'number',
+        required: false,
+        default: 0,
+        min: 0,
+        max: 10000,
+        description: '弹窗在地图表面上方的海拔高度（米）'
+      },
+      htmlContent: {
+        type: 'string',
+        required: true,
+        default: '<div style="padding: 10px;"><h3>标题</h3><p>内容</p></div>',
+        description: '弹框的HTML内容，支持完整的HTML标签和内联样式'
+      },
+      theme: {
+        type: 'string',
+        required: false,
+        default: 'light',
+        enum: ['light', 'dark', 'minimal', 'custom'],
+        description: '预设主题样式：light(浅色)、dark(深色)、minimal(简约)、custom(自定义)'
+      }
+    };
+
+    /**
+     * 预设主题样式模板
+     */
+    this.themeTemplates = {
+      light: {
+        className: 'light-popup',
+        htmlWrapper: '<div style="padding: 10px; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">{{content}}</div>'
+      },
+      dark: {
+        className: 'dark-popup',
+        htmlWrapper: '<div style="padding: 15px; background: #2d2d2d; color: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);">{{content}}</div>'
+      },
+      minimal: {
+        className: 'minimal-popup',
+        htmlWrapper: '<div style="padding: 8px 12px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 2px; font-size: 12px;">{{content}}</div>'
+      },
+      custom: {
+        className: '',
+        htmlWrapper: '{{content}}'
+      }
+    };
+  }
+
+  /**
+   * 验证参数
+   */
+  validate(config) {
+    const errors = [];
+
+    // 验证必填参数
+    if (!config.name || typeof config.name !== 'string') {
+      errors.push('name 是必填字段，且必须是字符串');
+    }
+
+    if (!config.htmlContent || typeof config.htmlContent !== 'string') {
+      errors.push('htmlContent 是必填字段，且必须是字符串');
+    }
+
+    // 验证anchor枚举值
+    if (config.anchor) {
+      const validAnchors = ['auto', 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
+      if (!validAnchors.includes(config.anchor)) {
+        errors.push(`anchor 必须是以下值之一: ${validAnchors.join(', ')}`);
+      }
+    }
+
+    // 验证theme枚举值
+    if (config.theme) {
+      const validThemes = ['light', 'dark', 'minimal', 'custom'];
+      if (!validThemes.includes(config.theme)) {
+        errors.push(`theme 必须是以下值之一: ${validThemes.join(', ')}`);
+      }
+    }
+
+    // 验证offset格式
+    if (config.offset) {
+      if (!Array.isArray(config.offset) || config.offset.length !== 2) {
+        errors.push('offset 必须是包含两个数字的数组 [x, y]');
+      } else if (typeof config.offset[0] !== 'number' || typeof config.offset[1] !== 'number') {
+        errors.push('offset 数组中的值必须是数字');
+      }
+    }
+
+    // 验证maxWidth范围
+    if (config.maxWidth !== undefined) {
+      if (typeof config.maxWidth !== 'number' || config.maxWidth < 100 || config.maxWidth > 800) {
+        errors.push('maxWidth 必须是100到800之间的数字');
+      }
+    }
+
+    // 验证altitude范围
+    if (config.altitude !== undefined) {
+      if (typeof config.altitude !== 'number' || config.altitude < 0 || config.altitude > 10000) {
+        errors.push('altitude 必须是0到10000之间的数字');
+      }
+    }
+
+    return errors;
+  }
+
+  /**
+   * 创建弹框配置
+   * @param {Object} config - 弹框配置参数
+   * @returns {Promise<Object>} 弹框配置对象
+   */
+  async create(config) {
+    // 验证参数
+    const errors = this.validate(config);
+    if (errors.length > 0) {
+      throw new Error(`参数验证失败: ${errors.join('; ')}`);
+    }
+
+    // 获取主题模板
+    const theme = config.theme || 'light';
+    const themeTemplate = this.themeTemplates[theme] || this.themeTemplates.light;
+
+    // 应用主题包装（如果htmlContent不是完整的HTML结构）
+    let finalHtmlContent = config.htmlContent;
+    if (theme !== 'custom' && !config.htmlContent.includes('style=')) {
+      finalHtmlContent = themeTemplate.htmlWrapper.replace('{{content}}', config.htmlContent);
+    }
+
+    // 构建弹框配置对象
+    const popupConfig = {
+      name: config.name || this.metadata.name.default,
+      closeButton: config.closeButton !== undefined ? config.closeButton : this.metadata.closeButton.default,
+      closeOnClick: config.closeOnClick !== undefined ? config.closeOnClick : this.metadata.closeOnClick.default,
+      closeOnMove: config.closeOnMove !== undefined ? config.closeOnMove : this.metadata.closeOnMove.default,
+      anchor: config.anchor || this.metadata.anchor.default,
+      offset: config.offset || this.metadata.offset.default,
+      maxWidth: config.maxWidth || this.metadata.maxWidth.default,
+      className: config.className || themeTemplate.className || this.metadata.className.default,
+      altitude: config.altitude !== undefined ? config.altitude : this.metadata.altitude.default,
+      htmlContent: finalHtmlContent
+    };
+
+    return {
+      success: true,
+      config: popupConfig
+    };
+  }
+}
+
+export default CreatePopup;

package/src/server.js

@@ -19,9 +19,178 @@ try {
   process.exit(1);
 }
 
+/**
+ * CreatePopup - 弹框样式配置生成工具
+ */
+class CreatePopup {
+  constructor() {
+    this.metadata = {
+      name: {
+        type: 'string',
+        required: true,
+        default: '默认样式',
+        description: '弹框样式名称'
+      },
+      closeButton: {
+        type: 'boolean',
+        required: false,
+        default: true,
+        description: '是否显示右上角的关闭按钮'
+      },
+      closeOnClick: {
+        type: 'boolean',
+        required: false,
+        default: true,
+        description: '点击地图任意地方时是否自动关闭Popup'
+      },
+      closeOnMove: {
+        type: 'boolean',
+        required: false,
+        default: false,
+        description: '地图移动（拖动或缩放）时是否自动关闭Popup'
+      },
+      anchor: {
+        type: 'string',
+        required: false,
+        default: 'top',
+        enum: ['auto', 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+        description: 'Popup箭头朝向锚点位置'
+      },
+      offset: {
+        type: 'array',
+        required: false,
+        default: [0, 0],
+        description: '偏移量，用于微调Popup位置，格式为[x, y]，单位为像素'
+      },
+      maxWidth: {
+        type: 'number',
+        required: false,
+        default: 240,
+        min: 100,
+        max: 800,
+        description: '弹框最大宽度，单位为像素(px)'
+      },
+      className: {
+        type: 'string',
+        required: false,
+        default: '',
+        description: '给Popup添加自定义CSS class名'
+      },
+      altitude: {
+        type: 'number',
+        required: false,
+        default: 0,
+        min: 0,
+        max: 10000,
+        description: '弹窗在地图表面上方的海拔高度（米）'
+      },
+      htmlContent: {
+        type: 'string',
+        required: true,
+        default: '<div style="padding: 10px;"><h3>{name}</h3><p>{description}</p></div>',
+        description: '弹框的HTML内容，支持{fieldName}占位符动态绑定GeoJSON要素的properties属性。例如: "<h3>{name}</h3><p>{address}</p>"'
+      },
+      theme: {
+        type: 'string',
+        required: false,
+        default: 'light',
+        enum: ['light', 'dark', 'minimal', 'custom'],
+        description: '预设主题样式：light(浅色)、dark(深色)、minimal(简约)、custom(自定义)'
+      }
+    };
+
+    this.themeTemplates = {
+      light: {
+        className: 'light-popup',
+        htmlWrapper: '<div style="padding: 10px; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">{{content}}</div>'
+      },
+      dark: {
+        className: 'dark-popup',
+        htmlWrapper: '<div style="padding: 15px; background: #2d2d2d; color: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);">{{content}}</div>'
+      },
+      minimal: {
+        className: 'minimal-popup',
+        htmlWrapper: '<div style="padding: 8px 12px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 2px; font-size: 12px;">{{content}}</div>'
+      },
+      custom: {
+        className: '',
+        htmlWrapper: '{{content}}'
+      }
+    };
+  }
+
+  validate(config) {
+    const errors = [];
+    if (!config.name || typeof config.name !== 'string') {
+      errors.push('name 是必填字段，且必须是字符串');
+    }
+    if (!config.htmlContent || typeof config.htmlContent !== 'string') {
+      errors.push('htmlContent 是必填字段，且必须是字符串');
+    }
+    if (config.anchor) {
+      const validAnchors = ['auto', 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
+      if (!validAnchors.includes(config.anchor)) {
+        errors.push(`anchor 必须是以下值之一: ${validAnchors.join(', ')}`);
+      }
+    }
+    if (config.theme) {
+      const validThemes = ['light', 'dark', 'minimal', 'custom'];
+      if (!validThemes.includes(config.theme)) {
+        errors.push(`theme 必须是以下值之一: ${validThemes.join(', ')}`);
+      }
+    }
+    if (config.offset) {
+      if (!Array.isArray(config.offset) || config.offset.length !== 2) {
+        errors.push('offset 必须是包含两个数字的数组 [x, y]');
+      }
+    }
+    if (config.maxWidth !== undefined) {
+      if (typeof config.maxWidth !== 'number' || config.maxWidth < 100 || config.maxWidth > 800) {
+        errors.push('maxWidth 必须是100到800之间的数字');
+      }
+    }
+    if (config.altitude !== undefined) {
+      if (typeof config.altitude !== 'number' || config.altitude < 0 || config.altitude > 10000) {
+        errors.push('altitude 必须是0到10000之间的数字');
+      }
+    }
+    return errors;
+  }
+
+  async create(config) {
+    const errors = this.validate(config);
+    if (errors.length > 0) {
+      throw new Error(`参数验证失败: ${errors.join('; ')}`);
+    }
+    const theme = config.theme || 'light';
+    const themeTemplate = this.themeTemplates[theme] || this.themeTemplates.light;
+    let finalHtmlContent = config.htmlContent;
+    if (theme !== 'custom' && !config.htmlContent.includes('style=')) {
+      finalHtmlContent = themeTemplate.htmlWrapper.replace('{{content}}', config.htmlContent);
+    }
+    const popupConfig = {
+      name: config.name || this.metadata.name.default,
+      closeButton: config.closeButton !== undefined ? config.closeButton : this.metadata.closeButton.default,
+      closeOnClick: config.closeOnClick !== undefined ? config.closeOnClick : this.metadata.closeOnClick.default,
+      closeOnMove: config.closeOnMove !== undefined ? config.closeOnMove : this.metadata.closeOnMove.default,
+      anchor: config.anchor || this.metadata.anchor.default,
+      offset: config.offset || this.metadata.offset.default,
+      maxWidth: config.maxWidth || this.metadata.maxWidth.default,
+      className: config.className || themeTemplate.className || this.metadata.className.default,
+      altitude: config.altitude !== undefined ? config.altitude : this.metadata.altitude.default,
+      htmlContent: finalHtmlContent
+    };
+    return {
+      success: true,
+      config: popupConfig
+    };
+  }
+}
+
 class McpServer {
   constructor() {
     this.createMap = new CreateMap();
+    this.createPopup = new CreatePopup();
     this.serverInfo = {
       name: 'mapbox-create-map-mcp',
       version: '1.0.0',
@@ -213,6 +382,64 @@ class McpServer {
             },
             required: ['title', 'description', 'layers']
           }
+        },
+        // CreatePopup 工具
+        {
+          name: 'CreatePopup',
+          description: '根据配置生成Mapbox弹框(Popup)样式配置。支持多种预设主题（浅色、深色、简约），返回完整的弹框配置对象。',
+          inputSchema: {
+            type: 'object',
+            properties: {
+              name: {
+                type: 'string',
+                description: '弹框样式名称'
+              },
+              closeButton: {
+                type: 'boolean',
+                description: '是否显示右上角的关闭按钮'
+              },
+              closeOnClick: {
+                type: 'boolean',
+                description: '点击地图任意地方时是否自动关闭Popup'
+              },
+              closeOnMove: {
+                type: 'boolean',
+                description: '地图移动（拖动或缩放）时是否自动关闭Popup'
+              },
+              anchor: {
+                type: 'string',
+                enum: ['auto', 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+                description: 'Popup箭头朝向锚点位置'
+              },
+              offset: {
+                type: 'array',
+                items: { type: 'number' },
+                description: '偏移量，用于微调Popup位置，格式为[x, y]，单位为像素'
+              },
+              maxWidth: {
+                type: 'number',
+                description: '弹框最大宽度，单位为像素(px)，范围100-800'
+              },
+              className: {
+                type: 'string',
+                description: '给Popup添加自定义CSS class名'
+              },
+              altitude: {
+                type: 'number',
+                description: '弹窗在地图表面上方的海拔高度（米），范围0-10000'
+              },
+              htmlContent: {
+                type: 'string',
+                description: '弹框的HTML内容，支持完整的HTML标签和内联样式。支持使用{fieldName}占位符动态绑定GeoJSON要素的properties属性，点击要素时占位符会被替换为实际值。例如："<h3>{name}</h3><p>地址: {address}</p><p>类型: {type}</p>"，当点击的要素properties为{"name":"北京站","address":"北京市东城区","type":"火车站"}时，弹框会显示"<h3>北京站</h3><p>地址: 北京市东城区</p><p>类型: 火车站</p>"。常用占位符: {name}名称, {id}标识, {address}地址, {value}数值, {description}描述等。'
+              },
+              theme: {
+                type: 'string',
+                enum: ['light', 'dark', 'minimal', 'custom'],
+                description: '预设主题样式: light(浅色), dark(深色), minimal(简约), custom(自定义)'
+              }
+            },
+            required: ['name', 'htmlContent']
+          }
         }
       ]
     };
@@ -249,12 +476,20 @@ class McpServer {
   async handleToolsCall(params) {
     const { name, arguments: args } = params;
 
-    if (name !== 'CreateMap') {
-      throw new Error(`Unknown tool: ${name}`);
-    }
-
     try {
-      const result = await this.createMap.create(args);
+      let result;
+      
+      switch (name) {
+        case 'CreateMap':
+          result = await this.createMap.create(args);
+          break;
+        case 'CreatePopup':
+          result = await this.createPopup.create(args);
+          break;
+        default:
+          throw new Error(`Unknown tool: ${name}`);
+      }
+
       return {
         content: [
           {