三分鍾零代碼實現CAD網頁Web快速看圖和高科技效果展示

背景

由於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圖形，同時實現了一個簡單的高科技效果。當然，在實際中，我們需要根據自己的業務數據和邏輯來寫代碼實現了，不過基本流程和思路是一致的。

大家如想實現更酷的效果，可以訪問 唯傑地圖雲端圖紙管理平台 https://vjmap.com/app/cloud/#/map/sys_zp?version=v1&mapopenway=GeomRender&vector=false 來在線體驗，也可以下載源碼研究實現過程。