vjmcpsdk
v1.0.0
Published
vjmcpsdk
Readme
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以上的图片前端秒开
