WEB 3D SVG CAD 矢量 幾種實現方案
一、全部自己開發，從底層開始
VML+SVG開發矢量地圖，不需要導入第三方圖片作為背景，直接在地圖編輯里可以編輯基礎地圖內容，如進行岩石、巷道、煤層、水域等繪畫，在畫好基礎地圖樣子再在其上面畫出智慧線等設備，所有操作顯示等都用SVG來實現，形成的SVG地圖自然就是純矢量地圖。
二、基於WEBGL和3DMAX開發
WEBGL+3DMAX開發3D效果，WEBGL是從OpenGL演進來的WEB上展示3D效果的技術，可以用3DMAX像開發3D游戲場景一樣開發立體3D場景，在WEB上可以使用WEBGL顯示3D地圖。
三、基於VectorDraw開發
VectorDraw開發矢量+3D，VectorDraw是一個矢量3D圖形庫，是歐美一個小公司開發的比較不錯的關於矢量畫圖的一些工具和類庫等，不僅可以打開CAD文件還支持其他矢量對象在任何支持HTML5平台上顯示。
四、基於Flash開發
Flash開發矢量+3D，Flash發展歷史比較悠久，功能比較強大是網頁上顯示語音動畫等首選，近年來隨着Flash的發展其功能也日漸強大，有不少2D地圖和3D動畫等使用Flash開發，效果也很好。
五、基於kabeja類庫開發
kabeja是一個歐美公司開發的關於矢量CAD等圖和矢量SVG等轉換的JAVA類庫，目前該類庫最新版本時0.4，並且08年以后沒有更新，但該類庫功能依舊比較強大，如可以實現CAD到PDF、SVG、JPG等等的后台轉換，由於該類庫是JAVA類庫剛好可以和大多數WEB開發的JAVA互相使用。唯一遺憾的是kabeja資料甚少，國內幾乎沒有，國外也是有的可憐，如果要用kabeja開發，首先要看懂kabeja的源碼。
------------------------------------------------------------------
網頁調用AutoVue瀏覽DWG文件
能打開所有3D文件AutoVue SolidModel Pro 19.3中文綠色特別版 能直接打開所有的3D圖檔 ，包括：ProEngineer、Unigraphics、SolidWorks、Catia、SolidEdge、Autodesk等各種軟件的3D文件。支持超過400種不同檔案的檔案格式，包括2D & 3D、CAD、EDA、office文本
通過下面的代碼我們可以在網頁中調用AutoVueX.ocx
瀏覽CAD的DWG文件
<html>
<head>
</head>
<body>
<object id=”xxxx” visible=”true” classid=”CLSID:B6FCC215-D303-11D1-BC6C-0000C078797F” type=”application/x-oleobject” width=”800″ height=”600″>
<param name=”SRC” value=”test.dwg”>
</object>
</body></html>
注意test.dwg表示需要瀏覽的DWG文件的路徑，支持網絡路徑
AutoVue19.3下載:http://pan.baidu.com/s/1taCQN
-------------------------------------------------------------------------
SVG簡介
SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。
SVG 使用 XML 格式定義圖像。
SVG與其他圖像格式相比，SVG的優勢在於
- SVG 可被非常多的工具讀取和修改（比如記事本）
- SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
- SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
- SVG 可以與 Java 技術一起運行
- SVG 是開放的標准
- SVG 文件是純粹的 XML
一個簡單的SVG實例
<?xml version="1.0" standalone="no" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > <svg xmlns="http://www.w3.org/2000/svg" width="130" height="80" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="rgb(0,100,255)" stroke-opacity="0.5" fill-opacity="0.5" /> </svg>- 1
- 2
- 3
- 4
- 5
- 6
-
第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規定此 SVG 文件是否是”獨立的”，或含有對外部文件的引用。
standalone=”no” 意味着 SVG 文檔會引用一個外部文件 - 在這里，是 DTD 文件。 -
第二行引用了這個外部的 SVG DTD。該 DTD 位於 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“。該 DTD 位於 W3C，含有所有允許的 SVG 元素（DTD，即文檔類型定義，作用是定義 XML 文檔的合法構建模塊）省略該行對顯示並不會有影響。
-
SVG 代碼以 元素開始，包括開啟標簽 和關閉標簽 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
使用SVG
SVG可以單獨顯示
- 完整版如上例所示
- 最簡的SVG形式，除了“SVG標簽”和“xmlns名空間”其他聲明標簽均可省略。
<svg xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100" style="fill:red;stroke-width:1;stroke:black"/> </svg>- 1
- 2
- 3
SVG可以嵌入HTML中顯示
嵌入的方式有7種，分別是：
- 代碼直接嵌入
- <img>鏈接方式引用
- <a>鏈接方式引用
- CSS的background屬性引用
- <embed>
- <object>
- <iframe>
代碼直接嵌入
<html> <body> <svg xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="200" y2="200" style="stroke-width:1;stroke:black"/> </svg> </body> </html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
<img>鏈接方式引用
<html> <body> <img src="svgDemo.svg" width="100" height="100"/> <img src="svgDemo.svg"/> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
結果如圖（左為Chrome、右為Microsoft Edge） 
在Chrome瀏覽器中可以看出，<img>標簽的默認大小是 300 x 150。 
<a>鏈接方式引用
該方法只會顯示鏈接文本，只有當用戶單擊鏈接，才能跳轉至SVG圖像。
<html> <body> <a href="test.svg">轉到SVG圖像</a> </body> </html>- 1
- 2
- 3
- 4
- 5
CSS的background屬性引用
<html> <body> <div style="width:500;height:500;background:yellow url(test.svg) repeat"/> </body> </html>- 1
- 2
- 3
- 4
- 5
<embed>、<object>、<iframe>
<html> <body> <embed src="svgDemo.svg" type="image/svg+xml" /> <object data="svgDemo.svg" type="image/svg+xml" /> <iframe src="svgDemo.svg" /> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
結果如下圖所示
從圖中可以看出，在當前版本的Chrome瀏覽器中
- <embed>標簽默認的大小是 300 x 150
- <object> 標簽默認的大小是 300 x 150
- <iframe>標簽默認的大小是 304 x 154，因為iframe有邊框，邊框線寬是 2。
這都說明了：在我的Chrome瀏覽器上svg矢量圖形默認的大小是 300 x 150，如果矢量圖像大於該值，會被裁剪。
另外還需要注意的一點是：即使都是Chrome瀏覽器也會因不同版本而給svg設置不同的默認大小，所以為了確保圖像能正常顯示，最好手動給svg指定width和height屬性。
-----------------------------------------
最近做客戶項目，客戶需要CAD圖形顯示於Web上，看了好多的方案，要么用AutoCAD的接口開發，要么用第三方的ActiveX開發，還有一款AutoVue能看各種圖形，但是價格灰常貴，按客戶端數量購買，這這就不符合客戶的需要。
找了一圈，發現了一個基於HTML5技術的VectorDraw web library組件，無需客戶端，能實現簡單在線編輯，支持瀏覽時的放縮，看起來效果還不錯。
由於基於HTML5，所以還能在移動設備上瀏覽CAD圖形。
但DWG和DXF文件格式過於復雜，必須把原先的DWG和DXF等轉換成VDS文件。
大家需要看在線演示的可以看這里：http://www.vdraw.com/javascript-examples/vectordraw-javascript-samples/
VectorDraw Developer Framework (VDF) 是一個CAD圖形引擎庫，程序員可用於其應用程序的可視化。 通過所提供的功能，用戶可以很輕松的創建、編輯、管理、導出和導入以及打印2D/3D的圖形和圖形文件。它廣泛應用於ERP、文檔管理、CAD/CAM /CAE應用程序、GIS和地理應用程序、CNC機器、空間&資源管理和任何需要矢量或柵格圖形友好輸出的應用程序。
VectorDraw支持以下這些格式的矢量和柵格圖像的輸入和輸出：DWG, .DXF, .DGN, .WMF, .EMF, .VDML, .VDCL, .BMP, .JPG, .TIFF, .GIF, .PNG, .TGA。以下這幾種格式只支持輸出：.PDF, .DWF, .SVG, .HPGL。
部分功能：
- 3D 軌道
- 縮放和平移
- 3D視圖
- 過濾器對象
- 支持UCS
- 內置格式(VDML, VDCL)
- 支持自定義對象和自定義操作
- 自定義圖形對象
- 對真彩色的支持
- 本地DXF導入/導出
- 支持本地 SVG 和PDF的導出
- 所有資源可以全球化
- 可合並XREF的(外部引用)實體和依賴符，作為當前繪制的一部分
- 支持不對稱公差、尺寸覆蓋值和格式化的尺寸文本
- Hatch Pattern對象（有63種）
- 導出常數值，便於Vectordraw對象和編程的管理
- 支持的格式包括DWG/DXF(2010以上）、DGN (v8）、DWF格式（采用VectorDraw File Converter轉換)
- 大量的用戶編輯命令（如移動、刪除、旋轉、修剪、復制等）
- 二維曲線組合(排除、相交、結合、Exclusive Disjunction XOR)
- 支持各種編程環境(Visual Studio 2010 , 2008 , 2005 , Delphi , Visual Basic 6 , C++ 6)
3D室內設計圖
VectorDraw Developer Framework (VDF)示例下載
3D功能：
- 呈現類型：Wire 2D、Wire 3D、Hide、Shade、Shade On、Render(applying materials, transparency & lights)
- 視圖：透視、垂直
- 燈光、3D部分剪切、透明、多用戶坐標系
- vdGroundSurface Object支持Mapped Images Over Surfaces，以生成一個Photorealistic Ground Surface Using Aerial Photos
- 用Delanay算法計算一列點的表面和Countour水平