高德地图与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<