自从Claude 4推出来之后，我就在一直使用Claude 4辅助进行开发，过去很多开发工作都需要依赖开发人员的配合，像我这种三流程序员大多数的时间只做一些验证性的开发工作，但是随着Claude 4+Copilot这种组合的推出，很多具体的工作我也可以做了，而今天要介绍的就是通过「Claude4+Qwen3+Leaflet」构建的一个完全使用自然语言交互的「智能一张图」。
同时在我的理解里面一张图「智能化」之后，现有常见带有复杂嵌套的UI交互模式就没有意义了，我们只需要一个地图和一个对话窗口的纯净模式，先看几个简单的场景效果：
一、定位到无锡（简单的地图操作命令，从日志上看是将命令理解并调用了封装的set_view命令）
二、在改位置打上一个标签（简单的地图绘制命令，从日志上看是将命令理解并调用了封装的add_marker命令）。
三、查询tasks表中名为 公园湖边界采集 的对象，并将其中的点序列转换成 红色的线和蓝色的圆圈数组，并将视口设置到这些点的中心点（mongodb数据库查询、数据转换、命令分解组合）。
这个数据是我之前配合定位设备，然后也使用Claude开发了一个数据采集的工具来实现的，该应用会在下一篇文章中介绍。
如下是整个「智能一张图」命令执行的完整流程：
「智能一张图」需要解决的一个关键问题：
如何能够让大模型理解地图接口并将自然语言转换成为准确的前端地图命令调用？
如果没有这样，就会出现一个局面：
第一、大模型乱生成代码；
第二、生成的代码没办法执行。
而解决这个问题的办法就是将前端地图工具化，就是利用qwen-agent这种智能体框架提供的function calling和mcp的工具定义和集成能力，让大模型来理解要操作的地图工具。
而利用Claude 4+Copilot来进行开发的思路就是，先从简单的问题入手，然后再分步骤执行新的功能，如果直接一步生成，效果很差，而且不能进准的进行微调，这很重要，具体的步骤如下：
一、先使用qwen-agent把qwen3集成进来，这个部分我没有资源来部署qwen3，所以直接使用的是阿里百炼平台的在线接口，而qwen3的集成可以参考官方的assistant_qwen3.py这个例子来作为基础，如果你不会安装和启动，可以直接使用Copilot的Ageng模式来运行，体验很好，避免浪费时间在环境部署上。
二、生成能够访问访问mongodb数据库和位置搜索的MongodbTool和LocationSearchTool。
三、重构整体应用，让其进行前后端分离，这样便于前端地图的页面集成，默认的他使用的是WebUI这种工具。
四、基于前端页面生成MapTool工具，该工具基于Leaflet的功能会提炼出基础的map_command，然后大模型会基于输入的提示词，查询数据库，然后将数据和调用的命令转换成为map_command，然后发送到前端，前端拿到响应之后会提取map_command，然后再在前端找到相应的封装方法，然后就将参数输入调用执行就可以了，所以这个部分后端配置到qwen-agent中的MapTool和前端封装的executeMapCommand是需要完全一致，这个效果可以看前面案例效果部分，日志输出都有展示这个部分的效果。
一、为什么选择Qwen3呢？
因为对于我们行业来说，数据安全很重要，所以目前只已关注能够私有化部署的开源大模型，目前比较优秀的就是Qwen3和DeepSeek，但是从我之前的测试来看Qwen3在工具使用方面是要优于当前版本的DeepSeek的，所以虽然大家现在都在宣传DeepSeek，但是从实际使用出发，我们做定制应用能够使用工具这是最关键的能力，所以本次就选择了阿里最新开源的Qwen3。
二、、为什么选择Leaflet呢？
因为简单，我本次只是从实验的目的来验证这个整合的思路，而从之前Claude 4.0的使用经验来看，Cesiumjs和Mapbox还需要申请token以及问题的解决时间都比较长，而基于Leaflet出错的概率相对较低，所以为了避免在地图上消耗更多的时间，所以我只选择了Leaflet这个框架，但是基本的原理都是想通的，跑通之后在Copilot里面只要一条命令就可以了，当然后面还会需要一些微调的工作。
更多信息WX公众号：GISERSAY
博主接单 Cesium、leaflet等地图应用调优及GIS数据处理任务，费用可按次或工作量收费，如有需要请在WX公众中获取微信添加。
暂无评论内容