mapbox-create-map-mcp 1.4.0 → 1.4.1

package/README.md

@@ -106,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,6 +1,6 @@
 {
   "name": "mapbox-create-map-mcp",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A Mapbox-based MCP tool for creating geographic data visualizations",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/icon.js

@@ -10,11 +10,21 @@ class CreateIcon {
         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,
-        default: '#1890FF',
-        description: '图标颜色，十六进制格式，例如: "#FF0000"'
+        description: '图标颜色，十六进制格式，例如: "#FF0000"。不传则保持原始颜色'
       },
       size: {
         type: 'number',
@@ -29,7 +39,9 @@ class CreateIcon {
    * 搜索图标
    * @param {Object} config - 搜索配置
    * @param {string} config.keyword - 搜索关键词
-   * @param {string} [config.color] - 图标颜色
+   * @param {number} [config.id] - 图标ID，优先查找
+   * @param {number} [config.index] - 选择第几个（0-49）
+   * @param {string} [config.color] - 图标颜色，不传保持原色
    * @param {number} [config.size] - 图标大小
    * @returns {Promise<Object>} 返回图标数据
    */
@@ -41,11 +53,16 @@ class CreateIcon {
     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: 10,
+      pageSize: pageSize,
       fromCollection: -1,
       complex: 1,
       t: Date.now(),
@@ -75,7 +92,20 @@ class CreateIcon {
           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];
+              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) {
@@ -83,14 +113,17 @@ class CreateIcon {
                 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;"`);
+              // 只有传入 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');

package/src/server.js

@@ -199,11 +199,21 @@ class CreateIcon {
         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,
-        default: '#1890FF',
-        description: '图标颜色，十六进制格式，例如: "#FF0000"'
+        description: '图标颜色，十六进制格式，例如: "#FF0000"。不传则保持原始颜色'
       },
       size: {
         type: 'number',
@@ -222,11 +232,16 @@ class CreateIcon {
     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: 10,
+      pageSize: pageSize,
       fromCollection: -1,
       complex: 1,
       t: Date.now(),
@@ -256,7 +271,20 @@ class CreateIcon {
           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];
+              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) {
@@ -264,14 +292,17 @@ class CreateIcon {
                 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;"`);
+              // 只有传入 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');