唯杰地图-VJMAP

# AI绘CAD图

# # 用Trae、Cursor免费生成CAD图纸

# 示例效果

Trae 编辑器

Cursor 编辑器

# 使用步骤

​ 或者直接点击 https://vjmap.com/download/aidraw.zip (opens new window) 进行下载

  • 2、用Trae或Cursor 编辑器打开此项目源码
  • 3、在插件市场搜索LiveServer进行安装 (可选，如果有运行html的服务程序也可以不需要此步骤, 或者直接双击index.html文件在浏览器里面打开[此方案不支持获取本地文件])
  • 4、选中index.html文件，右键，在菜单中选择Open with Live Server
  • 5、在 trae 编辑器中进入Builder 模式， 或 cursor 中进入Composer或Edit模式，输入要绘制的内容进行提问
  • 6、生成完成后，可以打开 draw.js查看生成的内容，在浏览器中刷新页面查看生成的效果。
  • 7、在生成的页面中点击右上角的下载按钮，可下载生成的autocad支持的dwg图形文件。

# 教程视频

https://www.bilibili.com/video/BV1sRRYY2EBo/ (opens new window)

# 相关示例

绘制常用三角函数的示例图，用于教学用，要求有刻度、坐标轴和格网，x坐标范围-10到10
1

image-20250309195159868

绘制一只可爱的小猫，细节要丰富
1

image-20250309195734749

data目录中的china.json是中国地图的geojson数据, 通过这数据，绘制出中国地图，每个省需要填充颜色(颜色随机且符合地图制图规范)，同时标注名称,字体颜色为青色, 最后绘制整个图的图框
1

image-20250309200219874

画一个长80宽60厚2的板，要求周围带四个8mm孔，中心带一个16mm孔，周围圆角R5，并进行长度标注
1

image-20250309200527023

以下是北京市一周的气温情况，要求绘制一个气温变化曲线图，绘制最高温度曲线(红色)和最低温度曲线(绿色)，每个值上面绘制一个小圆，同时把天气情况写在最高温度曲线对应上的点上面。X轴为日期y轴为气温,需要绘制刻度值和坐标格网
[
    {"date": "2025-02-01", "weather": "晴", "max_temp": 5, "min_temp": -4},
    {"date": "2025-02-02", "weather": "阴", "max_temp": 9, "min_temp": 0},
    {"date": "2025-02-03", "weather": "晴", "max_temp": 11, "min_temp": 8},
    {"date": "2025-02-04", "weather": "多云", "max_temp": -2, "min_temp": -6},
    {"date": "2025-02-05", "weather": "大雪", "max_temp": -4, "min_temp": -7},
    {"date": "2025-02-06", "weather": "晴", "max_temp": 6, "min_temp": -2},
    {"date": "2025-02-07", "weather": "多云", "max_temp": 6, "min_temp": -1}
]
1
2
3
4
5
6
7
8
9
10

image-20250309200817897

生成的图点击下载，可直接下载dwg文件的图，用autocad直接打开查看

image-20250309202030768

# 唯杰AI绘CAD图使用

进入唯杰地图云端管理平台 (opens new window)，点击右边的AI绘制CAD图进入

image-20250303133120273

image-20250303133149480

点击查看视频教程 https://www.bilibili.com/video/BV1g19BYNECf/ (opens new window)

# 绘制图形

# 1、根据问题描述绘制图形

  • 在输入框中输入要绘制的内容描述，点击发送

  • AI根据描述内容，自动生成相应代码

  • 自动执行(或可选择手动执行)代码，生成CAD图形

  • 可点击直接下载生成的DWG图

    比如输入：

    绘制一只可爱的小猫，细节要丰富
    1

    image-20250303135551282

    注：在设置中设置大模型地址和大模型名称，不同的大模型生成的图效果不一样，此次示例生成的图用的大模型为claude 3.7 sonnet

# 2、直接指定数据绘制图形

如果数据少时，可以在提问中直接把数据写上进行提问

比如输入:

下面有几条线的坐标，用不同颜色绘制出来。
[[0, 0],[4, 0]]
[[4, 0],[2, 5],[3, 7]]
[[2, 3],[0, 0]]
1
2
3
4

image-20250303140212862

# 3、根据用户数据绘制图形

如果用户数据量多时，因为大模型上下文字数限制，并且大模型是按字的token进行收费的，所以可以先点击用户数据, 把数据提前输入在用户数据中，让代码在运行时获取数据生成图形。需要注意的是：因为大模型不知道用户数据格式，所以需要在问题中把数据格式描述清楚。

比如绘制中国地图，可先进入阿里数据可视化平台 (opens new window), 选择省数据，点击复制geojson

image-20250303142412632

image-20250303142742809

用户数据格式是中国地图的geojson数据, 通过这数据，绘制出中国地图，每个省需要填充颜色(颜色随机且符合地图制图规范)，同时标注名称,字体颜色为青色, 最后绘制整个图的图框
1

image-20250303143121222

注： 此次示例生成的图用的大模型为claude 3.7 sonnet

上面的geojson是通用数据，只需要描述中说明用户数据是geojson格式即可。但对于其他数据，需对数据格式进行描述才可。比如一个cvs的数据

1,Item1,3.5,7.2,A
2,Item2,1.2,4.8,B
3,Item3,5.6,9.1,C
4,Item4,2.3,6.7,A
1
2
3
4

提问时应该把每个字段描述清楚，同时把需求说清楚。

用户数据是一组csv格式的字符串数据，每项的内容为“序号,名称,x,y,类型”。获取数据中每行的x,y数据绘制一个小圆，颜色为类型来决定。小圆下面写上名称。(圆半径和字体高度根据所有数据的范围来确定)
1

image-20250303143743767

image-20250303144343835

注： 此次示例生成的图用的大模型为qwen-coder-plus-latest

# 4、引用其他CAD图的实体对象绘制

对于一些复杂的符号或符号在之前的图中已经存在，可以通过引用CAD图中的实体对象来进行绘制。

首先在唯杰地图云端管理平台 (opens new window)上传这个CAD图模板图(命名一个mapid)，通过内存直接打开的方式，点击要引用的实体对象，在右侧属性面板中获取此对象的objectid

image-20250303145548835

示例:

绘制一个停车场示例示例图（图纸宽300,高100)，2排9列，每个车位置都需要绘制出车的矩形范围、标注出编号和绘制车符号[块参照来源于克隆图形car ,克隆实体id为331, 块原来范围为[587613582,3103823616,587618261,3103825364]，基点在范围中点]。矩形范围画大点包含编号和车符号(占矩形1/2大小)，编号在上面，车符号在下面，两个不要重叠。
1

image-20250303150028471

# 5、引用其他CAD图或图层数据绘制

也可以引用其他CAD整个图，或CAD图中的几个图层数据，比如sys_world 中网络线和经纬度标注的内容如下

image-20250303151049961

基于图sys_world，选择图中的"网格线"和"经纬度标注"图层，图纸绘制范围为{"min":{"x":1756,"y":2537},"max":{"x":27713,"y":17957}}。请随机绘制50个颜色不同的小圆，小圆下面标注当前序号。
1

image-20250303151442124

# 生成图的方式

# 1、重新生成新的图形

​ 默认情况下每次创建会新建一个图形并自动打开

​ image-20250303152233475

# 2、直接加至当前图形中

如果要基于当前的图形上再加数据，可以选择把创建的实体自动直接加至当前地图中

image-20250303153502053

# 3、交互式手动加至当前图形中

image-20250303153906649

# 下载生成的CAD图

生成图形后，点击工具栏上面的下载CAD图，即可把生成的dwg图下到本地。用autocad打开即可查看。

私有化部署后，因为数据安全考虑，需要后台配置下才可以正常下载。

打开data目录中的config.json文件, 在system键下面设置要映射的目录地址的下载路径，再在usercfg通过设置shareWorkspace（绘图所在工作区名称，为空时为默认工作区）、shareDownload（token_router_static中设置的下载路径key）, 示例如下：

{
	"system" : {
	  "token_router_static": "_download_cad::./data/workspace/share/mapfiles"
	},
   "usercfg": {
    "shareWorkspace": "share",
    "shareDownload": "_download_cad"
  }
}
1
2
3
4
5
6
7
8
9

# 相关设置

# 清空会话内容

因为聊天时，会根据设置把历史记录(默认五条)做为上下文传入，如果要绘制的内容发生变化时，一定要记得清空会话内容（相当于新建会话)

# 在线大模型API设置

大模型可以在后台进行配置，也可以在前端由用户直接设置。

image-20250303160016995

更多设置可参考文档 https://vjmap.com/guide/aichat.html (opens new window)

# 如何用在线的大模型如deepseek免费生成图形

用在线API接口会消耗token需要花Money, 通过这办法可用在线AI网站免费生成代码

  • 1、选中设置中“只生成问题模板，不自动生成代码” image-20250213171532518
  • 2、在提问区输入要提问的问题，如
 获取北京市最近一个月的气温json数组。通过此天气的json数据创建新的地图, 要求绘制一个气温变化曲线图，绘制最高温度曲线(红色)和最低温度曲线(绿色)，同时把天气情况写在最高温度曲线对应上的点上面。X轴为日期(要有刻度)，y轴为气温(要有刻度, 刻度最小值为-20,最大值为40, 每个刻度的单位为5)
1
  • 3、点击发送开始提问，在之后弹出的AI提问问题对话框中选择复制，把问题复制下来。 image-20250213174811969
  • 4、打开在线AI网站如 deepseek (opens new window), 复制刚粘贴的内容
  • 5、复制AI生成的代码 image-20250213180109112
  • 6、在AI提问问题对话框中点击执行代码或者点击工具栏菜单中的执行代码，粘贴刚复制的代码，点击执行 image-20250213193012076
  • 7、等结果执行完成，就可以查看执行效果了 image-20250213193218984

← 上传创建地图 →