背景

由于CAD格式DWG文件为私有格式，在网页Web展示并且无差异化显示一直以来是一个技术门槛比较高的技术活，本文将介绍如何在零代码的情况下，三分钟实现Web快速看图和实现高科技效果展示。

之前我们介绍了一款开源的利用最新技术栈Vue3开发的唯杰地图云端图纸管理平台。

他实现了对AutoCAD格式的DWG图纸的云端管理查看功能。

大致功能如下：

CAD图纸的在线上传、打开、查看、版本管理
在线图层管理切换查看功能
属性数据查询功能
图中文字搜索功能
视图管理功能
打印功能，可输出PNG、JPG、PDF、SVG等功能
在线绘图功能，（点，线，面，捕捉、裁剪等功能)
图纸批注功能
自定义样式更改功能
数据展示功能【重点推荐】，允许用户模拟点数据、在图上捕捉采集点、线、面数据、或者直接选择实体数据，根据数据，选择不同的绘制方式把数据展示在图上。

我们将在这款平台上实现上面的效果。

准备工作

（1）要显示的CAD的Dwg格式的底图

(2) 已下载好的唯杰地图云端图纸管理平台的源码

(3) 进入源码vjmap-vue3,打开README.md，按提示运行此工程

yarn
cd packages/map-manage
yarn dev

（4）打开页面 http://localhost:3000/#/ 如果不想跑源码，可以直接打开唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud

网页Web端打开CAD图形

(1) 点击上传新图形

(2) 选择要上传打开的DWG文件

(3) 打开后选择存储后渲染栅格

(4) 打开效果如下

高科技效果实现

打开`数据展示`

点击数据展示的功能按钮，打开数据展示功能

烟花效果

(1) 点击随机数据，生成设置好的随机数据，用于烟花显示的点位置

(2) 选择中间效果栏中的烟花效果，点击预览

（3）这时候我们可以看到地图中已经出现了烟花效果了，点击“确定”返回

立体光墙

（1）点击选择实体[坐标位置]

(2) 反选（下至上，从右至左)选择最外面的边框实体，按回车键点击确定返回

(3) 选择立体光墙效果，勾选线自动闭合

(4) 点击预览，这时候我们可以看到地图中已经出现了烟花效果了，点击“确定”返回

(5) 点击四棱锥，勾选绘制点时绘制线上所有点

(6) 点击预览，这时候我们可以看到地图中已经出现了四棱锥，点击“确定”返回

飞线效果

(1) 选择采集线

(2) 在图上采集从中心点到四个角的四条直线，采集完成，按回车键点击确定返回

(3) 点击飞线效果

(4) 点击预览，这时候我们可以看到地图中已经出现了飞线效果，点击“确定”返回

拉伸图中的实体

(1) 选择选择实体[返回几何坐标]，同时切换到点选

（2）点击选择图中要选择的实体，按回车键点击确定返回

（3）选择拉伸多边形

(4) 点击预览，这时候我们可以看到地图中已经出现了刚选择的实体已拉伸，点击“确定”返回

路径动画

(1) 选择采集线, 在图上采集路径的直线，采集完成，按回车键点击确定返回

(2) 效果栏中选择路径动画

(3) 点击预览，这时候我们可以看到地图中在刚采集的线上面，出现了路径动画了，点击“确定”返回

点符号

下面我们在地图上再模拟点传感器位置和数据（1）点击随机数据，生成设置好的随机数据, 选择点符号，同时勾选绘制点时包括线上所有点

(2) 点击预览，这时候我们可以看到地图中已出现刚模拟的传感器图标和数据了，点击“确定”返回

高科技主题样式

关闭数据展示功能，在工具栏上更多功能上选择高科技主题样式

最终效果如下：

结论

至此，我们在零代码的情况下，实现了网页端快速查看CAD图形，同时实现了一个简单的高科技效果。当然，在实际中，我们需要根据自己的业务数据和逻辑来写代码实现了，不过基本流程和思路是一致的。

大家如想实现更酷的效果，可以访问唯杰地图云端图纸管理平台唯杰地图云端图纸管理平台来在线体验，也可以下载源码研究实现过程。

三分钟零代码实现CAD网页Web快速看图和高科技效果展示相关推荐

CAD怎么快速查看图纸文件呢？CAD怎么实现快速看图？
CAD图纸不知道如何看?那么CAD看图技巧到底有哪些呢?今天就专门给大家介绍介绍如何才能快速看懂CAD图纸! 建筑工程施工平面图一般有三道尺寸,第一道尺寸是细部尺寸,第二道尺寸是轴线间尺寸,第三道尺寸 ...
cad打开图纸流程图_如何一键打开超大CAD图纸，进行CAD快速看图？
当我们遇到一个超大的CAD图纸,想要快速查看里面的内容时,一般的CAD软件会在你打开超大图纸的时候告知你:图纸太大,需要收费!这时候该怎么办呢?如何进行CAD快速看图呢?今天教你CAD快速看图新方式. ...
CAD快速看图怎么转换成PDF格式？这一款软件就足够
CAD快速看图怎么转换成PDF格式?CAD文件是一种比较专业的文件,一般用于设计.绘图等,这种文件需要特殊的软件才可以打开,不过对于大多数人来说,都很少会安装这种软件,因为下载和安装软件需要很多时间, ...
怎么查看CAD建筑图纸？CAD快速看图怎么实现？
一般来说,我们要怎么查看CAD建筑图纸呢?相信这个小伙伴们应该都不会太陌生了,那么我们想要实现高效的查看看建筑图纸需要怎么操作呢?这里和小伙伴们分享三种操作方法! 怎么查看CAD建筑图纸?CAD快速看 ...
建筑图纸怎么查看？有什么CAD快速看图的技巧？
对于很多学习CAD 的小伙伴们而言,不仅仅制图是一个需要不断学习的的内容,学会怎么查看查看建筑图纸也是一个需要学习的过程,建筑图纸怎么查看?有什么CAD快速看图的技巧?下面就和小伙伴们分享一下建筑图纸 ...
看不懂CAD建筑图纸怎么办？有什么CAD快速看图或识图的技巧吗？
很多刚刚开始接CAD的小伙伴们而言,不仅绘图是一个很大的挑战,就连如何看懂建筑图纸也是一个很大的挑战!那么CAD建筑图纸有什么快速看图的技巧呢?看不懂CAD建筑图纸怎么办?有什么CAD快速看图或识图的 ...
CAD快速看图如何打印图纸的部分内容？
CAD快速看图如何打印图纸的部分内容?使用CAD快速看图软件进行对图纸文件打开查看的时候因操作需要打印图纸,应该怎么样进行,使用CAD看图软件进行此项操作的具体步骤是什么,下面小编就要来教大家的就是使 ...
使用cad快速看图怎么进行一张建筑图纸两端测量？
使用cad快速看图怎么进行一张建筑图纸两端测量?CAD图纸文件是需要使用到专门的看图软件才能够将其进行打开查看的,所以一般在我们使用看图软件进行对图纸文件的查看时候经常会需要对其进行图纸两端距离的测量 ...
cad导出 dxf后中文不显示_CAD快速看图 for Mac
CAD快速看图 for Mac是一款非常小巧.快速.方便的DWG看图工具,CAD快速看图 Mac版可脱离AutoCAD最快速.最方便浏览DWG和DXF图纸,支持二维或三维图纸,支持高清.多文件和云字体 ...
cad快看_苹果用户福音——CAD快速看图mac版来啦
我们终于赶在2019年最后一天发布了软件的mac版本,以后使用苹果笔记本的用户也可以操作CAD快速看图啦~ 功能介绍目前较小.极快的一款CAD看图软件,兼容AutoCAD各个版本DWG图纸直接查看, ...

三分钟零代码实现CAD网页Web快速看图和高科技效果展示

背景

准备工作