高德地图与CAD图叠加显示方法汇总及优缺点分析

前言

 高德地图应用在许多领域，平常我们用的地图导航，除过正常的地图导航指引功能之外，其实还有很多实用的功能。如高德影像地图应用在包括地理、土地测量、水文学、生态学、气象学以及海洋学等方面。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) 默认图层参数

Name Description
opts.url String wmts服务的url地址，如：' https://services.arcgisonline.com/arcgis/rest/services/'+ 'Demographics/USA_Population_Density/MapServer/WMTS/'
opts.blend Boolean 地图级别切换时，不同级别的图片是否进行混合，如图层的图像内容为部分透明请设置为false
opts.params Object OGC标准的WMS地图服务的GetMap接口的参数，包括VERSION、LAYERS、STYLES、FORMAT、TRANSPARENT等， CRS、BBOX、REQUEST、WIDTH、HEIGHT等参数请勿添加，例如： { LAYERS: 'topp:states', VERSION:'1.3.0', FORMAT:'image/png' }
opts.zooms [Number, Number] (default [2,30]) 支持的缩放级别范围，默认范围 [2-30]
opts.opacity Number (default 1) 透明度，默认 1
opts.visible Boolean (default true) 是否显示，默认 true
opts.zIndex Number (default 4) 图层叠加的顺序值，1 表示最底层。默认 zIndex：4

CAD的WMS图层

唯杰地图VJMAP为CAD图或自定义地图格式WebGIS可视化显示开发提供的一站式解决方案，支持的格式如常用的AutoCAD的DWG格式文件、GeoJSON等常用GIS文件格式，它使用WebGL矢量图块和自定义样式呈现交互式地图, 提供了全新的大数据可视化、实时流数据可视化功能。

唯杰地图https://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的示例代码 https://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);

效果如下

image-20220914205123373.png

在线体验地址： https://vjmap.com/demo/#/demo/map/web/08gaodeCadWmsLayer

优点

（1）能利用高德SDK开发，如果之前的项目是基于高德SDK开发的， 工作量不大

 (2)  能用高德原生的地图数据，互联网地图数据丰富效果好

缺点

(1) 不能用唯杰地图vjmap的SDK进行开发，一些与CAD相关的功能开发受限。

(2)  由于高德地图的级别有限，导致CAD图缩放至一定级别后，不能再放大。如果图纸大的话，会导致级别不够的问题

方法二： 唯杰地图SDK中高德地图上加载CAD图

原理

唯杰地图SDK中也可以显示互联网地图。可以利用唯杰地图同时显示高德地图和CAD图。此方法为互联网地图做为底图，CAD做为一个WMS图层进行叠加。唯杰地图本身没有互联网地图数据，加载互联网地图是利用了在线公共地图瓦片数据地址 https://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: ["https://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 }
    }
);

在线体验地址：

https://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 ? [
                "https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
            ] :
            /* 如果用影像 */
            [
                "https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}",
                "https://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位，没有带系。需要在坐标转换前平移下带系  https://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)

互联网地图旋转后与CAD地图叠加效果图


image-20220914215514374.png

在线体验地址

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

https://vjmap.com/demo/#/demo/map/web/05fourparamrotatecad

优点

（1）能利用唯杰地图的SDK同时加载高德地图和CAD图

(2) CAD相关的功能开发不受限制

(3) 因为此方法是以CAD图为底图，所以坐标系和CAD图为坐标系。如果业务数据是CAD的数据，这样无需进行坐标转换就能直接显示在地图上，非常方便。

(4) 此方法不受高德地图的级别限制，即使图纸大的话，也不会造成级别不够的问题

缺点

（1）由于加载互联网地图是利用了在线公共地图瓦片数据地址，所以互联网地图数据不如高德SDK开发的效果好

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349

推荐阅读更多精彩内容