最新技術棧Vue3+TS基于唯傑地圖開發的CAD雲端圖紙管理平台案例代碼開源了

系統介紹

唯傑地圖雲端圖紙管理平台 利用最新技術棧

Vue

+

TypeScript

基于唯傑地圖二次開發的系統。

實作了對

AutoCAD

格式的

DWG

圖紙的雲端管理檢視功能。

大緻功能如下：

• CAD圖紙的線上上傳、打開、檢視、版本管理
• 線上圖層管理切換檢視功能
• 屬性資料查詢功能
• 圖中文字搜尋功能
• 視圖管理功能
• 列印功能，可輸出PNG、JPG、PDF、SVG等功能
• 線上繪圖功能，（點，線，面，捕捉、裁剪等功能)
• 圖紙批注功能
• 自定義樣式更改功能
• 資料展示功能 【重點推薦】，允許使用者模拟點資料、在圖上捕捉采集點、線、面資料、或者直接選擇實體資料，根據資料，選擇不同的繪制方式把資料展示在圖上。

線上免費體驗位址： https://vjmap.com/app/cloud

案例源碼可免費下載下傳!!!

技術棧

• 前端架構 Vue3
• 開發語言 TypeScript
• 打包工具 Vite
• 界面庫 Element plus
• 狀态管理 Pinia

功能介紹

CAD圖紙的線上上傳、打開、檢視、版本管理

上傳成功後，取個圖名稱ID

線上圖層管理切換檢視功能

屬性資料查詢功能

圖中文字搜尋功能

視圖管理功能

列印功能，可輸出PNG、JPG、PDF、SVG等功能

線上繪圖功能，（點，線，面，捕捉、裁剪等功能)

圖紙批注功能

自定義樣式更改功能

資料展示功能 【重點推薦】

允許使用者模拟點資料、在圖上捕捉采集點、線、面資料、或者直接選擇實體資料，根據資料，選擇不同的繪制方式把資料展示在圖上。

資料來源支援

• 随機資料
• 圖上捕捉拾取點
• 采集線(可捕捉圖上的坐标點)
• 采集多邊形(可捕捉圖上的坐标點)
• 選擇圖上的實體，傳回位置坐标資料
• 選擇圖上的實體，傳回渲染的幾何坐标資料

繪制方式支援如下：

• 點

  

• 線

  

• 面

  

• 其他

  

  使用上述工具，可以友善快捷的把資料用所需要的效果展示出來。效果如下：

  

唯傑地圖介紹

唯傑地圖VJMAP

為

CAD

圖或

自定義地圖格式

WebGIS

可視化

顯示開發提供的一站式解決方案，支援的格式如常用的

AutoCAD

的

DWG

格式檔案、

GeoJSON

等常用

GIS

檔案格式，它使用WebGL

矢量圖塊

和

自定義樣式

呈現互動式地圖, 提供了全新的

大資料可視化

、

實時流資料

可視化功能，通過本産品可快速實作浏覽器和移動端上美觀、流暢的地圖呈現與空間分析，可幫助您在網站中建構功能豐富、互動性強、可定制的地圖應用。

唯傑地圖官網位址：https://vjmap.com/

特點

• 完全相容

  AutoCAD

  格式的

  DWG

  檔案，無需轉換
• 繪圖技術先進：采用WebGL技術，支援

  矢量地圖

  渲染，支援栅格、圖檔、視訊等圖形渲染，支援3D模型渲染；
• 個性化地圖：服務端渲染和前端渲染都支援自定義樣式表達式，靈活強大；
• 多視角模式：支援2D、3D視角，支援垂直視角、360度旋轉視角；
• 視覺特性：支援無極縮放、支援粒子、航線等動畫效果、支援飛行、平移等運動特效；
• 功能完善：支援所有常見的地圖功能，提供豐富的js接口；
• 互動控制：支援滑鼠/單指拖拽、上下左右按鍵進行地圖平移，支援滑鼠滾輪、輕按兩下、雙指進行地圖縮放，支援Shift+拉框放大；
• 大資料可視化：性能卓越，支援大資料可視化展示
• 跨平台支援(支援

  windows

  ,

  linux

  ); 支援

  docker

  部署;支援

  私有化

  部署;支援桌面端語言開發(如

  C#

  、

  Java

  、

  C++

  語言)

唯傑地圖服務号：