背景

由於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/#/ 如果不想跑原始碼，可以直接開啟 唯傑地圖雲端圖紙管理平臺

網頁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 來線上體驗，也可以下載原始碼研究實現過程。