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

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

作者: vjmap | 来源:发表于2022-09-14 22:04 被阅读0次

    前言

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

    唯杰地图VJMAPCAD图或自定义地图格式WebGIS可视化显示开发提供的一站式解决方案,支持的格式如常用的AutoCADDWG格式文件、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开发的效果好

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/vswlortx.html