背景

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

傳統的辦法採用的解析AutoCAD圖形繪製，並封裝成AcitveX控制元件，在Web顯示。但這需要Web端安裝外掛，並且只支援windows平臺，而更重要的Chrome已不再支援ActiveX技術。

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

唯傑地圖 https://vjmap.com 採用後端解析CAD的圖形直接渲染成GIS瓦片資料；前端採用最新的WebGL技術，載入渲染出的柵格和向量資料，完美解決上述問題；

唯傑地圖

唯傑地圖為使用者自定義地圖格式WebGIS視覺化顯示開發提供的一站式解決方案，完全相容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圖形.

// 新建地圖服務物件，傳入服務地址和token
let 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(); // 新建一個Marker
marker.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 => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });

效果如下:

demo地址 可訪問 https://vjmap.com/demo/#/demo/map/overlay/fillextrusion/fillextrusion