快捷搜索:  汽车  科技

如何在高德地图上添加平面图(高德地图与CAD图叠加显示方法汇总及优缺点分析)

如何在高德地图上添加平面图(高德地图与CAD图叠加显示方法汇总及优缺点分析)opts.url StringDescription参数说明:opts (WMSLayerOptions) 默认图层参数Name

前言

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

效果如下

如何在高德地图上添加平面图(高德地图与CAD图叠加显示方法汇总及优缺点分析)(1)

在线体验地址: 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地图叠加效果图

如何在高德地图上添加平面图(高德地图与CAD图叠加显示方法汇总及优缺点分析)(2)

在线体验地址

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开发的效果好

猜您喜欢: