# 地图叠加

# 地图叠加的两种方式

# 合并CAD图形进行叠加

此方式是通过composeMap合成图形，在后台根据参数把不同的CAD图合成一个新的组合图形。看查合并图时，查看的是组合后的图形。

// --图形处理合成新的图形--通过将图形列表处理后，再合成一个新的图形
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 组合成新的图,将sys_world图进行一定的处理后，再与sys_hello进行合成，生成新的地图文件名
let rsp = await svc.composeNewMap([
    {
        mapid: "sys_world", // 地图id
        // 下面的参数可以根据实际需要来设置，可以对图层，范围，坐标转换来进行处理
        //layers: ["经纬度标注","COUNTRY"], // 要显示的图层名称列表
        //clipbounds: [10201.981489534268, 9040.030491346213, 26501.267379,  4445.465999], // 要显示的范围
        //fourParameter: [0,0,2,0] // 对地图进行四参数转换计算
    },
    {
        mapid: "sys_hello"
    }
])
if (!rsp.status) {
    message.error(rsp.error)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# WMS服务组合图形

Web 地图服务 (WMS) 是用于在 Web 上显示 GIS 数据的最广泛使用和最简单的形式，他能将不同的图形瓦片根据坐标叠加对应到一起。此方式是通过WMS方式，把要叠加显示的图通过WMS叠加到一起，把叠加后的瓦片数据返回给前端。

// 基于底图，通过wms服务叠加其他图形
// 先获取地图元数据来获取图层样式
let cadMapId = "sys_world"; // 要叠加的图形id
let style = await svc.createStyle({
    backcolor: 0xFFFFFF // 浅色主题
}, cadMapId)
let wmsurl = svc.wmsTileUrl({
    mapid: cadMapId,
    version:"v1",
    layers: style.stylename,
    mapbounds: res.bounds,
    fourParameter: "0,0,1,0" // 参数为(平移x,平移y,缩放k,旋转弧度r) 因为坐标与底图一样，所以不用偏移缩放和旋转
})
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 }
    }
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 两者的优缺点比较如下：

WMS服务组合图形：叠加显示过程中速度快；叠加图形太多时效率低；后期查询数据时不方便(涉及到多个图查询)

合并CAD图形创建叠加图形：叠加显示过程速度较慢（在后台要重新创建新图形); 创建完成后和组合图形多少没关系了；后期查询方便

以下面的示例以 WMS服务叠加 以例。如需要合并CAD图形处理的方法请参考文档 (图形处理)[guide/processMap]

# CAD图根据坐标直接叠加

# CAD图根据四参数校准叠加

示例

WMS图形排列组合--将多个图通过WMS排列组合 (opens new window)

显示代码

全屏显示

# 互联网地图与CAD图叠加(为互联网地图为底图)

此场景是以互联网地图为底图（以互联网地图为坐标系），通用调用唯杰地图CAD图的 WMS 服务适配互联网地图来进行叠加显示。

如果CAD图有地理坐标系，如本身是2000坐标系的图，则可以自动叠加。

如果CAD图本身没有坐标系，只能通过人为指定三个以上的公共点进行校准，计算出四参数（平移xy、旋转、缩放)来进行叠加。

具体原理可查看坐标转换文档。

此场景适合于业务数据大部分是互联网地图数据，CAD图只是叠加查看效果。

显示代码

全屏显示

# CAD图与互联网地图叠加(为CAD图为底图)

此场景是以CAD为底图（以CAD图为坐标系），通用调用唯杰地图提供的互联网地图的WMS服务来适配CAD地图来进行叠加显示。

如果CAD图有地理坐标系，如本身是2000坐标系的图，则可以自动叠加。

如果CAD图本身没有坐标系，只能通过人为指定三个以上的公共点进行校准，计算出四参数（平移xy、旋转、缩放)来进行叠加。

具体原理可查看坐标转换文档。

此场景适合于业务数据大部分是CAD图数据，互联网地图只是叠加查看效果。

显示代码

全屏显示

提示

更多互联网地图叠加显示的介绍请查看互联网地图文档。

← 地图个性化 SQL查询 →