如何在前端通过JavaScript创建修改CAD图形

背景在之前的博文CAD图DWG解析WebGIS可视化技术分析总结、CAD_DWG图Web可视化一站式解决方案-唯杰地图-vjmap中讲解了如何把CAD的DWG格式的图纸Web可视化的方案，那在Web前端能不能通过JavaScript创建或基于现在的CAD图形进行修改呢？
现状创建修改CAD图形，一般是基于AutoCAD进行二次开发，ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包，它提供了以C++为基础的面向对象的开发环境及应用程序接口，能真正快速的访问AutoCAD图形数据库。与以往的 AutoCAD 二次开发工具 AutoLISP 和ADS不同，ObjectARX应用程序是一个DLL（动态链接库），共享AutoCAD的地址空间，对AutoCAD进行直接函数调用。所以，使用ARX编程的函数的执行速度得以大大提高。ARX 类库采用了标准的C++类库的封装形式，这也大大提高了程序员编程的可靠度和效率。
运用ObjectARX进行二次开发，必须首先设置好ObjectARX的开发环境。常用的开发环境是Microsoft Visual C++ 6.0 、Microsoft visual studio 2005、Microsoft visual studio 2008、Microsoft visual studio 2010 。同时，还需要安装ObjectARX SDK 。
Visual C++、ObjectARX等开发语言和环境肯定吓跑了不少开发者。那对于一些简单的场景，如只要根据数据自动成图或者在现在的图形上做一些很简单的修改，有没有一个简单的办法或语言和开发环境？
JS新建修改CAD图形唯杰地图在前端实现了常用的AutoCAD实体封装，能通过JavaScript脚本创建新的CAD图形。
支持的CAD实体类型类名称说明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转角标注DbLayer图层DbTextStyle文字样式DbDimStyle标注样式DbLinetypeStyle线型样式DbBlock块定义DbDocument数据库文档下面以新建一个篮球场示意图以例，相关代码如下：
(async () => { // --新建地图--在后台新建CAD图，然后在前端打开 // js代码 let svc = new vjmap.Service(env.serviceUrl, env.accessToken) let doc = new vjmap.DbDocument(); let entitys = []; let line1 = new vjmap.DbLine(); line1.start = [0, 0] line1.end = [0, 15] entitys.push(line1) let line2 = new vjmap.DbLine(); line2.start = [0, 14.1] line2.end = [2.99, 14.1] entitys.push(line2) let line3 = new vjmap.DbLine(); line3.start = [0, 0.9] line3.end = [2.99, 0.9] entitys.push(line3) let line4 = new vjmap.DbLine(); line4.start = [0, 9.95] line4.end = [5.8, 9.95] entitys.push(line4) let line5 = new vjmap.DbLine(); line5.start = [0, 5.05] line5.end = [5.8, 5.05] let hatch = new vjmap.DbHatch(); hatch.pattern = "SOLID"; hatch.color = 0xB43F32; hatch.points = [line4.start, line4.end, line5.end, line5.start]; entitys.push(hatch); entitys.push(line4) entitys.push(line5) let line6 = new vjmap.DbLine(); line6.start = [5.8, 5.05] line6.end = [5.8, 9.95] entitys.push(line6) let arc1 = new vjmap.DbArc(); arc1.center = [5.7963, 7.504]; arc1.radius = 1.8014; arc1.startAngle = 270 * Math.PI / 180.0; arc1.endAngle = 90 * Math.PI / 180.0; entitys.push(arc1) let arc2 = new vjmap.DbArc(); arc2.center = [5.7963, 7.504]; arc2.radius = 1.8014; arc2.startAngle = 90 * Math.PI / 180.0; arc2.endAngle = 270 * Math.PI / 180.0; //arc2.linetype = "DASHED" entitys.push(arc2) let arc3 = new vjmap.DbArc(); arc3.center = [1.575, 7.5]; arc3.radius = 6.75; arc3.startAngle = 282 * Math.PI / 180.0; arc3.endAngle = 78 * Math.PI / 180.0; entitys.push(arc3) let block = new vjmap.DbBlock(); block.name = "ball"; block.origin = [0, 0] block.entitys = entitys; doc.appendBlock(block); let blockRef1 = new vjmap.DbBlockReference(); blockRef1.blockname = "ball"; blockRef1.position = [0, 0]; doc.appendEntity(blockRef1); let blockRef2 = new vjmap.DbBlockReference(); blockRef2.blockname = "ball"; blockRef2.position = [28, 15]; blockRef2.rotation = Math.PI; doc.appendEntity(blockRef2); let otherEnts = [new vjmap.DbLine({start: [0, 15],end: [28, 15]}),new vjmap.DbLine({start: [0, 0],end: [28, 0]}),new vjmap.DbLine({start: [14, 0],end: [14, 15],colorIndex: 1}),new vjmap.DbCircle({center:[14, 7.5],radius: 1.83,color: 0xFF0000}),new vjmap.DbText({position: [14, 16],contents: "篮球场示意图",colorIndex: 1,horizontalMode: 4,height: 1,}) ] doc.appendEntity(otherEnts); // js代码 let res = await svc.updateMap({mapid: "basketballCourt",filedoc: doc.toDoc(),mapopenway: vjmap.MapOpenWay.Memory,style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式 }) if (res.error) {message.error(res.error) } let mapExtent = vjmap.GeoBounds.fromString(res.bounds); let prj = new vjmap.GeoProjection(mapExtent); var map = new vjmap.Map({container: 'map', // container IDstyle: svc.rasterStyle(),center: prj.toLngLat(mapExtent.center()),zoom: 2,renderWorldCopies: false }); map.attach(svc, prj); map.fitMapBounds(); map.addControl(new vjmap.NavigationControl()); map.addControl(new vjmap.MousePositionControl({showZoom: true})); map.enableLayerClickHighlight(svc, e => {e && message.info(`type: ${e.name}, objectid: ${e.objectid}, layer: ${e.layerindex}`); })})();创建完后，Web显示如下:

文章插图
把创建的DWG图形，在AutoCAD里面可以打开此图：

文章插图
修改或删除修改通过from属性设置来源于哪个图，会在此图的上面进行修改或新增删除，格式如形式为 mapid/version,如 exam/v1 .
删除的话，指定图中实体的objectID
示例代码如下：

let doc = new vjmap.DbDocument();/** 来源于哪个图，会在此图的上面进行修改或新增删除，格式如 形式为 mapid/version,如 exam/v1 . */doc.from = "basketballCourt/v1";// 修改或删除实体是通过传递 `objectid` 实体句柄，如果没有 `objectid` 则表示新增let modifyEnts = [/*修改*/new vjmap.DbCircle({objectid: "71",// 实体句柄，如传了实体句柄，是表示修改或删除此实体.colorIndex: 2}),/*删除*/new vjmap.DbText({objectid: "73",// 实体句柄，如传了实体句柄，是表示修改或删除此实体.delete: true // 表示删除}),/*新增(没有传 objectid )*/new vjmap.DbMText({position: [14, -2],contents: "我是多行文本",colorIndex: 3,attachment: 2,height: 1,})]doc.appendEntity(modifyEnts);// js代码let res = await svc.updateMap({mapid: "newBasketballCourt",filedoc: doc.toDoc(),mapopenway: vjmap.MapOpenWay.Memory,style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式})

结果如下：

文章插图
可以访问 demo地址 https://vjmap.com/guide/newmap.html 去体验下效果
应用场景【如何在前端通过JavaScript创建修改CAD图形】适用于在前端有数据，需要在线创建或基于现在CAD图形进行修改或删除；如可获取全国的GeoJson数据创建一个CAD图形；对于一些经常变化的数据如工程进度图纸根据进度数据实时绘制生成DWG图纸等场景；对于专业复杂的图形绘制或编辑工作，建议使用ObjectARX对AutoCAD进行二次开发实现！