? 在實(shí)際中，一個(gè)CAD文件中往往存放多張圖紙，有時(shí)需要這些圖紙分開，單獨(dú)保存或顯示。以往的做法是在cad中人工進(jìn)行處理。今天小編教您在web端一鍵把CAD圖自動(dòng)分割成多張圖紙并能把每個(gè)子圖導(dǎo)出成單獨(dú)的dwg文件或保存成圖片。
10年積累的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有濰城免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
例如要處理的CAD原圖為:
自動(dòng)識(shí)別所有子圖的結(jié)果為(所有子圖的范圍都被紫色顏色所高亮顯示了)：
子圖的特征為，外面有一個(gè)圖框，如果能找出所有圖中的圖框，就能根據(jù)圖框位置自動(dòng)拆分出所有子圖了。
而圖框的最外面為矩形，同時(shí)這個(gè)圖框矩形外面沒有被其他矩形所包含了。
(1）遍歷圖中所有的矩形，獲取所有的矩形范圍
(2) 因?yàn)橛袝r(shí)候矩形是由四條線所組成的，所以需要獲取圖中所有的水平線和垂直線，然后判斷能否組成矩形
(3）對所有獲取的矩形進(jìn)行判斷，如果這個(gè)矩形沒有被其他矩形所包含了，則以為是子圖的圖框。
重慶分公司
重慶分公司
// 在圖中查找所有的直線段
const getMapLines = async () => {
// 查找圖中所有的直線，二三維多段線
let queryEntTypes = ['AcDbLine', 'AcDbPolyline', 'AcDb2dPolyline', 'AcDb3dPolyline'];
let cond = queryEntTypes.map(t => `name='${getTypeNameById(t)}'`).join(' or '); // sql條件
let query = await svc.conditionQueryFeature({
condition: cond, // 只需要寫sql語句where后面的條件內(nèi)容,字段內(nèi)容請參考文檔"服務(wù)端條件查詢和表達(dá)式查詢"
fields: "objectid,points,envelop", // 只要id,坐標(biāo)
limit: //設(shè)置很大，相當(dāng)于把所有的都查出來。不傳的話，默認(rèn)只能取100條
});
let result = query.result || [];
result.forEach(rst => rst.envelop = map.getEnvelopBounds(rst.envelop));
return result;
}
// 得到一個(gè)圖里面所有的矩形
function findAllRectInMap(lines) {
let allRects = [];
// 矩形（有可能是四條直線或者 一條多段線4個(gè)點(diǎn)（閉合），5個(gè)點(diǎn)(閉合）所組成
// 先查找一條多段線4個(gè)點(diǎn)（閉合），5個(gè)點(diǎn)(閉合）所組成的矩形
lines.forEach(e => {
if (e.points == "") {
return;
}
let points = e.points.split(";").map(p => vjmap.GeoPoint.fromString(p));
if (points[0].equals(points[points.length - 1])) {
// 如果是首尾閉合，則把最后那個(gè)點(diǎn)去了
points.length = points.length - 1;
}
if (points.length != 4) return; // 如果不是四個(gè)點(diǎn)。則不是矩形
// 判斷四個(gè)點(diǎn)是否構(gòu)成矩形
// 先計(jì)算中點(diǎn)的位置, 然后再計(jì)算中點(diǎn)到四個(gè)點(diǎn)的距離是不是一樣即可。
let cx = (points[0].x + points[1].x + points[2].x + points[3].x) / 4.0;
let cy = (points[0].y + points[1].y + points[2].y + points[3].y) / 4.0;
let center = vjmap.geoPoint([cx, cy]);
let dist = center.distanceTo(points[0]);
let isDistEqual = true;
for(let k = 1; k < points.length; k++) {
if(!vjmap.isZero(center.distanceTo(points[k]) - dist)) {
isDistEqual = false;
break;
}
}
if (!isDistEqual) return false;//不是矩形
let rectObj = {
bounds: e.envelop, // 直接用獲取到的外包矩形
ents: [e.objectid]
};
allRects.push(rectObj)
});
// 再查詢由四條直線所組成的矩形
// 首先找到所有符合的線，條件為：坐標(biāo)兩個(gè)點(diǎn)，橫線或豎線
lines = lines.filter(e => {
let points = e.points.split(";");
if (points.length !=2 ) return false;
e.geoStart = vjmap.GeoPoint.fromString(points[0]);
delete e.geoStart.z;// 不考慮z值
e.geoEnd = vjmap.GeoPoint.fromString(points[1]);
delete e.geoEnd.z;// 不考慮z值
e.startPoint = e.geoStart.toString();
e.endPoint = e.geoEnd.toString();
if (e.startPoint == e.endPoint) {
// 同一個(gè)點(diǎn)
return false;
}
let line = points.map(e=>vjmap.geoPoint(e.split(",")))
let isVLine = vjmap.isZero(line[0].x - line[1].x);//豎線
let isHLine = vjmap.isZero(line[0].y - line[1].y);//橫線
if (!(isVLine || isHLine)) return false; // 并且是橫線或豎線
e.isHorzLine = isHLine;
e.findFlag = false;
return true
}
)
// 把所有的坐標(biāo)點(diǎn)存進(jìn)一個(gè)字典數(shù)組中
let coordPointMap = {} // 坐標(biāo)點(diǎn)字典
let entMap = {} // 實(shí)體字典
for(let ln of lines) {
// id與線實(shí)體相關(guān)聯(lián)
entMap[ln.objectid] = ln;
coordPointMap[ln.startPoint] = coordPointMap[ln.startPoint] || new Set()
coordPointMap[ln.startPoint].add(ln.objectid)
coordPointMap[ln.endPoint] = coordPointMap[ln.endPoint] || new Set()
coordPointMap[ln.endPoint].add(ln.objectid)
}
for(let c in coordPointMap) {
coordPointMap[c] = Array.from(coordPointMap[c])
}
// 查找下一個(gè)線
const findNextLine = (ln, isStartPoint, nextIsHortLine) => {
const pt = isStartPoint ? ln.startPoint : ln.endPoint
const findLines = coordPointMap[pt];
if (!findLines) return null;
//先查找id開頭相近的。有可能是同一個(gè)塊
let idx = findLines.findIndex( e => e != ln.objectid && e.substr(0, 3) == ln.objectid.substr(0, 3));
if(idx < 0) {
idx = findLines.findIndex( e => e != ln.objectid);
if(idx < 0) return null;
}
const findLn = entMap[findLines[idx]];
if (findLn.isHorzLine != nextIsHortLine) return null; // 線類型不一樣
let isLnStartPoint = findLn.startPoint != pt
return {
findLine: findLn,
isStartPoint: isLnStartPoint
}
};
// 下面找矩形
for(let ln of lines) {
if (ln.isHorzLine) continue;//只找豎線
// 找兩個(gè)點(diǎn)都有相連的線
let n1 = coordPointMap[ln.startPoint].length;
let n2 = coordPointMap[ln.endPoint].length;
if (ln.findFlag) continue;
// 按鏈接關(guān)系一直找下去，從起始能到終點(diǎn)，說明是一個(gè)矩形
let nextLine1 = findNextLine(ln, true, true)
if (!nextLine1) continue;
let nextLine2 = findNextLine(nextLine1.findLine, nextLine1.isStartPoint, false)
if (!nextLine2) continue;
let nextLine3 = findNextLine(nextLine2.findLine, nextLine2.isStartPoint, true)
if (!nextLine3) continue;
let nextLine4 = findNextLine(nextLine3.findLine, nextLine3.isStartPoint, false)
if (!nextLine4) continue;
if (nextLine4.findLine.objectid == ln.objectid && nextLine4.isStartPoint == true) {
// 成功了，可以是一個(gè)矩形了
ln.findFlag = true;
nextLine1.findLine.findFlag = true;
nextLine2.findLine.findFlag = true;
nextLine3.findLine.findFlag = true;
// 增加矩形對象
let strBounds = '[' + ln.startPoint + ',' + (nextLine2.isStartPoint ? nextLine2.findLine.startPoint : nextLine2.findLine.endPoint) + ']';
let rectObj = {
bounds: vjmap.GeoBounds.fromString(strBounds),
ents: [ln.objectid, nextLine1.findLine.objectid, nextLine2.findLine.objectid, nextLine3.findLine.objectid]
};
allRects.push(rectObj)
}
}
return allRects;
}
// 自動(dòng)拆分子圖，顯示所有子圖的范圍
// 原理為：查找圖中的所有矩形（包括由直線所組成的矩形）,這個(gè)矩形沒有被其他矩形所包含，則應(yīng)為是一個(gè)子圖的范圍
const splitMap = async () => {
message.info('請點(diǎn)擊高亮的子圖框，選擇”保存成新的子圖“或"保存成圖片"')
let lnRes = await getMapLines();
let allRects = findAllRectInMap(lnRes);
// 在所有矩形中，只有沒有被其他矩形所包含的，才以為是一個(gè)新的圖的圖框
let mapRects = [];
for(let i = 0; i < allRects.length; i++) {
let isContain = false;
for(let j = 0; j < allRects.length; j++) {
if (i == j) continue; // 如果是自己
// 判斷矩形是否包含
if ( allRects[j].bounds.isContains(allRects[i].bounds)) {
isContain = true;
break;
}
}
if (!isContain) {
mapRects.push(allRects[i]); // 沒有包含的，才以為是一個(gè)新的圖的圖框
}
}
}
根據(jù)范圍保存為單獨(dú)的dwg圖可以利用唯杰地圖提供的組合圖形的服務(wù)接口，其文檔為
/**
* 組合新地圖參數(shù)
*/
export interface IComposeNewMap {
/** 地圖ID. */
mapid: string;
/** 地圖版本(為空時(shí)采用當(dāng)前打開的地圖版本). */
version?: string;
/** 地圖裁剪范圍，范圍如[x1,y1,x2,y2]， 為空的話，表示不裁剪 */
clipbounds?: [number, number, number, number];
/** 選擇是包含還是相交（默認(rèn)false表示包含，true相交） */
selByCrossing?: boolean;
/** 四參數(shù)(x偏移,y偏移,縮放，旋轉(zhuǎn)弧度)，可選，對坐標(biāo)最后進(jìn)行修正*/
fourParameter?: [number, number, number, number];
/** 要顯示的圖層名稱，為空的時(shí)候，表示全部圖層 */
layers?: string[];
/** 生新成圖的圖層名稱前綴 */
layerPrefix?: string;
/** 生新成圖的圖層名稱后綴 */
layerSuffix?: string;
/** 保存的文件名稱，為空的時(shí)候，自根據(jù)參數(shù)自動(dòng)生成 */
savefilename?: string;
}
其實(shí)現(xiàn)代碼為
const saveSubMapByBounds = async points => {
let bounds = vjmap.GeoBounds.fromDataExtent(points);
bounds = map.fromLngLat(bounds);
let curMapParam = svc.currentMapParam();
let rsp = await svc.composeNewMap([
{
mapid: curMapParam.mapid,
version: curMapParam.version,
clipbounds: bounds.toArray() // 要裁剪的范圍
}
])
let url = `https://vjmap.com/app/cloud/#/upload?fileid=${rsp.fileid}&mapid=${rsp.fileid}&isNewMapId=true`;
window.open(url);
};
? 根據(jù)范圍導(dǎo)出為圖片可以利用唯杰地圖提供的WMS圖形的服務(wù)接口，其文檔為
/**
* wms服務(wù)url地址接口
*/
export interface IWmsTileUrl {
/** 地圖ID(為空時(shí)采用當(dāng)前打開的mapid)， 為數(shù)組時(shí)表時(shí)同時(shí)請求多個(gè). */
mapid?: string | string[];
/** 地圖版本(為空時(shí)采用當(dāng)前打開的地圖版本). */
version?: string | string[];
/** 圖層名稱（為空時(shí)采用當(dāng)前打開的地圖圖層名稱). */
layers?: string | string[];
/** 范圍，缺省{bbox-epsg-3857}. (如果要獲取地圖cad一個(gè)范圍的wms數(shù)據(jù)無需任何坐標(biāo)轉(zhuǎn)換，將此范圍填cad范圍,srs,crs,mapbounds填為空).*/
bbox?: string;
/** 當(dāng)前坐標(biāo)系,缺省(EPSG:3857). */
srs?: string;
/** cad圖的坐標(biāo)系，為空的時(shí)候由元數(shù)據(jù)坐標(biāo)系決定. */
crs?: string | string[];
/** 地理真實(shí)范圍，如有值時(shí),srs將不起作用 */
mapbounds?: string;
/** 寬. */
width?: number;
/** 高. */
height?: number;
/** 是否透明. */
transparent?: boolean;
/** 不透明時(shí)的背景顏色，默認(rèn)為白色。格式必須為rgb(r,g,b)或rgba(r,g,b,a),a不透明應(yīng)該是255. */
backgroundColor?: string;
/** 四參數(shù)(x偏移,y偏移,縮放，旋轉(zhuǎn)弧度)，可選，對坐標(biāo)最后進(jìn)行修正*/
fourParameter?: string | string[];
/** 是否是矢量瓦片. */
mvt?: boolean;
/** 是否考慮旋轉(zhuǎn)，在不同坐標(biāo)系中轉(zhuǎn)換是需要考慮。默認(rèn)自動(dòng)考慮是否需要旋轉(zhuǎn). */
useImageRotate?: boolean;
/** 旋轉(zhuǎn)時(shí)圖像處理算法. 1或2,默認(rèn)自動(dòng)選擇（旋轉(zhuǎn)時(shí)有用）*/
imageProcessAlg?: number;
/** 當(dāng)前互聯(lián)網(wǎng)底圖地圖類型 WGS84(84坐標(biāo)，如天地圖，osm), GCJ02(火星坐標(biāo)，如高德，騰訊地圖)， BD09LL(百度經(jīng)緯度坐標(biāo)，如百度地圖)， BD09MC(百度墨卡托米制坐標(biāo)，如百度地圖)*/
webMapType?: "WGS84" | "GCJ02" | "BD09LL" | "BD09MC";
}
其實(shí)現(xiàn)代碼為
const exportMapPngByBoundsUrl = points => {
let bounds = vjmap.GeoBounds.fromDataExtent(points);
bounds = map.fromLngLat(bounds);
// bounds = bounds.square(); // 保證為正方形
bounds = bounds.scale(1.01); // 稍大點(diǎn)，要不邊框線有可能剛好看不見了
let pictureWidth = 1024 ;// 要導(dǎo)出的圖片寬高
let wmsUrl = svc.wmsTileUrl({
width: pictureWidth,
height: Math.round(pictureWidth * bounds.height() / bounds.width()),
srs: "",
bbox: bounds.toString(),
transparent: false,
backgroundColor: 'rgb(0,0,0)'
});
window.open(wmsUrl);
};
我們通過短短的一二百行代碼即實(shí)現(xiàn)了把cad圖自動(dòng)分割成多張子圖，并成單獨(dú)保存為新的dwg文件和導(dǎo)出圖片，大大減輕了人工手動(dòng)分圖的工作量。大家如果感興趣，可訪問 https://vjmap.com/demo/#/demo/map/service/22findsubmapsplit 在線體驗(yàn)下。
