mapbox-create-map-mcp 1.3.1 → 1.4.1

package/README.md

@@ -47,7 +47,7 @@ npx mapbox-create-map-mcp
 
 输入参数：
 - `name` (string, 必需): 弹框样式名称
-- `htmlContent` (string, 必需): 弹框的HTML内容
+- `htmlContent` (string, 必需): 弹框的HTML内容，**支持`{fieldName}`占位符动态绑定数据**
 - `theme` (string, 可选): 预设主题 `light` | `dark` | `minimal` | `custom`
 - `closeButton` (boolean, 可选): 是否显示关闭按钮
 - `closeOnClick` (boolean, 可选): 点击地图时是否关闭
@@ -58,6 +58,35 @@ npx mapbox-create-map-mcp
 - `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
 {
@@ -77,6 +106,47 @@ npx mapbox-create-map-mcp
 }
 ```
 
+#### 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
+
+返回结果示例：
+```json
+{
+  "success": true,
+  "data": "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0i...",
+  "name": "建筑",
+  "id": 3841001
+}
+```
+
+使用示例：
+```javascript
+// 基本搜索
+{ keyword: "建筑" }
+
+// 选择第3个结果
+{ keyword: "建筑", index: 2 }
+
+// 使用之前的ID精确查找
+{ keyword: "建筑", id: 3841001 }
+
+// 指定颜色和大小
+{ keyword: "建筑", color: "#FF5500", size: 64 }
+```
+
+返回的 `data` 可直接用于：
+```html
+<img src="data:image/svg+xml;base64,PHN2Zy..." />
+```
+
 ## JavaScript 库使用
 
 ### 基本使用

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "mapbox-create-map-mcp",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "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,162 @@
+/**
+ * CreateIcon - 图标搜索工具
+ * 从iconfont搜索图标并返回data:image/svg+xml格式
+ */
+class CreateIcon {
+  constructor() {
+    this.metadata = {
+      keyword: {
+        type: 'string',
+        required: true,
+        description: '搜索关键词，例如: "车辆", "地图", "定位" 等'
+      },
+      id: {
+        type: 'number',
+        required: false,
+        description: '图标ID，传入后会优先查找该ID的图标'
+      },
+      index: {
+        type: 'number',
+        required: false,
+        default: 0,
+        description: '选择搜索结果中的第几个图标，从0开始，范围0-49'
+      },
+      color: {
+        type: 'string',
+        required: false,
+        description: '图标颜色，十六进制格式，例如: "#FF0000"。不传则保持原始颜色'
+      },
+      size: {
+        type: 'number',
+        required: false,
+        default: 48,
+        description: '图标大小，单位为像素'
+      }
+    };
+  }
+
+  /**
+   * 搜索图标
+   * @param {Object} config - 搜索配置
+   * @param {string} config.keyword - 搜索关键词
+   * @param {number} [config.id] - 图标ID，优先查找
+   * @param {number} [config.index] - 选择第几个（0-49）
+   * @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');
+
+    // 确定 index，限制在0-49范围
+    let index = config.index !== undefined ? Math.max(0, Math.min(49, Math.floor(config.index))) : 0;
+    // pageSize 取 index + 1，确保能获取到指定位置的图标
+    const pageSize = index + 1;
+
+    const postData = querystring.stringify({
+      q: config.keyword,
+      sortType: 'updated_at',
+      page: 1,
+      pageSize: pageSize,
+      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 icons = result.data.icons;
+              let icon = null;
+
+              // 优先按 id 查找
+              if (config.id !== undefined) {
+                icon = icons.find(i => i.id === config.id);
+              }
+              
+              // 没找到则按 index 选择，越界默认第一个
+              if (!icon) {
+                const safeIndex = index < icons.length ? index : 0;
+                icon = icons[safeIndex];
+              }
+
+              let svgContent = icon.show_svg;
+              
+              if (!svgContent) {
+                resolve({ success: false, data: null, message: '图标没有SVG内容' });
+                return;
+              }
+
+              // 应用大小
+              const size = config.size || 48;
+              
+              // 只有传入 color 时才替换颜色，否则保持原始样式
+              if (config.color) {
+                svgContent = svgContent.replace(/fill="[^"]*"/g, `fill="${config.color}"`);
+                svgContent = svgContent.replace(/style="[^"]*"/, `style="width: ${size}px; height: ${size}px; vertical-align: middle; fill: ${config.color}; overflow: hidden;"`);
+              } else {
+                // 不修改颜色，只设置宽高
+                svgContent = svgContent.replace(/style="[^"]*"/, `style="width: ${size}px; height: ${size}px; vertical-align: middle; 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

@@ -187,10 +187,162 @@ class CreatePopup {
   }
 }
 
+/**
+ * CreateIcon - 图标搜索工具
+ * 从iconfont搜索图标并返回data:image/svg+xml格式
+ */
+class CreateIcon {
+  constructor() {
+    this.metadata = {
+      keyword: {
+        type: 'string',
+        required: true,
+        description: '搜索关键词，例如: "车辆", "地图", "定位" 等'
+      },
+      id: {
+        type: 'number',
+        required: false,
+        description: '图标ID，传入后会优先查找该ID的图标'
+      },
+      index: {
+        type: 'number',
+        required: false,
+        default: 0,
+        description: '选择搜索结果中的第几个图标，从0开始，范围0-49'
+      },
+      color: {
+        type: 'string',
+        required: false,
+        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');
+
+    // 确定 index，限制在0-49范围
+    let index = config.index !== undefined ? Math.max(0, Math.min(49, Math.floor(config.index))) : 0;
+    // pageSize 取 index + 1，确保能获取到指定位置的图标
+    const pageSize = index + 1;
+
+    const postData = querystring.stringify({
+      q: config.keyword,
+      sortType: 'updated_at',
+      page: 1,
+      pageSize: pageSize,
+      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 icons = result.data.icons;
+              let icon = null;
+
+              // 优先按 id 查找
+              if (config.id !== undefined) {
+                icon = icons.find(i => i.id === config.id);
+              }
+              
+              // 没找到则按 index 选择，越界默认第一个
+              if (!icon) {
+                const safeIndex = index < icons.length ? index : 0;
+                icon = icons[safeIndex];
+              }
+
+              let svgContent = icon.show_svg;
+              
+              if (!svgContent) {
+                resolve({ success: false, data: null, message: '图标没有SVG内容' });
+                return;
+              }
+
+              // 应用大小
+              const size = config.size || 48;
+              
+              // 只有传入 color 时才替换颜色，否则保持原始样式
+              if (config.color) {
+                svgContent = svgContent.replace(/fill="[^"]*"/g, `fill="${config.color}"`);
+                svgContent = svgContent.replace(/style="[^"]*"/, `style="width: ${size}px; height: ${size}px; vertical-align: middle; fill: ${config.color}; overflow: hidden;"`);
+              } else {
+                // 不修改颜色，只设置宽高
+                svgContent = svgContent.replace(/style="[^"]*"/, `style="width: ${size}px; height: ${size}px; vertical-align: middle; 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',
@@ -440,6 +592,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 +661,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}`);
       }