如何在Web前端实现CAD图文字全文搜索
现状
在CAD看图过程中我们经常会需要用到查找文字的功能，在AutoCAD软件查找一个文字时，可以通过打开左下角输入命令find，输入查找的文字，然后设置查找范围，就可以搜索到需要查询的文字。但在Web网页端打开CAD图查找文字时，有没有同样的办法呢？另外，如果有没有办法实现在很多图纸中像百度那样做到全文检索的功能？
实现思路
CAD图Web打开展示
拿之前分享的一款开源的利用最新技术栈Vue3开发的 唯杰地图云端图纸管理平台 唯杰地图云端图纸管理平台 为例. 他实现了对AutoCAD格式的DWG图纸的云端管理查看功能。能对CAD图纸在线上传、打开、查看、版本管理; 在线图层管理切换查看功能; 属性数据查询功能等功能。
图中文字查找
图纸中文字查找方案
方法一 直接后台读取CAD图纸内容，遍历所有的文字实体进行查找。
主要的文字实体包括 单行文本AcDbText，多行文本AcDbMText,属性注记AcDbAttributeDefinition,块属性AcDbAttribute
实现步骤:
（1） 在前端写代码通过内存方式在后台打开CAD图形
// 打开地图
let res = await svc.openMap({mapid: 'mapid', // 地图ID,(请确保此ID已存在，可上传新图形新建ID)mapopenway: vjmap.MapOpenWay.Memory, // 后台以内存方式打开已上传的图
})
(2) 查找文本实体，因为前端是javascript语言，不可能直接去遍历后台图形数据库，这时可以用表达式查询来后台进行查询
let query = await svc.exprQueryFeature({expr: `gOutReturn := if((gInFeatureType == 'AcDbText' or gInFeatureType == 'AcDbMText' or gInFeatureType == 'AcDbAttributeDefinition' or gInFeatureType == 'AcDbAttribute' ), 1, 0);`,fields: "",limit: 100000})
表达式语法可参考服务端渲染表达式语法 | 唯杰地图-VJMAP
这样查询有个缺点就是每次查询都要在后台打开CAD图形，然后再遍历图形数据库，根据表达式过滤出要查找的文字，效率低。
方法二 通过SQL语句查询数据库来查找文字
实现步骤:
（1） 在前端写代码通过几何渲染方式在后台打开CAD图形，几何渲染方式第一次请求数据时，会在后台打开图形，然后把图形数据和属性数据会保存至空间数据库，之后请求都会在空间数据库里查询数据。
// 打开地图
let res = await svc.openMap({mapid: env.exampleMapId, // 地图ID,(请确保此ID已存在，可上传新图形新建ID)mapopenway: vjmap.MapOpenWay.GeomRender // 以几何数据渲染方式打开
})
(2) sql语句查询文字，直接上代码
let query = await svc.conditionQueryFeature({//只需要写sql语句where后面的条件内容,字段内容请参考文档"服务端条件查询和表达式查询"// 查询所有文字(包括单行文本，多行文本、块注记文字，属性文字) 具体类型数字参考文档"服务端条件查询和表达式查询-支持的cad实体类型" https://vjmap.com/guide/svrStyleVar.htmlcondition: `name='12' or name='13' or name='26' or name='27'`,fields: ""})
SQL查询无需在后台再次打开CAD图形，直接使用SQL语句查询数据库,效率高。
全文检索功能
如果后台有成百上千纸图纸，怎么做到全文检索呢？
首先想到的肯定是遍历所有的图纸，然后根据要搜索的文字一个个的去查询，这样也能实现，就是图纸比较多时，性能太低了，耗时。
这里可以利用开源的全文检索库去实现。
开源的 Elasticsearch （以下简称 ES）是目前全文搜索引擎的首选。
它可以快速地储存、搜索和分析海量数据。维基百科、Stack Overflow、Github 都采用它。
可以在后台实时查找出所有图形的文字然后利用ES建立索引，然后利用ES去查询，根据查找的结果定位到某图某实体上。
但是ES太重量级了，也难部署，用到这种搜索功能上简直就是大材小用。
下面推荐一款轻量级的单文件部署的全文搜索开源引擎。
Bleve是一款基于Golang实现的全文搜索与索引组件库，具有简单的API、丰富的接口扩展能力、映射可自定义、全面的索引数据类型等特点。
组件官网：http://blevesearch.com/
组件仓库：https://github.com/blevesearch/bleve
有兴趣的朋友可以搭建研究下。
如何在Web前端实现CAD图文字全文搜索相关推荐
- 在Web前端基于CAD图实现等值线在线分析
意义 等值线是GIS制图中常见的功能.在实际中经常需要基于CAD图纸对数据进行等值线分析.等值线的类型主要有:等高线.等深线.等温线(等气温线.等水温线).等压线(水平面等压线.垂直面等压线).等 ...
- 【web前端开发】CSS文字和文本样式
文章目录 前言 字体大小 字体粗细 字体样式 字体 font复合属性 文本缩进 文本水平对齐方式 文本修饰线 行高 颜色 标签水平居中 ⭐思维导图 前言 本篇文章主要讲解CSS中的文字和文本样式及一些 ...
- 一键在Web端把CAD图自动分割成多张图纸并导出子图或图片
前言 在实际中,一个CAD文件中往往存放多张图纸,有时需要这些图纸分开,单独保存或显示.以往的做法是在cad中人工进行处理.今天小编教您在web端一键把CAD图自动分割成多张图纸并能把每个子图导出 ...
- 03.Web前端基础总结：文字和表格处理的总结
web前端学习笔记 1.html架构 html 根标签 head 头标签 title 标题标签 body 主体标签 <!DOCTYPE heml> <html><head ...
- Web前端 PS切图
网页切图常用的工具有ps.fireworks,这儿使用ps对网页进行切图,我们通过切图得到所需的图片(.png..jpg文件),用于给网页提供需要的素材. ps切图常用的快捷键: 初始化PSD文件:F ...
- 个人Web前端开发切图PS设置
(一) 文件新建设置 画布大小 Web(1920×2000) 像素 分辨率(R) 72 像素/英寸 颜色模式 RGB 8位 背景内容(透明) (二) 移动工具设置 自动选择不要勾选,右边选择图层 需要 ...
- web前端字体居中_css文字居中怎么弄？
CSS是一种定义样式结构如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.下面我们来看一下css设置文字居中的方法. css可以通过为文字所在标签添加text-align:cent ...
- 【web前端---阿里巴巴矢量图图库图标引用步骤 】
看完不会用请打我三巴掌.如果会用就动一动你发财的小手点赞收藏一下呗
- Web前端学习第二天---百度图库搜索
##百度图库搜索 示例图: css代码: body{background-image: url(img/bd.jpg);//插入背景图片background-size: 100% auto;//使背景 ...
- web前端学习路线思维导图
分享一张web前端思维导图,先收藏 图太大不好展示,看不清楚可以进入以下链接查看--web前端学习路线思维导图在线版
最新文章
- java的基本数据类型有
- js实现php中sleep()延时的功能
- 如何在SAP里创建configurable material物料主数据
- object的classid收集
- antd Table/ProList中rowClassName用法（补充记录）
- Java中文乱码问题（转）
- javascript 模块化机制
- 当10年BI数据总监遇到烂需求、烂数据时，他做了这几件事
- JavaScript中的数字型
- 关情纸尾-----Quartz2D-简介
- c++win32项目 如何显示后再删除一个绘图_sai绘图软件中文版
- 屡败屡战，攻克中项(系统集成项目管理师考试经历分享)
- JS获取当天23时59分59秒
- React组件抽象(一): mixin
- 微信小程序大转盘抽奖
- 开发中的代码管理工具熟知
- 【Java-Java集合】Java集合详解与区别
- 那个学php的上吊了,一路名校的中国博士，在美国上吊自杀了
- 专业实验 I 实验报告
- web开发在线培训，前端英文自我介绍