前端通過JavaScript創(chuàng)建修改CAD圖形詳情
1、現(xiàn)狀
創(chuàng)建修改CAD圖形,一般是基于AutoCAD進(jìn)行二次開發(fā),ObjectARX是AutoDesk公司針對(duì)AutoCAD平臺(tái)上的二次開發(fā)而推出的一個(gè)開發(fā)軟件包,它提供了以C++為基礎(chǔ)的面向?qū)ο蟮拈_發(fā)環(huán)境及應(yīng)用程序接口,能真正快速的訪問AutoCAD圖形數(shù)據(jù)庫。 與以往的 AutoCAD 二次開發(fā)工具 AutoLISP 和ADS不同,ObjectARX應(yīng)用程序是一個(gè)DLL(動(dòng)態(tài)鏈接庫),共享AutoCAD的地址空間,對(duì)AutoCAD進(jìn)行直接函數(shù)調(diào)用。所以,使用ARX編程的函數(shù)的執(zhí)行速度得以大大提高。ARX 類庫采用了標(biāo)準(zhǔn)的C++類庫的封裝形式,這也大大提高了程序員編程的可靠度和效率。
運(yùn)用ObjectARX進(jìn)行二次開發(fā),必須首先設(shè)置好ObjectARX的開發(fā)環(huán)境。常用的開發(fā)環(huán)境是Microsoft Visual C++ 6.0 、Microsoft visual studio 2005、Microsoft visual studio 2008、Microsoft visual studio 2010。同時(shí),還需要安裝ObjectARX SDK。
Visual C++、ObjectARX等開發(fā)語言和環(huán)境肯定嚇跑了不少開發(fā)者。那對(duì)于一些簡單的場(chǎng)景,如只要根據(jù)數(shù)據(jù)自動(dòng)成圖或者在現(xiàn)在的圖形上做一些很簡單的修改,有沒有一個(gè)簡單的辦法或語言和開發(fā)環(huán)境?
2、JS新建修改CAD圖形
唯杰地圖在前端實(shí)現(xiàn)了常用的AutoCAD實(shí)體封裝,能通過JavaScript腳本創(chuàng)建新的CAD圖形。
2.1 支持的CAD實(shí)體類型
| 類名稱 | 說明 |
|---|---|
| DbLine | 直線 |
| DbCurve | 曲線 |
| Db2dPolyline | 二維折線 |
| Db3dPolyline | 三維多段線 |
| DbPolyline | 多段線 |
| BlockReference | 塊參照 |
| DbArc | 圓弧 |
| DbCircle | 圓 |
| DbEllipse | 橢圓 |
| DbHatch | 填充 |
| Text | 單行文本 |
| DbMText | 多行文本 |
| RasterImage | 柵格圖片 |
| DbShape | 型實(shí)體 |
| Spline | 樣條曲線 |
| Wipeout | 遮罩實(shí)體 |
| Dimension | 標(biāo)注 |
| Db2LineAngularDimension | 角度標(biāo)注[兩條線] |
| Db3PointAngularDimension | 角度標(biāo)注[三點(diǎn)] |
| DbAlignedDimension | 對(duì)齊標(biāo)注 |
| DbArcDimension | 圓弧標(biāo)注 |
| DbDiametricDimension | 直徑標(biāo)注 |
| DbOrdinateDimension | 坐標(biāo)標(biāo)注 |
| DbRadialDimension | 半徑標(biāo)注 |
| DbRadialDimensionLarge | 半徑折線標(biāo)注 |
| DbRotatedDimension | 轉(zhuǎn)角標(biāo)注 |
| DbLayer | 圖層 |
| DbTextStyle | 文字樣式 |
| DbDimStyle | 標(biāo)注樣式 |
| DbLinetypeStyle | 線型樣式 |
| DbBlock | 塊定義 |
| DbDocument | 數(shù)據(jù)庫文檔 |
下面以新建一個(gè)籃球場(chǎng)示意圖以例,相關(guān)代碼如下:
(async () => {
// --新建地圖--在后臺(tái)新建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: "籃球場(chǎng)示意圖",
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為深色背景顏色時(shí),這里也傳深色背景樣式
})
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}`);
})
})();
創(chuàng)建完后,Web顯示如下:

把創(chuàng)建的DWG圖形,在AutoCAD里面可以打開此圖:

2.2 修改或刪除
修改通過from屬性設(shè)置 來源于哪個(gè)圖,會(huì)在此圖的上面進(jìn)行修改或新增刪除,格式如 形式為 mapid/version,如 exam/v1 .
刪除的話,指定圖中實(shí)體的objectID
示例代碼如下:
let doc = new vjmap.DbDocument();
/** 來源于哪個(gè)圖,會(huì)在此圖的上面進(jìn)行修改或新增刪除,格式如 形式為 mapid/version,如 exam/v1 . */
doc.from = "basketballCourt/v1";
// 修改或刪除實(shí)體是通過傳遞 `objectid` 實(shí)體句柄,如果沒有 `objectid` 則表示新增
let modifyEnts = [
/*修改*/
new vjmap.DbCircle({
objectid: "71",// 實(shí)體句柄,如傳了實(shí)體句柄,是表示修改或刪除此實(shí)體.
colorIndex: 2
}),
/*刪除*/
new vjmap.DbText({
objectid: "73",// 實(shí)體句柄,如傳了實(shí)體句柄,是表示修改或刪除此實(shí)體.
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為深色背景顏色時(shí),這里也傳深色背景樣式
})
結(jié)果如下:

可以訪問 demo地址 https://vjmap.com/guide/newmap.html 去體驗(yàn)下效果
3、應(yīng)用場(chǎng)景
適用于在前端有數(shù)據(jù),需要在線創(chuàng)建或基于現(xiàn)在CAD圖形進(jìn)行修改或刪除;如可獲取全國的GeoJson數(shù)據(jù)創(chuàng)建一個(gè)CAD圖形;對(duì)于一些經(jīng)常變化的數(shù)據(jù)如工程進(jìn)度圖紙根據(jù)進(jìn)度數(shù)據(jù)實(shí)時(shí)繪制生成DWG圖紙等場(chǎng)景;對(duì)于專業(yè)復(fù)雜的圖形繪制或編輯工作,建議使用ObjectARX對(duì)AutoCAD進(jìn)行二次開發(fā)實(shí)現(xiàn)!
到此這篇關(guān)于前端通過JavaScript創(chuàng)建修改CAD圖形詳情的文章就介紹到這了,更多相關(guān)前端通過JavaScript創(chuàng)建修改CAD圖形內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript自動(dòng)化測(cè)試添加頁面DOM元素唯一ID方案示例
這篇文章主要為大家介紹了JavaScript自動(dòng)化測(cè)試添加頁面DOM元素唯一ID方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
8個(gè)JS的reduce使用實(shí)例和reduce操作方式
reduce方法是JavaScript中一個(gè)比較強(qiáng)大的方法,可能在平時(shí)開發(fā)中,有人根本沒用過,通過下面的8個(gè)例子,學(xué)會(huì)reduce的用法以及它的常用場(chǎng)景,需要的朋友可以參考一下2021-09-09
JavaScript架構(gòu)localStorage特殊場(chǎng)景下二次封裝操作
這篇文章主要為大家介紹了JavaScript架構(gòu)localStorage在特殊場(chǎng)景下的二次封裝操作,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
JavaScript實(shí)際應(yīng)用:innerHTMl和確認(rèn)提示的使用
JavaScript實(shí)際應(yīng)用:innerHTMl和確認(rèn)提示的使用...2006-06-06

