前言
Cesium是一個非常優秀的三維地球GIS引擎（開源且免費, 能夠加載各種符合標準的地圖圖層，瓦片圖、矢量圖等都支持，而AutoCAD是為微型計算機上應用CAD技術而開發的繪圖程式，它有很強的圖形編輯能力，非常適合繪制工程圖紙，繪圖的精確性和繪圖方法的豐富性使得它在機械、電子、建筑、航空航天等領域有著廣泛的應用,常見的一些工程圖紙基本上都是AutoCAD繪制的DWG格式的圖紙；在實際中經常會遇到需要將CAD的圖紙疊加到cesium上面，與地表地形疊加顯示查看，那如何實作在Cesium中實作與CAD的DWG圖疊加顯示分析呢？
技術分析
業內一般的做法步驟為:
-
(1) 在AutoCAD中把DWG圖匯出為DXF明碼格式檔案
-
(2) 利用第三方工具如GDAL，把dxf轉為shp等GIS資料格式
-
(3) 利用開源的gis服務，如geoserver或mapserver把shp檔案發布成gis服務
-
(4) 在cesium中加載gis服務的瓦片圖層
上面的方案的優點很明顯，基本上利用開源的方案能把流程跑通，但在實際專案中缺點也很明顯，主要是在步驟 (1)(2), 因為dwg是私有格式，通過dwg轉出成dxf再轉化成shp檔案時，會丟失圖中的很多資料，CAD資料型別較為豐富，支持點、塊符號、線、面、多段線、橢圓、塊、文字等多種資料型別，而轉換到GIS中，只轉換為點、線、面、注記等型別，這使得CAD圖形資料不能很好的滿足GIS的要求，如：CAD中的Text資料型別，直接轉換后只轉換為GIS中的Point，通過這種轉換去繪制，會導致和原始CAD圖形繪制不太一樣， 同時CAD里面有線型、字體也會導致繪制上的差異性，
唯杰地圖vjmap完全兼容AutoCAD格式的DWG檔案，無需通過轉換可直接發布成gis的WMS格式，可有效解決上面問題，實作步驟為:
-
(1) 上傳DWG圖形，利用唯杰地圖發布為WMS圖層
-
(2) 在cesium中加載wms瓦片圖層
實作
先上效果圖，（紅色的線為cad圖層)
具體步驟:
-
確定CAD圖的坐標系
在打開的CAD圖中，隨便找了圖中的一個點坐標，坐標為”614802.89177, 3257472.36997”
那怎么確定這個坐標是哪個坐標系呢？ 如果已經知道坐標能不能倒推坐標系呢？
可以，但是得分情況，這里我們只討論高斯克呂格投影，
假設已經知道資料的投影是高斯克呂格，怎樣判定是6°帶還是3°帶？怎樣判定中央經線是多少呢？
如果坐標范圍是6位，我們可以判定坐標系不帶帶號的，如果Y值范圍在333000m~667000m，可能是3°分帶法；如果Y值范圍在166 000m~834000m，一定是6°分帶法，如果取值范圍重合的部分有可能3°分帶法也可能在6°分帶法，
如果坐標范圍是8位，我們可以判定坐標系是以帶號命名，并且根據帶號可以知道是3°帶還是6°帶，我們國家的經度范圍大致在73°33′E~105°05′E，所以如果是以帶號命名，帶號在13~23帶之間的，說明是6°分帶法；帶號在25~45帶之間的，說明是3°分帶法，
在這個圖中，坐標為”614802“為6位，大概率能確定為省去了帶系的3°分帶坐標，并且根據圖中圖框中坐標系寫的為2000坐標系，同時地點為重慶附近，而重慶的經度差不多是以106開頭，我們去epsg官網查詢得知，該坐標系應該是"EPSG:4544".
-
上傳打開CAD圖
如果在Web網頁端展示CAD圖形(唯杰地圖云端圖紙管理平臺 https://vjmap.com/app/cloud),這個在前面的博文中已講過，這里不再重復，有需要的朋友可下載工程源代碼研究下，
-
在cesium增加cad圖層
let imageryProvider= new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=3346bb6ad29b5013c5952cf1117b80e9",
layer: "img",
style: "default",
tileMatrixSetID: "w",
format: "tiles",
maximumLevel: 14,
});
?
let viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: imageryProvider,
contextOptions: {
webgl: {
alpha: true
}
},
selectionIndicator: false,
animation: false, //是否顯示影片控制元件
baseLayerPicker: false, //是否顯示圖層選擇控制元件
geocoder: false, //是否顯示地名查找控制元件
timeline: false, //是否顯示時間線控制元件
sceneModePicker: false, //是否顯示投影方式控制元件
navigationHelpButton: false, //是否顯示幫助資訊控制元件
infoBox: false, //是否顯示點擊要素之后顯示的資訊
fullscreenButton: false,
shouldAnimate: true //影片播放
});
?
var layers = viewer.scene.imageryLayers;
?
layers.addImageryProvider(
new Cesium.WebMapServiceImageryProvider({
// 通過vjmap的wms加載cad圖
url: `https://vjmap.com/server/api/v1/map/cmd/wms/
sys_cadcesium/v1?mapbounds=&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:4326&transparent=true&width=256&height=256&layers=se92105f73&crs=EPSG:4544&fourParameter=&token=your token`,
})
);
上面的代碼好像簡單明了，可實際中發現，在cesium中，cad可以和天地圖影像疊加，但在放大的程序中，發現wms生成的瓦片有錯開的問題，如下圖所示:
問題分析
在cesium中，是WGS84坐標系，而CAD圖是4544坐標系，兩個不同的橢球體之間轉換，在WMS中瓦片生成是根據坐標轉換生成的瓦片資料，而由于坐標轉換是非線性的，導致生成的圖片內容不能完全對上，所以有錯開的問題，
那怎么解決呢？
最終的方案是：
-
先通過四引數，把CAD與墨卡托3857的轉換引數求出來
-
再墨卡托3857轉wgs4326
通過這樣的轉換，資料轉換是線性轉換了，就不會有錯開的問題了，
具體代碼如下:
// --Cesium中加載CAD圖(WMS圖層)-- // 地圖服務物件 let svc = new vjmap.Service(env.serviceUrl, env.accessToken) // 打開地圖 let mapId = "sys_cadcesium"; let res = await svc.openMap({ mapid: mapId, // 地圖ID mapopenway: vjmap.MapOpenWay.GeomRender, // 以幾何資料渲染方式打開 style: vjmap.openMapDarkStyle() // div為深色背景顏色時，這里也傳深色背景樣式 }) if (res.error) { // 如果打開出錯 message.error(res.error) } let layer = res.layer;//圖層樣式名 ? let mapBounds = vjmap.GeoBounds.fromString(res.bounds); let boundsArray = mapBounds.toPointArray(); ? // 得到坐標轉換后的墨卡托點 let mktPoints = await svc.cmdTransform("EPSG:4544", "EPSG:3857", boundsArray.map(a => vjmap.geoPoint(a))); // cad上面的點坐標 let cadPoints = [...boundsArray]; // 通過坐標引數求出四引數 let fourparam = vjmap.coordTransfromGetFourParamter( mktPoints.map(a => vjmap.geoPoint(a)), cadPoints.map(a => vjmap.geoPoint(a)), true ); ? if (typeof Cesium !== "object") { // 如果沒有環境 await vjmap.addScript([{ src: "js/Cesium/Cesium.js" }, { src: "js/Cesium/Widgets/widgets.css" }]) } ? let imageryProvider= new Cesium.WebMapTileServiceImageryProvider({ url: "https://t0.tianditu.gov.cn/img_w/wmts?tk=3346bb6ad29b5013c5952cf1117b80e9", layer: "img", style: "default", tileMatrixSetID: "w", format: "tiles", maximumLevel: 14, }); ? let viewer = new Cesium.Viewer('map', { imageryProvider: imageryProvider, contextOptions: { webgl: { alpha: true } }, selectionIndicator: false, animation: false, //是否顯示影片控制元件 baseLayerPicker: false, //是否顯示圖層選擇控制元件 geocoder: false, //是否顯示地名查找控制元件 timeline: false, //是否顯示時間線控制元件 sceneModePicker: false, //是否顯示投影方式控制元件 navigationHelpButton: false, //是否顯示幫助資訊控制元件 infoBox: false, //是否顯示點擊要素之后顯示的資訊 fullscreenButton: false, shouldAnimate: true //影片播放 }); ? ? var layers = viewer.scene.imageryLayers; ? // 加一個高德注記圖層 layers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url: "https://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8", }) ); ? ? // 增加cad的wms圖層 let wmsUrl = svc.wmsTileUrl({ mapid: mapId, // 地圖id layers: layer, // 圖層名稱 bbox: '', // bbox這里不需要傳，cesium會自動加上 srs: "EPSG:4326", // cesium地圖是wgs84 crs: "EPSG:3857", // 先把wgs84轉3857 fourParameter: [fourparam.dx,fourparam.dy,fourparam.scale,fourparam.rotate] // 轉成 3857后，再用四引數去轉成cad坐標 }) layers.addImageryProvider( new Cesium.WebMapServiceImageryProvider({ url: wmsUrl, }) ); ? ? // cad圖坐標轉web wgs84坐標 const cadToWebCoordinate = point => { // 先用四引數轉成墨卡托3857，再墨卡托3857轉wgs84 // 這里需要用四引數反算，因為上面的四引數是3857轉cad的，這里是反過來，要cad轉3857，所以需要反算 let ptMkt = vjmap.coordTransfromByInvFourParamter(vjmap.geoPoint(point), fourparam); return vjmap.Projection.mercator2LngLat(ptMkt);// 再墨卡托3857轉經緯度 } // 轉web wgs84坐標轉cad圖坐標 const webTocadCoordinate = point => { // 先wgs84轉墨卡托3857,再用四引數轉成cad let ptMkt = vjmap.Projection.lngLat2Mercator(vjmap.geoPoint(point)); return vjmap.coordTransfromByFourParamter(ptMkt, fourparam); } // 根據cad圖的中心點，計算wgs84的中心點坐標 let cadCenter = mapBounds.center(); let webCenter = cadToWebCoordinate(cadCenter); //設定初始位置 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(webCenter[0], webCenter[1], 30000) }); ? // 如果需要在地圖上查詢cad的物體坐標，可通過svc.rectQueryFeature來實作，需要傳入兩個cad的點坐標范圍 // 可以通過 webTocadCoordinate 介面把wgs84的坐標轉成 cad 的坐標去查詢.
?出于對資料保密的需要，我們對CAD圖進行了脫敏處理，疊加的效果如下
上面的案例代碼已開源，訪問 (https://vjmap.com/demo/#/demo/map/web/07cesiumCadWmsLayer) ，查看效果和代碼即可，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/500758.html
標籤：其他
上一篇：對于web性能優化我有話說！