高德地圖與CAD圖疊加顯示方法匯總及優缺點分析

• 2022 年 9 月 14 日
• 筆記
• cadwebgis

前言

​ 高德地圖應用在許多領域，平常我們用的地圖導航，除過正常的地圖導航指引功能之外，其實還有很多實用的功能。如高德影像地圖應用在包括地理、土地測量、水文學、生態學、氣象學以及海洋學等方面。AutoCAD在行業中常用於城市規劃、平面設計、建築師等，這其中也要用到高德地圖。最常見的是CAD圖與高德地圖疊加使用，通過兩者疊加直觀顯示，助力行業提高工作效率。那如何將高德地圖與CAD圖疊加顯示呢？下面聽小編把方法一一介紹下以及各種方法的優缺點。

方法一：高德SDK載入CAD的WMS圖層

原理

高德SDK

高德SDK提供了行業標準圖層符合 OGC 標準或者行業通行規範的的圖層類型

AMap.TileLayer.WMS

用於載入OGC標準的WMS地圖服務的一種圖層類，僅支援EPSG3857坐標系統的WMS圖層。
查看 WMS的OGC標準。

new AMap.TileLayer.WMS(opts: WMSLayerOptions)

參數說明：

opts (WMSLayerOptions) 默認圖層參數

CAD的WMS圖層

唯傑地圖VJMAP為CAD圖或自定義地圖格式WebGIS可視化顯示開發提供的一站式解決方案，支援的格式如常用的AutoCAD的DWG格式文件、GeoJSON等常用GIS文件格式，它使用WebGL矢量圖塊和自定義樣式呈現互動式地圖, 提供了全新的大數據可視化、實時流數據可視化功能。

唯傑地圖//vjmap.com/無需轉換可直接打開CAD的DWG格式的圖形，並提供了WMS服務介面。

其介面文檔為:

/**
 * wms服務url地址介面
 */
export  interface IWmsTileUrl {
    /** 地圖ID(為空時採用當前打開的mapid)， 為數組時表時同時請求多個. */
    mapid?: string | string[];
    /** 地圖版本(為空時採用當前打開的地圖版本). */
    version?: string | string[];
    /** 圖層名稱（為空時採用當前打開的地圖圖層名稱). */
    layers?: string | string[];
    /** 範圍，預設{bbox-epsg-3857}. (如果要獲取地圖cad一個範圍的wms數據無需任何坐標轉換，將此範圍填cad範圍,srs,crs,mapbounds填為空).*/
    bbox?: string;
    /** 當前坐標系,預設(EPSG:3857). */
    srs?: string;
    /** cad圖的坐標系，為空的時候由元數據坐標系決定. */
    crs?: string | string[];
    /** 地理真實範圍，如有值時,srs將不起作用 */
    mapbounds?: string;
    /** 寬. */
    width?: number;
    /** 高. */
    height?: number;
    /** 是否透明. */
    transparent?: boolean;
    /** 四參數(x偏移,y偏移,縮放，旋轉弧度)，可選，對坐標最後進行修正*/
    fourParameter?: string | string[];
    /** 是否是矢量瓦片. */
    mvt?: boolean;
    /** 是否考慮旋轉，在不同坐標系中轉換是需要考慮。默認自動考慮是否需要旋轉. */
    useImageRotate?: boolean;
    /** 旋轉時影像處理演算法. 1或2,默認自動選擇（旋轉時有用）*/
    imageProcessAlg?: number;
    /** 當前互聯網底圖地圖類型 WGS84(84坐標，如天地圖，osm), GCJ02(火星坐標，如高德，騰訊地圖)， BD09LL(百度經緯度坐標，如百度地圖)， BD09MC(百度墨卡托米制坐標，如百度地圖)*/
    webMapType?: "WGS84" | "GCJ02" | "BD09LL" | "BD09MC";
}

實現

參考高德提拱的WMS的示例程式碼 //developer.amap.com/demo/jsapi-v2/example/thirdlayer/wms-layer ，實現程式碼如下

let map = new AMap.Map('map', {
    zoom: 15,
    center: [106.166187, 29.44102]
});
// 調用唯傑地圖服務對象
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 cadEpsg = "EPSG:4544";// cad圖的espg代號
// 增加唯傑地圖中cad的wms圖層
let wmsUrl = svc.wmsTileUrl({
    mapid: mapId, // 地圖id
    layers: layer, // 圖層名稱
    bbox: '', // bbox這裡不需要
    srs: "EPSG:3857", //
    crs: cadEpsg,
    webMapType: "GCJ02"
})
function getQueryStringArgs(url) {
    let theRequest = {};
    let idx = url.indexOf("?");
    if (idx != -1) {
        let str = url.substr(idx + 1);
        let strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
            let items = strs[i].split("=");
            theRequest[items[0]] = items[1];
        }
    }
    return theRequest;
}

let wms = new AMap.TileLayer.WMS({
    url: wmsUrl.substr(0, wmsUrl.indexOf("?")),
    blend: true,
    tileSize: 256,
    params: getQueryStringArgs(wmsUrl)
});

wms.setMap(map);

效果如下

在線體驗地址： //vjmap.com/demo/#/demo/map/web/08gaodeCadWmsLayer

優點

（1）能利用高德SDK開發，如果之前的項目是基於高德SDK開發的， 工作量不大

​ (2) 能用高德原生的地圖數據，互聯網地圖數據豐富效果好

缺點

​ (1) 不能用唯傑地圖vjmap的SDK進行開發，一些與CAD相關的功能開發受限。

​ (2) 由於高德地圖的級別有限，導致CAD圖縮放至一定級別後，不能再放大。如果圖紙大的話，會導致級別不夠的問題

方法二： 唯傑地圖SDK中高德地圖上載入CAD圖

原理

​ 唯傑地圖SDK中也可以顯示互聯網地圖。可以利用唯傑地圖同時顯示高德地圖和CAD圖。此方法為互聯網地圖做為底圖，CAD做為一個WMS圖層進行疊加。唯傑地圖本身沒有互聯網地圖數據，載入互聯網地圖是利用了在線公共地圖瓦片數據地址 //blog.csdn.net/weixin_45728126/article/details/119040004

實現

// --高德地圖與CAD圖疊加[高德地圖為底圖]--高德地圖與CAD圖疊加，以高德地圖為坐標系
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 根據地圖範圍建立經緯度投影坐標系
let prj = new vjmap.LnglatProjection();

// 地圖對象
let map = new vjmap.Map({
    container: 'map', // DIV容器ID
    style: {
        version: svc.styleVersion(),
        glyphs: svc.glyphsUrl(),
        sources: {
            gaode: {
                type: 'raster',
                tiles: ["//webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
            }
        },
        layers: [{
            id: 'gaode',
            type: 'raster',
            source: 'gaode',
        }]
    },
    center: [0, 0],
    zoom: 12,
    pitch: 0,
    renderWorldCopies: false // 不顯示多屏地圖
});

// 關聯服務對象和投影對象
map.attach(svc, prj);
await map.onLoad();


// 先打開cad圖
let mapId = "sys_cadcesium";
let res = await svc.openMap({
    mapid: mapId, // 地圖ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以幾何數據渲染方式打開
    style: vjmap.openMapLightStyle() // div為深色背景顏色時，這裡也傳深色背景樣式
})
if (res.error) {
    // 如果打開出錯
    message.error(res.error)
}
let layer = res.layer;//圖層樣式名

let cadEpsg = "EPSG:4544";// cad圖的espg代號
// 增加cad的wms圖層
let wmsUrl = svc.wmsTileUrl({
    mapid: mapId, // 地圖id
    layers: layer, // 圖層名稱
    srs: "EPSG:3857",
    crs: cadEpsg,
    webMapType: "GCJ02" // 底圖是高德地圖，所以要選GCJ02,如果是天地圖，可以不用填此項
})
map.addSource('wms-test-source', {
    'type': 'raster',
    'tiles': [
        wmsUrl
    ],
    'tileSize': 256
});
map.addLayer({
        'id': 'wms-test-layer',
        'type': 'raster',
        'source': 'wms-test-source',
        'paint': { "raster-opacity": 1 }
    }
);

在線體驗地址：

//vjmap.com/demo/#/demo/map/web/04webWmsGaode

優點

（1）能利用唯傑地圖的SDK同時載入高德地圖和CAD圖

(2) CAD相關的功能開發不受限制

缺點

（1）由於載入互聯網地圖是利用了在線公共地圖瓦片數據地址，所以數據不如高德SDK開發的效果好

​ (2) 由於高德地圖的級別有限，導致CAD圖縮放至一定級別後，不能再放大。如果圖紙大的話，會導致級別不夠的問題

​ (3) 因為底圖是高德地圖，所以整個地圖的坐標系是高德的火星坐標，如果業務數據是CAD數據的話，都需要通過坐標轉換才能載入到圖上。

方法三： 唯傑地圖SDK中CAD圖上載入高德地圖

原理

其原理同方法二。不同的是，此方法是以CAD圖做為底圖，高德地圖做為一個圖層去疊加CAD圖層。

但是唯傑地圖本身沒有互聯網地圖數據，載入互聯網地圖是利用了在線公共地圖瓦片數據地址，其地址沒有提供互聯網地圖的WMS服務。所以此方法需要唯傑地圖後台根據前端傳遞的高德瓦片WMTS地址，根據一定的演算法轉成WMS服務去適配CAD圖。

實現

// --CAD圖與互聯網圖疊加--CAD圖與互聯網圖疊加顯示，以CAD圖為坐標系
// 假設我們希望CAD全圖顯示是對應級別為8級,這樣地圖縮小後，互聯網地圖還會顯示
let initZoom = 8;
let style = {
    backcolor: 0, // div為深色背景顏色時，這裡也傳深色背景樣式
    clipbounds: Math.pow(2, initZoom) // 只傳值，不傳範圍，表示之前的範圍放大多少倍
}
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
let res = await svc.openMap({
    mapid: "sys_cad2000",
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以幾何數據渲染方式打開
    style:  style
})
if (res.error) {
    message.error(res.error)
}
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
let prj = new vjmap.GeoProjection(mapExtent);
let center = mapExtent.center();
let map = new vjmap.Map({
    container: 'map', // container ID
    style: svc.rasterStyle(),
    center: prj.toLngLat(center),
    zoom: initZoom,
    renderWorldCopies: false
});
map.attach(svc, prj);
await map.onLoad();

// 增加高德地圖底圖
const addGaodeMap = async (isRoadway) => {
    const tileUrl = svc.webMapUrl({
        tileCrs: "gcj02",
        tileUrl:  isRoadway ? [
                "//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
            ] :
            /* 如果用影像 */
            [
                "//webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}",
                "//webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
            ],
        tileSize: 256,
        tileRetina: 1,
        tileMaxZoom: 18,
        tileShards: "1,2,3,4",
        tileToken: "",
        tileFlipY: false,
        mapbounds: res.bounds,
        srs: "EPSG:4527",// 可通過前兩位獲取 vjmap.transform.getEpsgParam(vjmap.transform.EpsgCrsTypes.CGCS2000, 39).epsg
        // 因為sys_cad2000這個圖只有6位，沒有帶系。需要在坐標轉換前平移下帶系  //blog.csdn.net/thinkpang/article/details/124172626
        fourParameterBefore: "39000000,0,1,0"
    })

    map.addSource('web-gaode-source', {
        'type': 'raster',
        'tiles': [
            tileUrl
        ],
        'tileSize': 256
    });
    map.addLayer({
            'id': 'web-gaode-layer',
            'type': 'raster',
            'source': 'web-gaode-source',
            'paint': { "raster-opacity": 1 }
        }
    );
    let layers = map.getStyle().layers
    // 把這個圖層放至所有圖層的最下面
    map.moveLayer('web-gaode-layer', layers[0].id)

在線體驗地址

//vjmap.com/demo/#/demo/map/web/04webcadmap

優點

（1）能利用唯傑地圖的SDK同時載入高德地圖和CAD圖

(2) CAD相關的功能開發不受限制

(3) 因為此方法是以CAD圖為底圖，所以坐標系和CAD圖為坐標系。如果業務數據是CAD的數據，這樣無需進行坐標轉換就能直接顯示在地圖上，非常方便。

(4) 此方法不受高德地圖的級別限制，即使圖紙大的話，也不會造成級別不夠的問題

缺點

（1）由於載入互聯網地圖是利用了在線公共地圖瓦片數據地址，所以數據不如高德SDK開發的效果好