mapbox-create-map-mcp 1.3.0 → 1.4.0

package/README.md

@@ -33,7 +33,7 @@ npx mapbox-create-map-mcp
 
 ### MCP 工具
 
-**CreateMap** - 根据配置生成地图图层配置信息
+#### CreateMap - 生成地图图层配置
 
 输入参数：
 - `title` (string, 必需): 地图标题
@@ -43,6 +43,69 @@ npx mapbox-create-map-mcp
 - `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` 属性。当点击地图上的要素时，占位符会被替换为实际值。
+
+```html
+<!-- htmlContent 示例 -->
+<div>
+  <h3>{name}</h3>
+  <p>地址: {address}</p>
+  <p>类型: {type}</p>
+  <p>数值: {value}</p>
+</div>
+```
+
+当点击的要素 `properties` 为：
+```json
+{"name": "北京站", "address": "北京市东城区", "type": "火车站", "value": 12345}
+```
+
+弹框显示：
+```html
+<div>
+  <h3>北京站</h3>
+  <p>地址: 北京市东城区</p>
+  <p>类型: 火车站</p>
+  <p>数值: 12345</p>
+</div>
+```
+
+返回结果示例：
+```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,12 +1,12 @@
 {
   "name": "mapbox-create-map-mcp",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A Mapbox-based MCP tool for creating geographic data visualizations",
   "main": "dist/index.js",
   "module": "src/index.js",
   "types": "dist/index.d.ts",
   "bin": {
-    "mapbox-create-map-mcp": "./bin/cli.js"
+    "mapbox-create-map-mcp": "bin/cli.js"
   },
   "files": [
     "dist",
@@ -57,7 +57,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/gis-team/mapbox-create-map.git"
+    "url": "git+https://github.com/gis-team/mapbox-create-map.git"
   },
   "bugs": {
     "url": "https://github.com/gis-team/mapbox-create-map/issues"

package/src/icon.js

@@ -0,0 +1,129 @@
+/**
+ * CreateIcon - 图标搜索工具
+ * 从iconfont搜索图标并返回data:image/svg+xml格式
+ */
+class CreateIcon {
+  constructor() {
+    this.metadata = {
+      keyword: {
+        type: 'string',
+        required: true,
+        description: '搜索关键词，例如: "车辆", "地图", "定位" 等'
+      },
+      color: {
+        type: 'string',
+        required: false,
+        default: '#1890FF',
+        description: '图标颜色，十六进制格式，例如: "#FF0000"'
+      },
+      size: {
+        type: 'number',
+        required: false,
+        default: 48,
+        description: '图标大小，单位为像素'
+      }
+    };
+  }
+
+  /**
+   * 搜索图标
+   * @param {Object} config - 搜索配置
+   * @param {string} config.keyword - 搜索关键词
+   * @param {string} [config.color] - 图标颜色
+   * @param {number} [config.size] - 图标大小
+   * @returns {Promise<Object>} 返回图标数据
+   */
+  async search(config) {
+    if (!config.keyword || typeof config.keyword !== 'string') {
+      throw new Error('keyword 是必填字段，且必须是字符串');
+    }
+
+    const https = require('https');
+    const querystring = require('querystring');
+
+    const postData = querystring.stringify({
+      q: config.keyword,
+      sortType: 'updated_at',
+      page: 1,
+      pageSize: 10,
+      fromCollection: -1,
+      complex: 1,
+      t: Date.now(),
+      ctoken: 'null'
+    });
+
+    const options = {
+      hostname: 'www.iconfont.cn',
+      port: 443,
+      path: '/api/icon/search.json',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+        'Accept': 'application/json, text/javascript, */*; q=0.01',
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+        'Referer': 'https://www.iconfont.cn/search/index',
+        'X-Requested-With': 'XMLHttpRequest',
+        'Content-Length': Buffer.byteLength(postData)
+      }
+    };
+
+    return new Promise((resolve, reject) => {
+      const req = https.request(options, (res) => {
+        let data = '';
+        res.on('data', (chunk) => { data += chunk; });
+        res.on('end', () => {
+          try {
+            const result = JSON.parse(data);
+            if (result.code === 200 && result.data && result.data.icons && result.data.icons.length > 0) {
+              const icon = result.data.icons[0];
+              let svgContent = icon.show_svg;
+              
+              if (!svgContent) {
+                resolve({ success: false, data: null, message: '图标没有SVG内容' });
+                return;
+              }
+
+              // 应用颜色和大小
+              const color = config.color || '#1890FF';
+              const size = config.size || 48;
+              
+              // 替换fill颜色
+              svgContent = svgContent.replace(/fill="[^"]*"/g, `fill="${color}"`);
+              // 设置宽高
+              svgContent = svgContent.replace(/style="[^"]*"/, `style="width: ${size}px; height: ${size}px; vertical-align: middle; fill: ${color}; overflow: hidden;"`);
+              
+              // 转换为data URI (base64编码)
+              const base64 = Buffer.from(svgContent).toString('base64');
+              const dataUri = `data:image/svg+xml;base64,${base64}`;
+              
+              resolve({
+                success: true,
+                data: dataUri,
+                name: icon.name,
+                id: icon.id
+              });
+            } else {
+              resolve({ success: false, data: null, message: '未找到匹配的图标' });
+            }
+          } catch (e) {
+            reject(new Error(`解析响应失败: ${e.message}`));
+          }
+        });
+      });
+
+      req.on('error', (e) => {
+        reject(new Error(`请求失败: ${e.message}`));
+      });
+
+      req.setTimeout(10000, () => {
+        req.destroy();
+        reject(new Error('请求超时'));
+      });
+
+      req.write(postData);
+      req.end();
+    });
+  }
+}
+
+module.exports = { CreateIcon };

package/src/server.js

@@ -87,8 +87,8 @@ class CreatePopup {
       htmlContent: {
         type: 'string',
         required: true,
-        default: '<div style="padding: 10px;"><h3>标题</h3><p>内容</p></div>',
-        description: '弹框的HTML内容，支持完整的HTML标签和内联样式'
+        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',
@@ -187,10 +187,131 @@ class CreatePopup {
   }
 }
 
+/**
+ * CreateIcon - 图标搜索工具
+ * 从iconfont搜索图标并返回data:image/svg+xml格式
+ */
+class CreateIcon {
+  constructor() {
+    this.metadata = {
+      keyword: {
+        type: 'string',
+        required: true,
+        description: '搜索关键词，例如: "车辆", "地图", "定位" 等'
+      },
+      color: {
+        type: 'string',
+        required: false,
+        default: '#1890FF',
+        description: '图标颜色，十六进制格式，例如: "#FF0000"'
+      },
+      size: {
+        type: 'number',
+        required: false,
+        default: 48,
+        description: '图标大小，单位为像素'
+      }
+    };
+  }
+
+  async search(config) {
+    if (!config.keyword || typeof config.keyword !== 'string') {
+      throw new Error('keyword 是必填字段，且必须是字符串');
+    }
+
+    const https = require('https');
+    const querystring = require('querystring');
+
+    const postData = querystring.stringify({
+      q: config.keyword,
+      sortType: 'updated_at',
+      page: 1,
+      pageSize: 10,
+      fromCollection: -1,
+      complex: 1,
+      t: Date.now(),
+      ctoken: 'null'
+    });
+
+    const options = {
+      hostname: 'www.iconfont.cn',
+      port: 443,
+      path: '/api/icon/search.json',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+        'Accept': 'application/json, text/javascript, */*; q=0.01',
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+        'Referer': 'https://www.iconfont.cn/search/index',
+        'X-Requested-With': 'XMLHttpRequest',
+        'Content-Length': Buffer.byteLength(postData)
+      }
+    };
+
+    return new Promise((resolve, reject) => {
+      const req = https.request(options, (res) => {
+        let data = '';
+        res.on('data', (chunk) => { data += chunk; });
+        res.on('end', () => {
+          try {
+            const result = JSON.parse(data);
+            if (result.code === 200 && result.data && result.data.icons && result.data.icons.length > 0) {
+              const icon = result.data.icons[0];
+              let svgContent = icon.show_svg;
+              
+              if (!svgContent) {
+                resolve({ success: false, data: null, message: '图标没有SVG内容' });
+                return;
+              }
+
+              // 应用颜色和大小
+              const color = config.color || '#1890FF';
+              const size = config.size || 48;
+              
+              // 替换fill颜色
+              svgContent = svgContent.replace(/fill="[^"]*"/g, `fill="${color}"`);
+              // 设置宽高
+              svgContent = svgContent.replace(/style="[^"]*"/, `style="width: ${size}px; height: ${size}px; vertical-align: middle; fill: ${color}; overflow: hidden;"`);
+              
+              // 转换为data URI
+              const base64 = Buffer.from(svgContent).toString('base64');
+              const dataUri = `data:image/svg+xml;base64,${base64}`;
+              
+              resolve({
+                success: true,
+                data: dataUri,
+                name: icon.name,
+                id: icon.id
+              });
+            } else {
+              resolve({ success: false, data: null, message: '未找到匹配的图标' });
+            }
+          } catch (e) {
+            reject(new Error(`解析响应失败: ${e.message}`));
+          }
+        });
+      });
+
+      req.on('error', (e) => {
+        reject(new Error(`请求失败: ${e.message}`));
+      });
+
+      req.setTimeout(10000, () => {
+        req.destroy();
+        reject(new Error('请求超时'));
+      });
+
+      req.write(postData);
+      req.end();
+    });
+  }
+}
+
 class McpServer {
   constructor() {
     this.createMap = new CreateMap();
     this.createPopup = new CreatePopup();
+    this.createIcon = new CreateIcon();
     this.serverInfo = {
       name: 'mapbox-create-map-mcp',
       version: '1.0.0',
@@ -430,7 +551,7 @@ class McpServer {
               },
               htmlContent: {
                 type: 'string',
-                description: '弹框的HTML内容，支持完整的HTML标签和内联样式'
+                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',
@@ -440,6 +561,29 @@ class McpServer {
             },
             required: ['name', 'htmlContent']
           }
+        },
+        // CreateIcon 工具
+        {
+          name: 'CreateIcon',
+          description: '从iconfont搜索图标并返回data:image/svg+xml格式的图标数据，可直接用于img标签的src属性或Mapbox图层的图标配置。',
+          inputSchema: {
+            type: 'object',
+            properties: {
+              keyword: {
+                type: 'string',
+                description: '搜索关键词，例如: "车辆", "地图", "定位", "建筑" 等'
+              },
+              color: {
+                type: 'string',
+                description: '图标颜色，十六进制格式，例如: "#FF0000", "#333333"'
+              },
+              size: {
+                type: 'number',
+                description: '图标大小，单位为像素，默认24'
+              }
+            },
+            required: ['keyword']
+          }
         }
       ]
     };
@@ -486,6 +630,9 @@ class McpServer {
         case 'CreatePopup':
           result = await this.createPopup.create(args);
           break;
+        case 'CreateIcon':
+          result = await this.createIcon.search(args);
+          break;
         default:
           throw new Error(`Unknown tool: ${name}`);
       }