前言
用数据生成CAD图，一般采用的ObjectArx对CAD二次开发完成。ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包，它提供了以C++为基础的面向对象的开发环境及应用程序接口，能访问和创建AutoCAD图形数据库。而由于现在懂C++的人少，很多人对C++有点望而生畏。则JavaScript 是互联网上最流行的脚本语言，用户群体很大。那有没有可能利用JavaScript来进行数据成图？
今天和大家聊聊，怎么用500行JavaScript代码，根据数据在前端创建一个Dwg格式的工程剖面图。
效果
先上效果图
它支持哪些功能
-
支持CAD的27种实体类型的创建，如线、文字、填充等
-
支持对DWG图中实体进行修改、克隆、删除等操作
-
支持创建CAD图层、线型、块定义、文字样式
-
支持从外部图形中拷贝实体到当前创建的CAD图中
-
支持块属性文字的创建和设置
-
对创建好的CAD图形数据能以GeoJson的格式在前端直接展示，同时能选中移动等操作
-
对创建好的CAD图形能在前端展示，同时能点击弹出实体类型等属性
-
能导出成DWG图形
实现原理
（1） 对剖面图中不变的元素如图例做成模板。创建图时直接拷贝这些实体即可。对于图签可以外部图形插入，同时图签中需要修改的文字内容如制图人或日期等字段，可以块属性文字的方式在创建时以属性赋值的方式来进行创建。如上面生成的剖面图的模板来源于下面这两个模板图形。 剖面图模板：
图签模板：(其中单位和日期是块属性文字，支持插入的时候输入属性值进行修改
(2 获取要创建的绘图数据,示例中对数据进行了模拟生成。
(3 根据唯杰地图https://vjmap.com/ SDK中提供创建CAD实体类型的方法创建相关实体。 唯杰地图SDK支持的实体类型有DbLine直线、DbCurve曲线、Db2dPolyline二维折线、Db3dPolyline三维多段线、DbPolyline多段线、BlockReference块参照、DbArc圆弧、DbCircle圆、DbEllipse椭圆、DbHatch填充、Text单行文本、DbMText多行文本、RasterImage栅格图片、DbShape型实体、Spline样条曲线、Wipeout遮罩实体、Dimension标注、Db2LineAngularDimension角度标注[两条线]、Db3PointAngularDimension角度标注[三点]、DbAlignedDimension对齐标注、DbArcDimension圆弧标注、DbDiametricDimension直径标注、DbOrdinateDimension坐标标注、DbRadialDimension半径标注、DbRadialDimensionLarge半径折线标注、DbRotatedDimension转角标注、AcDbAttributeDefinition属性注记、AcDbAttribute块属性、DbLayer图层、DbTextStyle文字样式、DbDimStyle标注样式、DbLinetypeStyle线型样式、DbBlock块定义、DbDocument数据库文档。
如何减少代码量可以用如下方法：
-
技巧一：可以直接拷贝模板中的实体，对实体的属性进行修改。这样能少赋值参数，减少代码量。
-
技巧二：对于重复的对象，可以创建块，变化的文字，以块属性文字定义。再重复创建块参照，修改属性文字。
(4 把创建的数据生成一个JSON对象，调用唯杰地图服务，后台创建DWG图形。
(5 把后台创建的DWG图形数据以GeoJson数据或GIS瓦片的格式返回给前端进行展示。对于图不大的情况，可用GeoJson数据进行展示。如果图大时，GeoJson数据量大，数据返回慢，渲染也会受影响，这时建议用GIS栅格瓦片或矢量瓦片的时候进行绘制。
在线体验地址
https://vjmap.com/demo/#/demo/map/comprehensive/03datatodwgmap
应用场景
能在前端通过JavaScript创建CAD格式的DWG图形，极大的降低了数据生成CAD图的门槛，具有很广泛的应用场景。例如，在建筑和工程领域，DWG文件是广泛使用的标准文件格式，如工程中常用的一些等值线图、剖面图、水位图等；建筑、交通等不同行业中的相关图纸都可以用这个来生成DWG图形。偷个懒，让目前很火的ChatGPT来总结下吧：
全部实现代码
// --数据自动生成CAD工程剖面图--根据数据在前端创建生成CAD格式的工程剖面图形
// 剖面图模板来源地图id和版本
let templateSectId = "template_sect";
let templateSecVersion = "v1";
// 图框模板来源id和版本
const templateTkMapId = "template_tk";
const templateTkVersion = "v1";
// 注：以下所的有objectid来源方法为：
// 在唯杰云端管理平台 https://vjmap.com/app/cloud 里面以内存方式打开模板图，然后点击相应实体，在属性面板中获取object值
// 或者以几何渲染方式打开模板图，点击相应实体，在属性面板中获取object值，如果是块实体(objectid中有多个_,取第一个_前面的字符串
let svc = new vjmap.Service(env.serviceUrl, env.accessToken;
// 获取模板信息
let tplInfo;
// 获取模板中的信息
const getTemplateInfo = async (templateSectId, version => {
let features = await getTemplateData(templateSectId, version;
// 获取所有填充符号。先获取 填充符号 图层中的所有文字，文字上面的hatch就是填充符号
let hatchInfos = features.filter(f => f.layername == "填充符号" && f.name == "AcDbMText".map(t => {
let hatch = features.filter(f => f.layername == "填充符号" && f.name == "AcDbHatch".find(h =>
// 填充垂直方向位于文字上方，并且距离不能超过文字高度两倍，水平方向包含文字中心点水平方向
h.envelop.min.y > t.envelop.max.y &&
h.envelop.min.y - t.envelop.max.y < t.envelop.height( * 2 &&
h.envelop.min.x <= t.envelop.center(.x &&
h.envelop.max.x >= t.envelop.center(.x
if (!hatch return;
return {
name: t.text,
hatchObjectId: hatch.objectid
}
}
// 获取绘制开始的位置线
let lineInfo = features.filter(f => f.layername == "线" && f.name == "AcDbLine";
let startLine;
if (lineInfo.length > 0 {
startLine = {
objectId: lineInfo[0].objectid,
positon: [lineInfo[0].envelop.min.x, lineInfo[0].envelop.min.y]
}
}
return {
startLine,
hatchInfos
}
}
// 模拟数据
const mockData = (hatchNames, minCount => {
// 对填充符号次序先随机排序下，这样每次生成次序就不一样了
hatchNames.sort(( => Math.random( - 0.5;
let data = [];
// 孔口个数
let kongCount = vjmap.randInt(minCount, minCount * 2;
for(let i = 0; i < kongCount; i++ {
let item = {
name: '孔' + (i + 1,
x: 15 * (i + 1 + vjmap.randInt(0, 10 + 1000, // 孔口坐标x 生成随机