cad怎么捕捉直线交点(如果实现与在线CAD图中的线段实时求交点)

随着web在线CAD图查看的普及,需求也不断涌现,一些需求不再满足的在线图形的查看,而涉及到web端在线图形的几何运算。本文以如果实现与在线CAD图中的线段实时求交点这例,介绍下如何在web端cad图几何运算的功能实现。

如果实现与在线CAD图中的线段实时求交点

需要实现的功能有

  • 在线查看CAD图
  • 获取CAD图上面的绘制的所有线段坐标
  • 线段相交
  • 实时计算相交

先上实现效果

实现效果图

cad怎么捕捉直线交点(如果实现与在线CAD图中的线段实时求交点)(1)

功能实现介绍在线查看CAD图

如果在Web网页端展示CAD图形(唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud),这个在前面的博文中已讲过,这里不再重复,有需要的朋友可下载工程源代码研究下。

获取CAD图上面的绘制的所有线段坐标

在线获取CAD图上所有线段坐标有两种方式

在栅格模式下,可以去后台通过条件查询获取所有线段坐标。代码如下

//栅格样式去服务器获取坐标点数据 // 栅格样式获取捕捉点 // 查询所有坐标数据,字段含义可参考https://vjmap.com/guide/svrStyleVar.html let res = await svc.conditionQueryFeature({ fields:"s3", condition:"s3 != ''", limit: 100000}) res = res.result.map(e => e.s3.split(";")) snapObj.features = [] for(let item of res) { let coordinates = [] for(let pt of item) { const p = pt.split(",") if (p.length >= 2) { coordinates.push(map.toLngLat([ p[0], p[1]])) } } if (coordinates.length == 1) { snapObj.features.push({ type: "Feature", geometry: { type: "Point", coordinates: coordinates[0] } }) } else if (coordinates.length > 1) { snapObj.features.push({ type: "Feature", geometry: { type: "LineString", coordinates: coordinates } }) } }

在矢量模式下,可以直接在前端获取当前渲染的线图层的所有线坐标,代码如下

// 查询矢量图层上所有的线图层 let features = map.queryRenderedFeatures({layers: ['vector-layer-lines']}) let mapGeoDatas = { type: "FeatureCollection", features: features.map(f => { return { id: f.id, type: f.type, properties: f.properties, geometry: f.geometry } }) }

线段相交

/** * 线段相交 * @return {{result: string, status: boolean} | {result: string, status: boolean} | {x: number, y: number, status: boolean, ratio: number} | {result: string, status: boolean}} */ export function segmentIntersect(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): { result: string; status: boolean; x?: undefined; y?: undefined; ratio?: undefined; } | { status: boolean; x: number; y: number; ratio: number; result?: undefined; };

在示例中,我们模拟了一条随机的线条,并且让这条线条实时动起来。代码如下

// 让相交线动起来 const moveLine = (newStartPoint, newEndPoint) => { let data = map.getSourceData(intersectLine.sourceId); let geoData = map.fromLngLat(data); // 开始点插值函数 let mapProgressToValueStart = vjmap.interpolate( [0, 1], [geoData.features[0].geometry.coordinates[0], [newStartPoint.x, newStartPoint.y]] ) // 终点插值函数 let mapProgressToValueEnd = vjmap.interpolate( [0, 1], [geoData.features[0].geometry.coordinates[1], [newEndPoint.x, newEndPoint.y]] ) vjmap.createAnimation({ from: 0, to: 1, duration: 5000, ease:vjmap.linear, //线性 onUpdate: latest => { let beginPoint = mapProgressToValueStart(latest) let endPoint = mapProgressToValueEnd(latest) // 修改坐标 data.features[0].geometry.coordinates = map.toLngLat([beginPoint, endPoint]) map.setData(intersectLine.sourceId, data) }, onComplete: (e) => { map.fire("moveLineFinish"); // 发送线移动完成事件 } }) }

实时相交

相交计算如果数据量大时,会耗CPU资源,会导致图形卡顿,如果需要做到实时相交,并且运行界面不卡顿,需要用WebWorker的技术。web worker 是运行在后台的 JavaScript,不会影响页面的性能。web worker 无疑是解决 js 计算能力弱的一大利器.

在唯杰地图 vjmap中有对webworker的封装,可以直接把一个匿名函数做为一个webworker去运行。相关代码如下

/* 如果要用vjmap库中其他的函数,获取库脚本的内容 let script = await vjmap.httpHelper.get("js/vjmap/vjmap.min.js", undefined, { raw: true })*/ // 启动webworker计算相交函数 let intersect = vjmap.WorkerProxy(getIntersects, { // vjmap: script.data, //脚本内容, 如果要用vjmap库中其他的函数,可以获取库脚本的内容 ,把脚本内容传给webworker intersectFunc: vjmap.segmentIntersect // 把主进程库的相交函数做为上下文传进去,这个方法是不用引入vjmap整个库,只用里面的某个函数,但是这个函数不能调用其他函数,如果调用了其他函数会报错,这时只有用上面注释的那个办法,把整个vjmap库都导入进webworker }); // 用webworker计算相交点 const calcIntersect = async ()=> { // 获取线的坐标 let coordinates = map.fromLngLat(map.getSourceData(intersectLine.sourceId)).features[0].geometry.coordinates; // 启动webworker计算相交点 let intersectPoints = await intersect(coordinates[0], coordinates[1], geoDatas) intersectSymbols.setData(map.toLngLat(intersectPoints)); //修改数据 map.fire("calcIntersectFinish"); // 发送线移动完成事件 } map.on("calcIntersectFinish", async ()=> setTimeout(async ()=> await calcIntersect(), 15)) calcIntersect(); // 如果要停止webworker //intersect.worker.terminate()

最终效果如下

cad怎么捕捉直线交点(如果实现与在线CAD图中的线段实时求交点)(2)

上面的案例代码已开源。访问 (https://vjmap.com/demo/#/demo/map/geo/geoWebWorkerIntersect) ,查看效果和代码即可。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页