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

背景

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