CN117055884A - 一种在Web前端展示并操作CAD图纸的方法 - Google Patents

Abstract

本发明公开了一种在Web前端展示并操作CAD图纸的方法，包括以下步骤：S1：解析CAD图纸的格式；S2：Web前端展示CAD图纸的方法；S3：基于步骤S2中矢量瓦片的机制；S4：CAD图纸的操作。本发明所述的一种在Web前端展示并操作CAD图纸的方法，本发明通过此操作方法，可以应用在各个场景，同时能针对有误插件做出相应的CAD图纸展示方法，其整体性能好、功能全，且可以编辑进行二次阀杆，且可以能利用GIS生态圈，容易实现，能利用html5做应用开发，开发简单，效果好，且基于矢量瓦片进行CAD图纸的展示，可以对AutoCAD图像格式进行解析，且能将其转成方便绘制的瓦片，以此方便对其进行操作工作。

Description

一种在Web前端展示并操作CAD图纸的方法

技术领域

本发明涉及Web前端展示CAD图纸的领域，特别涉及一种在Web前端展示并操作CAD图纸的方法。

背景技术

Web前端是计算机科学开发的核心和领域，它主要针对编码和构建可见的东西，也就是用户进行交互的界面，集中在Web应用程序或网站中，它还包括移动应用程序的开发，负责创建这些类型的应用程序的布局或架构的人员是前端开发人员.

AutoCAD自动计算机辅助设计软件，用于二维绘图、详细绘制、设计文档和基本，现已经成为广为流行的，AutoCAD具有良好的，通过交互菜单或方式便可以进行各种操作，它的多文档设计环境，让非计算机专业人员也能很快地学会使用，在不断实践的过程中更好地掌握它的各种应用和开发技巧，从而不断提高，AutoCAD具有广泛的适应性，它可以在各种操作系统支持的和工作站上运行.

基于CAD图纸，在Web前端只能对其进行浏览或展示工作，且不同的软件和有无插件也会影响图纸的展示效率和精度，同时不能直接对CAD图纸进行修改工作。

发明内容

本发明的主要目的在于提供一种在Web前端展示并操作CAD图纸的方法，可以有效解决背景技术中的问题。

为实现上述目的，本发明采取的技术方案为：

一种在Web前端展示并操作CAD图纸的方法，包括以下操作步骤：

S1：解析CAD图纸的格式：CAD图纸的格式文件包括DWG和DXF，其中解析方式包括FreeCAD和openDwgToolkit：

其中FreeCAD解析前需要提前使用TeighaFileConverter将DWG格式转换为DXF格式再使用FreeCAD对DWG格式进行解析；

其中采用openDwgToolkit实现对DWG文件的解析，将其应用程序在Windows平台上采用VisualC++进行开发，以此保证整体的运行环境；

S2：Web前端展示CAD图纸的方法：展示方法分为有插件ActiveX方式和无插件Html5方式，其中：

有插件ActiveX方式：解析AutoCAD图形绘制，并将其封装成AcitveX控件，以此可以在Web前端进行展示工作；

无插件Html5方式：解析AutoCAD图形格式，然后转成html5所能绘制的格式，如svg，geojson，矢量瓦片，在前端渲染，这块如果从底层去实现，有很大的工作量，以此利用GIS生态圈的开源项目来搭建，且可以利用GDAL把dwg或dxf格式导成shp或GeoJson，后端利用GeoServer或MapServer发布成服务，前端利用LeafletatOpenLayers去展示；

S3：基于步骤S2中矢量瓦片的机制：将矢量图层以矢量瓦片的形式进行切分和存储，使用前端自定义渲染样式矢量瓦片，其中矢量瓦片类似栅格瓦片，是将矢量数据用多层次模型分割成矢量要素描述文件存储在服务器端，再到客户端根据指定样式进行渲染绘制地图，在单个矢量瓦片上存储着投影于一个矩形区域内的几何信息和属性信息，当客户端通过分布式网络获取矢量瓦片、地图标注字体、图标、样式文件等数据后，最终在客户端进行渲染输出地图，矢量瓦片没有统一数据标注，可以使用mapbox，mapbox基于Googleprotocolbufers制定了MAPBOXCECTORTILESPECIFICATION通用的矢量瓦片数据标准，其中将矢量瓦片数据组织分成两层，一层是地图表达范围内的瓦片数据集组织模型，另一层是单个瓦片内要素的组织模型，矢量瓦片数据集的组织模型类似栅格瓦片金字塔模型，包含坐标系、投影方式、瓦片编号已实现任意精度、空间位置与矢量瓦片的对应关系，并被栅格瓦片规范相互兼容，这样方便将矢量瓦片转换成栅格瓦片，毕竟两者采用相似的投影方式和瓦片编号方式，单个瓦片要素的组织模型将几何信息和属性信息分开存储，几何信息主要包括点、线、面和未知要素类，元数据信息包含了图层属性和要素属性，虽然矢量瓦片也采用金字塔的方式进行存储数据，但是由于其默认网格数较高，以PBF为例，单个矢量瓦片的网格是4096*4096，所以在视网膜屏等设备上也显示地很清楚，而不会出现锯齿，同时这个网格数可以随时进行修改调整，以更精确的方式来记录几何位置信息从而适应不同屏幕的要求，同时，在矢量瓦片中，会将其几何信息转换成指令集表达，再将指令存储到32位无符号整数进行存储，而在存储属性信息是，则是以不同的是表示，geojson直接标注，PBF则是用索引号进行标注；

S4：解析后的CAD图纸可以直接在Web前端中打开，需要操作时通过from属性设置来源于哪个图，即可在在此图的上面进行修改或新增删除，删除时指定图中实体的objectlD进行操作即可。

优选的，所述DWG格式文件是AutoCAD软件的专有格式，其是封闭的不开放的，且是二进制的，DXF格式则是文本格式的，用于交换数据，直接使用AutoCAD软件本身即可将DWG文件另存为DXF文件。

优选的，所述有插件ActiveX方式在进行展示前，其Web端需要安装插件，且只能在windows系统上使用。

优选的，所述无插件Html5方式中的后端为GeoServer或MapServer，前端为Leaflet或openLayers，且需要注意CAD与GIS在数据结构上存在较大的差异，CAD数据类型较为丰富，支持简单点、线、面、多义线、椭圆、块、文字等多种数据类型，而转换到GIS中，只转换为点、线、面、注记等类型，这使得CAD图形数据不能很好的满足GIS的要求，如CAD中的Text数据类型，直接转换后只转换为GIS中的Point，通过这种转换去绘制，会导致和原始CAD图形绘制不太一样，同时CAD里面有线型、字体也会导致绘制上的差异性，同时对于GIS而言，有个地理坐标系的概念，而一些图纸，如户型图等就没有地理坐标系的概念，以此根据图纸的需求对其进行确定。

与现有技术相比，本发明具有如下有益效果：

本发明通过此操作方法，可以应用在各个场景，同时能针对有误插件做出相应的CAD图纸展示方法，其整体性能好、功能全，且可以编辑进行二次阀杆，且可以能利用GIS生态圈，容易实现，能利用html5做应用开发，开发简单，效果好，且基于矢量瓦片进行CAD图纸的展示，可以对AutoCAD图像格式进行解析，且能将其转成方便绘制的瓦片，以此方便对其进行操作工作，同时此方法对瓦片占用空间低，瓦片切图效率高，渲染地图效果快，可以随时动态调整地图样式，地图分辨率高，瓦片提前渲染，对客户端性能要求低，性能稳定。

具体实施方式

下面将结合本发明的实施例，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

一种在Web前端展示并操作CAD图纸的方法，包括以下操作步骤：

S1：解析CAD图纸的格式：CAD图纸的格式文件包括DWG和DXF，其中解析方式包括FreeCAD和openDwgToolkit，DWG格式文件是AutoCAD软件的专有格式，其是封闭的不开放的，且是二进制的，DXF格式则是文本格式的，用于交换数据，直接使用AutoCAD软件本身即可将DWG文件另存为DXF文件：

其中FreeCAD解析前需要提前使用TeighaFileConverter将DWG格式转换为DXF格式再使用FreeCAD对DWG格式进行解析。

其中采用openDwgToolkit实现对DWG文件的解析，将其应用程序在Windows平台上采用VisualC++进行开发，以此保证整体的运行环境。

S2：Web前端展示CAD图纸的方法：展示方法分为有插件ActiveX方式和无插件Html5方式，其中：

有插件ActiveX方式：解析AutoCAD图形绘制，并将其封装成AcitveX控件，以此可以在Web前端进行展示工作，有插件ActiveX方式在进行展示前，其Web端需要安装插件，且只能在windows系统上使用。

无插件Html5方式：解析AutoCAD图形格式，然后转成html5所能绘制的格式，如svg，geojson，矢量瓦片，在前端渲染，这块如果从底层去实现，有很大的工作量，以此利用GIS生态圈的开源项目来搭建，且可以利用GDAL把dwg或dxf格式导成shp或GeoJson，后端利用GeoServer或MapServer发布成服务，前端利用LeafletatOpenLayers去展示，无插件Html5方式中的后端为GeoServer或MapServer，前端为Leaflet或openLayers，且需要注意CAD与GIS在数据结构上存在较大的差异，CAD数据类型较为丰富，支持简单点、线、面、多义线、椭圆、块、文字等多种数据类型，而转换到GIS中，只转换为点、线、面、注记等类型，这使得CAD图形数据不能很好的满足GIS的要求，如CAD中的Text数据类型，直接转换后只转换为GIS中的Point，通过这种转换去绘制，会导致和原始CAD图形绘制不太一样，同时CAD里面有线型、字体也会导致绘制上的差异性，同时对于GIS而言，有个地理坐标系的概念，而一些图纸，如户型图等就没有地理坐标系的概念，以此根据图纸的需求对其进行确定。

S3：基于步骤S2中矢量瓦片的机制：将矢量图层以矢量瓦片的形式进行切分和存储，使用前端自定义渲染样式矢量瓦片，其中矢量瓦片类似栅格瓦片，是将矢量数据用多层次模型分割成矢量要素描述文件存储在服务器端，再到客户端根据指定样式进行渲染绘制地图，在单个矢量瓦片上存储着投影于一个矩形区域内的几何信息和属性信息，当客户端通过分布式网络获取矢量瓦片、地图标注字体、图标、样式文件等数据后，最终在客户端进行渲染输出地图，矢量瓦片没有统一数据标注，可以使用mapbox，mapbox基于Googleprotocolbufers制定了MAPBOXCECTORTILESPECIFICATION通用的矢量瓦片数据标准，其中将矢量瓦片数据组织分成两层，一层是地图表达范围内的瓦片数据集组织模型，另一层是单个瓦片内要素的组织模型，矢量瓦片数据集的组织模型类似栅格瓦片金字塔模型，包含坐标系、投影方式、瓦片编号已实现任意精度、空间位置与矢量瓦片的对应关系，并被栅格瓦片规范相互兼容，这样方便将矢量瓦片转换成栅格瓦片，毕竟两者采用相似的投影方式和瓦片编号方式，单个瓦片要素的组织模型将几何信息和属性信息分开存储，几何信息主要包括点、线、面和未知要素类，元数据信息包含了图层属性和要素属性，虽然矢量瓦片也采用金字塔的方式进行存储数据，但是由于其默认网格数较高，以PBF为例，单个矢量瓦片的网格是4096*4096，所以在视网膜屏等设备上也显示地很清楚，而不会出现锯齿，同时这个网格数可以随时进行修改调整，以更精确的方式来记录几何位置信息从而适应不同屏幕的要求，同时，在矢量瓦片中，会将其几何信息转换成指令集表达，再将指令存储到32位无符号整数进行存储，而在存储属性信息是，则是以不同的是表示，geojson直接标注，PBF则是用索引号进行标注。

S4：解析后的CAD图纸可以直接在Web前端中打开，需要操作时通过from属性设置来源于哪个图，即可在在此图的上面进行修改或新增删除，删除时指定图中实体的objectlD进行操作即可。

本发明通过此操作方法，可以应用在各个场景，同时能针对有误插件做出相应的CAD图纸展示方法，其整体性能好、功能全，且可以编辑进行二次阀杆，且可以能利用GIS生态圈，容易实现，能利用html5做应用开发，开发简单，效果好，且基于矢量瓦片进行CAD图纸的展示，可以对AutoCAD图像格式进行解析，且能将其转成方便绘制的瓦片，以此方便对其进行操作工作，同时此方法对瓦片占用空间低，瓦片切图效率高，渲染地图效果快，可以随时动态调整地图样式，地图分辨率高，瓦片提前渲染，对客户端性能要求低，性能稳定。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (4)

1.一种在Web前端展示并操作CAD图纸的方法，其特征在于：包括以下操作步骤：

S1：解析CAD图纸的格式：CAD图纸的格式文件包括DWG和DXF，其中解析方式包括FreeCAD和openDwgToolkit：

其中FreeCAD解析前需要提前使用TeighaFileConverter将DWG格式转换为DXF格式再使用FreeCAD对DWG格式进行解析；

其中采用openDwgToolkit实现对DWG文件的解析，将其应用程序在Windows平台上采用VisualC++进行开发，以此保证整体的运行环境；

S2：Web前端展示CAD图纸的方法：展示方法分为有插件ActiveX方式和无插件Html5方式，其中：

有插件ActiveX方式：解析AutoCAD图形绘制，并将其封装成AcitveX控件，以此可以在Web前端进行展示工作；

无插件Html5方式：解析AutoCAD图形格式，然后转成html5所能绘制的格式，如svg，geojson，矢量瓦片，在前端渲染，这块如果从底层去实现，有很大的工作量，以此利用GIS生态圈的开源项目来搭建，且可以利用GDAL把dwg或dxf格式导成shp或GeoJson，后端利用GeoServer或MapServer发布成服务，前端利用LeafletatOpenLayers去展示；

S3：基于步骤S2中矢量瓦片的机制：将矢量图层以矢量瓦片的形式进行切分和存储，使用前端自定义渲染样式矢量瓦片，其中矢量瓦片类似栅格瓦片，是将矢量数据用多层次模型分割成矢量要素描述文件存储在服务器端，再到客户端根据指定样式进行渲染绘制地图，在单个矢量瓦片上存储着投影于一个矩形区域内的几何信息和属性信息，当客户端通过分布式网络获取矢量瓦片、地图标注字体、图标、样式文件等数据后，最终在客户端进行渲染输出地图，矢量瓦片没有统一数据标注，可以使用mapbox，mapbox基于Googleprotocolbufers制定了MAPBOXCECTORTILESPECIFICATION通用的矢量瓦片数据标准，其中将矢量瓦片数据组织分成两层，一层是地图表达范围内的瓦片数据集组织模型，另一层是单个瓦片内要素的组织模型，矢量瓦片数据集的组织模型类似栅格瓦片金字塔模型，包含坐标系、投影方式、瓦片编号已实现任意精度、空间位置与矢量瓦片的对应关系，并被栅格瓦片规范相互兼容，这样方便将矢量瓦片转换成栅格瓦片，毕竟两者采用相似的投影方式和瓦片编号方式，单个瓦片要素的组织模型将几何信息和属性信息分开存储，几何信息主要包括点、线、面和未知要素类，元数据信息包含了图层属性和要素属性，虽然矢量瓦片也采用金字塔的方式进行存储数据，但是由于其默认网格数较高，以PBF为例，单个矢量瓦片的网格是4096*4096，所以在视网膜屏等设备上也显示地很清楚，而不会出现锯齿，同时这个网格数可以随时进行修改调整，以更精确的方式来记录几何位置信息从而适应不同屏幕的要求，同时，在矢量瓦片中，会将其几何信息转换成指令集表达，再将指令存储到32位无符号整数进行存储，而在存储属性信息是，则是以不同的是表示，geojson直接标注，PBF则是用索引号进行标注；

S4：解析后的CAD图纸可以直接在Web前端中打开，需要操作时通过from属性设置来源于哪个图，即可在在此图的上面进行修改或新增删除，删除时指定图中实体的objectlD进行操作即可。

2.根据权利要求1所述的一种在Web前端展示并操作CAD图纸的方法，其特征在于：所述DWG格式文件是AutoCAD软件的专有格式，其是封闭的不开放的，且是二进制的，DXF格式则是文本格式的，用于交换数据，直接使用AutoCAD软件本身即可将DWG文件另存为DXF文件。

3.根据权利要求1所述的一种在Web前端展示并操作CAD图纸的方法，其特征在于：所述有插件ActiveX方式在进行展示前，其Web端需要安装插件，且只能在windows系统上使用。

4.根据权利要求1所述的一种在Web前端展示并操作CAD图纸的方法，其特征在于：所述无插件Html5方式中的后端为GeoServer或MapServer，前端为Leaflet或openLayers，且需要注意CAD与GIS在数据结构上存在较大的差异，CAD数据类型较为丰富，支持简单点、线、面、多义线、椭圆、块、文字等多种数据类型，而转换到GIS中，只转换为点、线、面、注记等类型，这使得CAD图形数据不能很好的满足GIS的要求，如CAD中的Text数据类型，直接转换后只转换为GIS中的Point，通过这种转换去绘制，会导致和原始CAD图形绘制不太一样，同时CAD里面有线型、字体也会导致绘制上的差异性，同时对于GIS而言，有个地理坐标系的概念，而一些图纸，如户型图等就没有地理坐标系的概念，以此根据图纸的需求对其进行确定。