如何在高德地图上添加平面图(高德地图与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 |
唯杰地图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);
效果如下
在线体验地址: 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地图叠加效果图
在线体验地址
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开发的效果好