背景

在之前的博文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实体类型

下面以新建一个篮球场示意图以例，相关代码如下：

(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);