一键在Web端把CAD图自动分割成多张图纸并导出子图或图片

前言

在实际中，一个CAD文件中往往存放多张图纸，有时需要这些图纸分开，单独保存或显示。以往的做法是在cad中人工进行处理。今天小编教您在web端一键把CAD图自动分割成多张图纸并能把每个子图导出成单独的dwg文件或保存成图片。

10年积累的成都做网站、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有潍城免费网站建设让你可以放心的选择与我们合作。

例如要处理的CAD原图为:

自动识别所有子图的结果为(所有子图的范围都被紫色颜色所高亮显示了)：

实现

先上效果图

原理介绍

自动分割图纸算法

算法原理：

子图的特征为，外面有一个图框，如果能找出所有图中的图框，就能根据图框位置自动拆分出所有子图了。

而图框的最外面为矩形，同时这个图框矩形外面没有被其他矩形所包含了。

(1）遍历图中所有的矩形，获取所有的矩形范围
(2) 因为有时候矩形是由四条线所组成的，所以需要获取图中所有的水平线和垂直线，然后判断能否组成矩形
(3）对所有获取的矩形进行判断，如果这个矩形没有被其他矩形所包含了，则以为是子图的图框。

在图中查找所有线段坐标代码

// 在图中查找所有的直线段
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后面的条件内容,字段内容请参考文档"服务端条件查询和表达式查询"
        fields: "objectid,points,envelop", // 只要id,坐标
        limit:  //设置很大，相当于把所有的都查出来。不传的话，默认只能取100条
    });

    let result = query.result || [];
    result.forEach(rst => rst.envelop = map.getEnvelopBounds(rst.envelop));
    return result;
}

获取所有子图范围矩形代码


// 得到一个图里面所有的矩形
function findAllRectInMap(lines) {
    let allRects = [];
    // 矩形（有可能是四条直线或者 一条多段线4个点（闭合），5个点(闭合）所组成
    // 先查找一条多段线4个点（闭合），5个点(闭合）所组成的矩形
    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])) {
            // 如果是首尾闭合，则把最后那个点去了
            points.length = points.length - 1;
        }
        if (points.length != 4) return; // 如果不是四个点。则不是矩形
        // 判断四个点是否构成矩形
        // 先计算中点的位置, 然后再计算中点到四个点的距离是不是一样即可。
        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)
    });

    // 再查询由四条直线所组成的矩形
    // 首先找到所有符合的线，条件为：坐标两个点，横线或竖线
    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) {
                // 同一个点
                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
        }
    )
    // 把所有的坐标点存进一个字典数组中
    let coordPointMap = {} // 坐标点字典
    let entMap = {} // 实体字典
    for(let ln of lines) {
        // id与线实体相关联
        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])
    }

    // 查找下一个线
    const findNextLine = (ln, isStartPoint, nextIsHortLine) => {
        const pt = isStartPoint ? ln.startPoint : ln.endPoint
        const findLines = coordPointMap[pt];
        if (!findLines) return null;
        //先查找id开头相近的。有可能是同一个块
        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;//只找竖线
        // 找两个点都有相连的线
        let n1 = coordPointMap[ln.startPoint].length;
        let n2 = coordPointMap[ln.endPoint].length;
        if (ln.findFlag) continue;
        // 按链接关系一直找下去，从起始能到终点，说明是一个矩形
        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) {
            // 成功了，可以是一个矩形了
            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;
}
// 自动拆分子图，显示所有子图的范围
// 原理为：查找图中的所有矩形（包括由直线所组成的矩形）,这个矩形没有被其他矩形所包含，则应为是一个子图的范围
const splitMap = async () => {
    message.info('请点击高亮的子图框，选择”保存成新的子图“或"保存成图片"')
    let lnRes = await getMapLines();
    let allRects = findAllRectInMap(lnRes);
    // 在所有矩形中，只有没有被其他矩形所包含的，才以为是一个新的图的图框
    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]); // 没有包含的，才以为是一个新的图的图框
        }
    }
}

把子图保存为单独的dwg图

根据范围保存为单独的dwg图可以利用唯杰地图提供的组合图形的服务接口，其文档为

/**
 * 组合新地图参数
 */
export  interface IComposeNewMap {
    /** 地图ID. */
    mapid: string;
    /** 地图版本(为空时采用当前打开的地图版本). */
    version?: string;
    /** 地图裁剪范围，范围如[x1,y1,x2,y2]， 为空的话，表示不裁剪 */
    clipbounds?: [number, number, number, number];
    /** 选择是包含还是相交（默认false表示包含，true相交） */
    selByCrossing?: boolean;
    /** 四参数(x偏移,y偏移,缩放，旋转弧度)，可选，对坐标最后进行修正*/
    fourParameter?: [number, number, number, number];
    /** 要显示的图层名称，为空的时候，表示全部图层 */
    layers?: string[];
    /** 生新成图的图层名称前缀 */
    layerPrefix?: string;
    /** 生新成图的图层名称后缀 */
    layerSuffix?: string;
    /** 保存的文件名称，为空的时候，自根据参数自动生成 */
    savefilename?: string;
}

其实现代码为

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

把子图导出为图片

根据范围导出为图片可以利用唯杰地图提供的WMS图形的服务接口，其文档为

/**
 * wms服务url地址接口
 */
export  interface IWmsTileUrl {
    /** 地图ID(为空时采用当前打开的mapid)， 为数组时表时同时请求多个. */
    mapid?: string | string[];
    /** 地图版本(为空时采用当前打开的地图版本). */
    version?: string | string[];
    /** 图层名称（为空时采用当前打开的地图图层名称). */
    layers?: string | string[];
    /** 范围，缺省{bbox-epsg-3857}. (如果要获取地图cad一个范围的wms数据无需任何坐标转换，将此范围填cad范围,srs,crs,mapbounds填为空).*/
    bbox?: string;
    /** 当前坐标系,缺省(EPSG:3857). */
    srs?: string;
    /** cad图的坐标系，为空的时候由元数据坐标系决定. */
    crs?: string | string[];
    /** 地理真实范围，如有值时,srs将不起作用 */
    mapbounds?: string;
    /** 宽. */
    width?: number;
    /** 高. */
    height?: number;
    /** 是否透明. */
    transparent?: boolean;
    /** 不透明时的背景颜色，默认为白色。格式必须为rgb(r,g,b)或rgba(r,g,b,a),a不透明应该是255. */
    backgroundColor?: string;
    /** 四参数(x偏移,y偏移,缩放，旋转弧度)，可选，对坐标最后进行修正*/
    fourParameter?: string | string[];
    /** 是否是矢量瓦片. */
    mvt?: boolean;
    /** 是否考虑旋转，在不同坐标系中转换是需要考虑。默认自动考虑是否需要旋转. */
    useImageRotate?: boolean;
    /** 旋转时图像处理算法. 1或2,默认自动选择（旋转时有用）*/
    imageProcessAlg?: number;
    /** 当前互联网底图地图类型 WGS84(84坐标，如天地图，osm), GCJ02(火星坐标，如高德，腾讯地图)， BD09LL(百度经纬度坐标，如百度地图)， BD09MC(百度墨卡托米制坐标，如百度地图)*/
    webMapType?: "WGS84" | "GCJ02" | "BD09LL" | "BD09MC";
}