vjmcpsdk

vjmcpsdk

唯杰地图MCPSDK

安装

npm install vjmcpsdk

用法

import vjmap from vjmap
import { initializeMCP, createTool, z } from vjmcpsdk

let apiUrl = map.getService().baseUrl();
let token = map.getService().accessToken;

// 初始化MCP连接，使用新的简化API
console.log('初始化MCP连接...')
let mcpInstance = await initializeMCP({
    apiBase: apiUrl,
    autoConnect: true,
    mapInstance: map
})

const sessionId = mcpInstance.state.sessionId
// 注册地图相关工具
await mcpInstance.registerMapTools()

// 注册自定义工具示例 (如果要自定义工具，则用下面的示例)
await registerCustomTool(mcpInstance, z)


 // flashPos 函数实现
const flashPos = (bounds) => {
    map.fitMapBounds(vjmap.GeoBounds.fromArray(bounds), { padding: 300 })
    return new Promise((resolve) => {
        const routePath = vjmap.GeoBounds.fromArray(bounds).toPointArray();
        routePath.push(routePath[0])
        let geoLineDatas = [];
        geoLineDatas.push({
            points: map.toLngLat(routePath),
            properties: {
                opacity: 1.0
            }
        })

        let polylines = new vjmap.Polyline({
            data: geoLineDatas,
            lineColor: 'yellow',
            lineWidth: 3,
            lineOpacity: ['get', 'opacity'],
            isHoverPointer: false,
            isHoverFeatureState: false
        });
        polylines.addTo(map);

        vjmap.createAnimation({
            from: 1,
            to: 10,
            duration: 1000,
            onUpdate: (e) => {
                const data = polylines.getData();
                if (data && data.features && data.features[0]) {
                    data.features[0].properties.opacity = parseInt(e.toString()) % 2 ? 1.0 : 0;
                    polylines.setData(data);
                }
            },
            onStop: () => {
                polylines.remove()
                resolve({})
            },
            onComplete: () => {
                polylines.remove()
                resolve({})
            }
        })
    })
}

// 注册自定义工具示例
async function registerCustomTool(mcpInstance, z) {
    if (!mcpInstance) return

    // 使用 zod 定义工具输入 schema
    const inputSchema = z.object({
        bounds: z.array(z.number()).length(4).describe('边界坐标数组 [minX, minY, maxX, maxY]')
    })

    // 创建工具定义
    const tool = createTool(
        'map_flash_position',
        '在地图上闪烁显示指定边界区域',
        inputSchema,
        'custom'
    )

    // 创建工具处理函数
    const handler = async (args) => {
        try {
            const validatedArgs = inputSchema.parse(args)
            const { bounds } = validatedArgs

            // 调用 flashPos 函数
            await flashPos(bounds)

            return {
                content: [{
                    type: 'text',
                    text: `已在地图上闪烁显示边界区域: [${bounds.join(', ')}]`
                }]
            }
        } catch (error) {
            return {
                content: [{
                    type: 'text',
                    text: `工具执行失败: ${error instanceof Error ? error.message : String(error)}`
                }],
                isError: true
            }
        }
    }

    // 注册工具
    mcpInstance.registerTool(tool, handler, "custom")

    // 重要：注册工具到服务器，这样服务端才能获取到自定义工具
    try {
        const serviceManager = mcpInstance.getServiceManager()
        if (serviceManager) {
            await serviceManager.registerToolsToServer()
            console.log('自定义工具已成功注册到服务器')
        }
    } catch (error) {
        console.error('注册自定义工具到服务器失败:', error)
    }
}

唯杰地图介绍

唯杰地图VJMAP为用户自定义地图格式WebGIS可视化显示开发提供的一站式解决方案，支持的格式如常用的AutoCAD的DWG格式文件、GeoJSON等常用GIS文件格式，它使用WebGL矢量图块和自定义样式呈现交互式地图, 提供了全新的大数据可视化、实时流数据可视化功能，通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析，可帮助您在网站中构建功能丰富、交互性强、可定制的地图应用。

唯杰地图特点

• 完全兼容AutoCAD格式的DWG文件，无需转换
• 绘图技术先进：采用WebGL技术，支持矢量地图渲染，支持栅格、图片、视频等图形渲染，支持3D模型渲染；
• 个性化地图：服务端渲染和前端渲染都支持自定义样式表达式，灵活强大；
• 多视角模式：支持2D、3D视角，支持垂直视角、360度旋转视角；
• 视觉特性：支持无极缩放、支持粒子、航线等动画效果、支持飞行、平移等运动特效；
• 功能完善：支持所有常见的地图功能，提供丰富的js接口；
• 交互控制：支持鼠标/单指拖拽、上下左右按键进行地图平移，支持鼠标滚轮、双击、双指进行地图缩放，支持Shift+拉框放大；
• 大数据可视化：性能卓越，支持大数据可视化展示
• 跨平台支持(支持windows,linux); 支持docker部署;支持私有化部署;支持桌面端语言开发(如C#、Java、C++语言)
• 全面支持用第三方开源的openlayers 、leaflet 、maptalks 来加载CAD地图进行开发
• 支持对图像格式如tiff,jpg,png等常用图像格式进行切片处理,实现几百M以上的图片前端秒开