背景

在之前的博文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 ID`
	`style: 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为深色背景颜色时，这里也传深色背景样式`
	`})`