背景

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

结果如下:

可以访问 demo地址 https://vjmap.com/guide/newmap.html 去体验下效果

应用场景

适用于在前端有数据,需要在线创建或基于现在CAD图形进行修改或删除;如可获取全国的GeoJson数据创建一个CAD图形;对于一些经常变化的数据如工程进度图纸根据进度数据实时绘制生成DWG图纸等场景;对于专业复杂的图形绘制或编辑工作,建议使用ObjectARX对AutoCAD进行二次开发实现!

如何在前端通过JavaScript创建修改CAD图形的更多相关文章

  1. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  2. 第三篇:web之前端之JavaScript基础

    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...

  3. 第十一章 前端开发-JavaScript

    第十一章 前端开发-JavaScript 11.3.1 js引入方式 行内样式 <p id="" class="" style="" ...

  4. 前端06 /JavaScript之BOM、DOM

    前端06 /JavaScript 目录 前端06 /JavaScript 昨日内容回顾 js的引入 js的编程要求 变量 输入输出 基础数据类型 number string boolean null ...

  5. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  6. 互联网公司前端初级Javascript面试题

    互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...

  7. javascript创建类的6种方式

    javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...

  8. 好程序员web前端分享javascript关联数组用法总结

    好程序员web前端分享javascript关联数组用法总结,有需要的朋友可以参考下. Hash关联数组定义 代码如下 // 定义空数组 myhash = { } // 直接定义数组 myhash = ...

  9. Scrollanim – CSS3 & JavaScript 创建滚动动画

    Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...

随机推荐

  1. client-go实战之二:RESTClient

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  2. k8s 存活探针(健康检查)

    重启策略 (RestartPolicy ) Always:当容器终止退出后,总是重启容器,默认策略. OnFailure:当容器异常退出(退出状态码非0)时,才重启容器. Never:当容器终止退出, ...

  3. junit4 套件测试

    junit4 中的套件可以用来测试一个需要依赖的业务流程,如购买必须依赖与登录成功 代码实现: 测试数据存放 public class BaseTest { protected static Hash ...

  4. Hash值和位运算

    一.Hash 1.md5是hash算法,不可逆,还原的是暴力穷举的方式解析的:加盐之后穷举也不能还原: 2.压缩映射会有重复,即哈希冲突: 二.ConcurrentHashMap 1.putIfAbs ...

  5. Java字符串常量池及字符串判等解析

    一.理解"=="的含义 "=="常用于两个对象的判等操作,在Java中,"=="主要有以下两种用法: 1.基础数据类型:比较的是他们的值是否 ...

  6. 【第十一篇】- Git Gitee之Spring Cloud直播商城 b2b2c电子商务技术总结

    Git Gitee 大家都知道国内访问 Github 速度比较慢,很影响我们的使用. 如果你希望体验到 Git 飞一般的速度,可以使用国内的 Git 托管服务--Gitee(gitee.com). G ...

  7. 【C++基础教程】第三课

    上次的课后练习答案 练习一 第一题a=8 第二题8 第三题(int)(a+0.2) 提示:把浮点数转换为整数,用强制类型转换的方式.(int)(...)表示把...的内容强制转换为int类型,同理,( ...

  8. Cookie和Session的介绍与认识

    Cookie: cookie是一种客户端的状态管理技术. 当浏览器向服务器发送请求的时候,服务器会将少量的数据以set-cookie消息头的方式发送给浏览器,当浏览器再次访问服务器时,会将这些数据以c ...

  9. Shell系列(24)- 条件判断之文件类型

    按照文件类型进行判断 标红,记住:其他了解即可 测试选项 作用 -b 文件 判断该文件是否存在,并且是否为块设备文件(是块设备文件为真) -c 文件 判断该文件是否存在,并且是否为字符设备文件(是字符 ...

  10. php 设计模式 --桥接模式

    php抽象类和接口的区别 https://www.cnblogs.com/vinter/p/8716685.html 什么时候适合使用 --- 多个角色配合工作:抽象角色对应具体角色: <?ph ...