背景

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/317480.html

標籤：JavaScript

上一篇：博客園自定義頁面風格設計美化（自定義css，公告欄，頁首，頁尾），有問題歡迎隨時聯系我

下一篇：博客園自定義頁面風格設計美化（自定義css，公告欄，頁首，頁尾），有問題歡迎隨時聯系我

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