CADDWG圖Web視覺化一站式解決方案-唯傑地圖-vjmap

背景

DWG

圖是

AutoCAD

是

私有

格式，只能在CAD軟體上編輯檢視，如何釋出至Web上做資料展示，GIS分析應用開發，一直是業內頭疼的事情。

傳統的辦法採用的解析AutoCAD圖形繪製，並封裝成

AcitveX

控制元件，在Web顯示。但這需要Web端安裝外掛，並且只支援windows平臺，而更重要的

Chrome

已不再支援ActiveX技術。

隨著新技術的發展，html5技術已非常成熟，在渲染方面技術非常成熟，越來越多的方案採用html5渲染方式。但CAD與GIS在資料結構上存在較大的差異，CAD資料型別較為豐富，支援簡單點、線、面、多義線、橢圓、塊、文字等多種資料型別，而轉換到GIS中，只轉換為點、線、面、註記等型別。所以會導致存在著和真實CAD圖形繪製差異的問題。

唯傑地圖-VJMAP-為CAD圖WebGIS視覺化顯示開發提供的一站式解決方案-VJ學習園地 https：//vjmap。com 採用後端解析CAD的圖形直接渲染成GIS瓦片資料；前端採用最新的WebGL技術，載入渲染出的柵格和向量資料，完美解決上述問題；

唯傑地圖

唯傑地圖-VJMAP-為CAD圖WebGIS視覺化顯示開發提供的一站式解決方案-VJ學習園地，

完全相容dwg格式

、

23d效果完美切換

、

高效能webgl渲染

、

個性化地圖定製

、

向量柵格瓦片全支援

、

跨平臺私有化部署

。支援的格式如常用的AutoCAD的DWG格式檔案、GeoJSON等常用GIS檔案格式，它使用WebGL向量圖塊和自定義樣式呈現互動式地圖，提供了全新的大資料視覺化、實時流資料視覺化功能，透過本產品可快速實現瀏覽器和移動端上美觀、流暢的地圖呈現與空間分析，可幫助您在網站中構建功能豐富、互動性強、可定製的地圖應用。

特點

完全相容AutoCAD格式的DWG檔案，無需轉換

繪圖技術先進：採用WebGL技術，支援向量地圖渲染，支援柵格、圖片、影片等圖形渲染，支援3D模型渲染；

個性化地圖：服務端渲染和前端渲染都支援自定義樣式表示式，靈活強大；

多視角模式：支援2D、3D視角，支援垂直視角、360度旋轉視角；

視覺特性：支援無極縮放、支援粒子、航線等動畫效果、支援飛行、平移等運動特效；

功能完善：支援所有常見的地圖功能，提供豐富的js介面；

互動控制：支援滑鼠/單指拖拽、上下左右按鍵進行地圖平移，支援滑鼠滾輪、雙擊、雙指進行地圖縮放，支援Shift+拉框放大；

大資料視覺化：效能卓越，支援大資料視覺化展示

可匯出Autodesk Forge的f2d格式，利用Forge的生態圈進行開發，並可離線部署。示例；

跨平臺支援（支援windows，linux）；支援docker部署；支援私有化部署；支援桌面端語言開發（如C#、Java、C++語言）

快速入手

透過服務開啟地圖

透過

Service

物件的

openMap

方法可開啟伺服器上面已存在的地圖，或者透過

fileid

傳入

http

網路路徑或伺服器本地路徑開啟一幅

DWG

格式的

CAD圖形

。

// 新建地圖服務物件，傳入服務地址和tokenlet svc = new vjmap。Service（env。serviceUrl， env。accessToken）// 開啟地圖let res = await svc。openMap（{ mapid： “helloVjmap”， // 地圖ID （每一次開啟此地圖ID時，會根據fileid去獲取dwg路徑開啟，之後會讀取快取開啟） fileid： “mapfiles/ccf12a1f8711。dwg”， // 必須是相對路徑，路徑相於伺服器程式安裝目錄data下面 mapopenway： vjmap。MapOpenWay。GeomRender， // 以幾何資料渲染方式開啟 style： vjmap。openMapDarkStyle（） // 伺服器渲染樣式}）if （res。error） { message。error（res。error）}

建立地圖物件

獲取上面開啟地圖返回的

地理範圍

建立

座標系

，然後建立

地圖物件

// 根據地圖範圍建立幾何投影座標系let prj = new vjmap。GeoProjection（res。bounds）；// 地圖物件let map = new vjmap。Map（{ container： ‘map’， // DIV容器ID style： svc。vectorStyle（）， // 樣式，這裡是向量瓦片樣式 center： prj。toLngLat（prj。getMapExtent（）。center（））， // 設定地圖中心點 zoom： 2， // 設定地圖縮放級別 pitch： 60， // 傾斜角度 renderWorldCopies： false // 不顯示多屏地圖}）；// 關聯服務物件和投影物件map。attach（svc， prj）；

地圖互動

當滑鼠在地圖的某個實體上面時，需要高亮顯示或者點選檢視，在

向量瓦片

模式下可呼叫

enableVectorLayerHoverHighlight

；在

柵格瓦片

下，可呼叫

enableLayerClickHighlight

// 獲取所有圖層const layers = svc。getMapLayers（）；// 實體型別ID和名稱對映const { entTypeIdMap } = await svc。getConstData（）；// 有高亮狀態（滑鼠在地圖元素上時，會高亮）map。enableVectorLayerHoverHighlight（（event， feature， layer） => { // 點選高亮實體回撥事件 const prop = feature。properties； let content = `event： ${event}； feature： ${feature。id}； layer： ${layers［prop。layer］。name}； type： ${entTypeIdMap［prop。type］}` message。info（{ content， key： “info”， duration： 5}）；}）

增加覆蓋物或其它圖層

地圖提供了在地圖之上繪製覆蓋物的能力，比如點標記、純文字標記、折線、圓、多邊形、矩形等圖形，在繪製中可以對點標記進行標題、圖示等進行設定，對摺線可以進行顏色、寬度等屬性進行設定，對於面（圓、多邊形、矩形）同樣可以進行填充色、邊框色、寬度等很多自定義屬性進行設定。

增加一個marker覆蓋物

const mapBounds = map。getGeoBounds（0。6）； // 獲取地圖地理範圍，並進行比例縮放let position = mapBounds。randomPoint（）； // 在此地理範圍內生成一個隨機點座標let latLng = map。toLngLat（position）； // 地理座標轉經緯度let marker = new vjmap。Marker（）； // 新建一個Markermarker。setLngLat（latLng）。addTo（map）； // 設定座標並加入地圖

建立很多正方形拉伸圖層

let lengthMin = mapBounds。width（） / 200； // 隨機生成正方形邊長的最小長度let lengthMax = mapBounds。width（） / 100； // 隨機生成正方形邊長的最大長度let geoDatas = ［］； // 資料for（let i = 0； i < 100； i++） { const pts = ［］； const len = vjmap。randInt（lengthMin， lengthMax）； // 在兩個範圍內隨機生成一個長度 const p1 = mapBounds。randomPoint（）； // 在此範圍內隨機生成一個點，做為正方形的右下角的點 const p2 = vjmap。geoPoint（［p1。x， p1。y + len］）； const p3 = vjmap。geoPoint（［p1。x + len， p1。y + len］）； const p4 = vjmap。geoPoint（［p1。x + len， p1。y］）； pts。push（p1， p2， p3， p4）； // 正方形的四個點座標 geoDatas。push（{ points： map。toLngLat（pts）， // 需要把地理座標轉化成經緯度去繪製 properties： { name： “square” + （i + 1）， color： vjmap。randomColor（）， type： “square”， baseHeight： 0， height： prj。toMeter（vjmap。randInt（lengthMin * 10， lengthMax * 10）） // 高度，這裡根據上面設定的最小和最大長度的十倍隨機生成一個高度值 } }）}// 建立拉伸物件圖層let fillExtrusions = new vjmap。FillExtrusion（{ data： geoDatas， // 資料 // 如果是hover狀態時，用紅色，非hover狀態時，取屬性中的‘color’做為顏色值 fillExtrusionColor：［‘case’，［‘to-boolean’，［‘feature-state’， ‘hover’］］， ‘red’，［‘get’， ‘color’］］， fillExtrusionOpacity： 0。8， // 透明度 fillExtrusionHeight：［‘get’， ‘height’］， // 高度值 fillExtrusionBase：［‘get’， ‘baseHeight’］， // 基點高度，如需懸空，可改變此值 isHoverPointer： true， // 滑鼠在上面時會改變滑鼠形狀 isHoverFeatureState： true // 滑鼠在上面時會改變狀態值，從而有高亮效果}）；fillExtrusions。addTo（map）； // 增加至地圖// 點選事件fillExtrusions。clickLayer（e => message。info（`您點選了第 ${e。features［0］。id} 個，名稱為 ${e。features［0］。properties。name}，顏色為 ${e。features［0］。properties。color} 的 ${e。features［0］。properties。type}`））// 懸浮事件fillExtrusions。hoverPopup（f => `