地图叠加

// --WMS叠加栅格图形--通过wms服务，把两个图形通过栅格瓦片叠加到一起
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
let res = await svc.openMap({
    mapid: "sys_hello",
    mapopenway: vjmap.MapOpenWay.GeomRender // 以几何数据渲染方式打开
})
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: 2,
    renderWorldCopies: false
});
map.attach(svc, prj);
map.fitMapBounds();
await map.onLoad();
map.addControl(new vjmap.NavigationControl());
map.addControl(new vjmap.MousePositionControl({showZoom: true}));
// 基于上面的底图，通过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 }
    }
);

// --WMS图形排列组合--将多个图通过WMS排列组合
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
svc.setCurrentMapParam({
    darkMode: true // 由于没有打开过图，所以主动设置黑色模式
})
// 将下面四个图按2行2列的排列方式，组合成新图
let mapIds = ['sys_zp', 'sys_world', 'sys_hello', "sys_topo"];
// 新的地图范围假设设置为0,0,20000,20000
const newMapLength = 20000;
// 先获取四个图的元数据，获取坐标范围
const col = 2;
const cellMapColLength = newMapLength / col;
const cellMapRowLength = newMapLength / Math.ceil( mapIds.length / col);
let allMapParams = [];// 所有的地图参数
let mapFourParam = {};//记录下每个地图的四参数，用于把地图的数据加进新地图中时的坐标转换
let addMarkers = []; // 要增加的每个地图的中心点位置
for(let i = 0; i < mapIds.length; i++) {
    let metadata = await svc.metadata(mapIds[i]);
    let bounds = vjmap.GeoBounds.fromString(metadata.bounds);
    let mapBounds = bounds; // 原来每个地图的地图范围
    let style = await svc.createStyle({
        backcolor: svc.currentMapParam().darkMode ? 0 : 0xFFFFFF
    }, mapIds[i]); // 原来每个地图的地图样式
    bounds = bounds.scale(+metadata.initViewScale * 1.1); // 比初始视图比例稍大点就可以
    // 四参数，找一个图的左上角各右下角坐标与新的坐标下面的左上角和右下解坐标对应起来，来求解四参数(四参数最少要两个点)
    let srcPoints = [
        bounds.min,
        bounds.max
    ];
    const curRow = Math.floor(i / col);
    const curCol = i % col;
    let destMin = [cellMapColLength * curCol, newMapLength - cellMapRowLength * (curRow + 1)];
    let destMax = [cellMapColLength * (curCol + 1), newMapLength - cellMapRowLength * curRow];
    // 求的新范围可能不是正方形，得求出这个矩形的中心点的最小正方形
    let newBounds = new vjmap.GeoBounds(vjmap.geoPoint(destMin), vjmap.geoPoint(destMax));
    const c = newBounds.center();
    let w = newBounds.width() < newBounds.height() ? newBounds.width() : newBounds.height();
    // 另外坐标系上拾取的与上面的点一一对应的坐标
    let destPoints = [
        vjmap.geoPoint([c.x - w / 2.0, c.y - w / 2.0]),
        vjmap.geoPoint([c.x + w / 2.0, c.y + w / 2.0])
    ]
    // 通过坐标参数求出四参数，不用考虑旋转
    // 因为wms叠加，是根据wms的范围去找图的范围，所以参数应设置成destPoints转srcPoints
    let fourparam = vjmap.coordTransfromGetFourParamter(destPoints, srcPoints, true);
    allMapParams.push({
        mapid: mapIds[i],
        fourParameter: [fourparam.dx, fourparam.dy, fourparam.scale, fourparam.rotate],  // 参数为(平移x,平移y,缩放k,旋转弧度r)
        layer: style.stylename,  // 原来每个地图的地图样式
        mapBounds: mapBounds // 原来每个地图的地图范围
    })
    // 下面记录下每个地图的中心点，然后到时在新的地图中，把之前每个点的中心点绘制出来，用于测试坐标转换
    mapFourParam[mapIds[i]] = fourparam;
    addMarkers.push({
        mapid: [mapIds[i]],
        point: bounds.center()
    })
}
let mapBounds = [0, 0, newMapLength, newMapLength];
let mapExtent = vjmap.GeoBounds.fromArray(mapBounds)
// 建立坐标系
let prj = new vjmap.GeoProjection(mapExtent);
// 新建地图对象
let map = new vjmap.Map({
    container: 'map', // container ID
    style: {
        version: svc.styleVersion(),
        glyphs: svc.glyphsUrl(),
        sources: {},
        layers: []
    },// 矢量瓦片样式
    center: [0,0], // 中心点
    zoom: 2,
    renderWorldCopies: false
});
// 地图关联服务对象和坐标系
map.attach(svc, prj);
await map.onLoad();
const addWmsLayer = async (maps) => {
    let mapIds = [];
    let layers = [];
    let fourParameters = [];
    for(let a = 0; a < maps.length; a++) {
        let m = maps[a];
        mapIds.push(m.mapid);
        fourParameters.push(m.fourParameter);
        layers.push(m.layer);
    }
    let wmsurl = svc.wmsTileUrl({
        mapid: mapIds,
        layers: layers,
        fourParameter: fourParameters,
        mapbounds: mapExtent.toString() // 全图的范围
    })
    map.addSource('wms-maps-source', {
        'type': 'raster',
        'tiles': [
            wmsurl
        ],
        'tileSize': 256
    });
    map.addLayer({
            'id': 'wms-maps-layer',
            'type': 'raster',
            'source': 'wms-maps-source',
            'paint': { "raster-opacity": 1 }
        }
    );
}
addWmsLayer(allMapParams);
// 在新的坐标系下，把之前每个地图的中心点绘制出来
for(let m of addMarkers) {
    let fourParam = mapFourParam[m.mapid];
    // 需要注意的是，这个地方因为是从原来的地图到wms坐标范围，所以需要反算 通过四参数反算进行坐标转换
    let newPoint = vjmap.coordTransfromByInvFourParamter(m.point, fourParam);
    new vjmap.Marker({color: vjmap.randomColor()})
        .setLngLat(map.toLngLat(newPoint))
        .addTo(map);
}
map.addControl(new vjmap.MousePositionControl({showZoom: true}));
map.setZoom(0);// 设置到级别最小

// --天地图与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(),
        sources: {
            tdt1: {
                type: 'raster',
                tiles: ["https://t3.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=7baeffb96bf61861b302d0f963cfda66"],
                // 要使用影像请用这个地址
                // tiles: ["https://t3.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=7baeffb96bf61861b302d0f963cfda66"]
            },
            tdt2: {
                type: 'raster',
                tiles: ["https://t3.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=7baeffb96bf61861b302d0f963cfda66"],
            }
        },
        layers: [{
            id: 'tdt1',
            type: 'raster',
            source: 'tdt1',
        },{
            id: 'tdt2',
            type: 'raster',
            source: 'tdt2',
        }]
    },
    center: prj.toLngLat([117.21242940465396, 39.196783504641644]),
    zoom: 15,
    pitch: 0,
    renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
// 根据地图本身范围缩放地图至全图显示
//map.fitMapBounds();
await map.onLoad();
// 先获取地图元数据来获取图层样式
let cadMapId = "sys_cad2000"
let style = await svc.createStyle({
    backcolor: 0xFFFFFF // 浅色主题
}, cadMapId)
let wmsurl = svc.wmsTileUrl({
    mapid: cadMapId,
    version:"v1",
    layers: style.stylename,
    srs: "EPSG:3857", // 底图是天地图坐标系
    crs: "EPSG:4548", // cad图是2000坐标  可通过前两位获取 vjmap.transform.getEpsgParam(vjmap.transform.EpsgCrsTypes.CGCS2000, 39).epsg
    // fourParameter: "-39000000,0,1,0"// 此图坐标前面没有加带系，需要加上带系的偏移量，用四参数调节位置
})
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 }
    }
);
map.addControl(new vjmap.MousePositionControl({showZoom: true}));

// --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) {
    consoloe.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: 10,
    renderWorldCopies: false
});
map.attach(svc, prj);
await map.onLoad();
map.addControl(new vjmap.NavigationControl());
map.addControl(new vjmap.MousePositionControl({showZoom: true}));
// 如果x是8位，可通过前两位获取 如 vjmap.transform.getEpsgParam(vjmap.transform.EpsgCrsTypes.CGCS2000, 39).epsg
// 如果x是6位，是通过下面此工具 https://vjmap.com/demo/#/demo/map/web/03webzgetepsg，把地图移动至cad图位置的省市，点击获取当前地图中心经纬度， 计算EPSG，找一个与 CAD图距离相近的EPSG
let epsg = "EPSG:4509" // cad图的epsg
// 增加高德地图底图
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
    })
    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坐标与高德坐标相互转换示例
    let webCo = await cad2webCoordinate(center, false); // cad转高德
    let cadCo = await web2cadCoordinate(webCo, false); // 高德转cad
    console.log(center, webCo, cadCo)
}
// 增加天地图图底图
const addTiandituMap = async (isRoadway) => {
    const tileUrl = svc.webMapUrl({
        tileCrs: "wgs84",
        tileUrl: [
            isRoadway ? "https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={t}" :
                /* 如果用影像 */"https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={t}",
            "https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={t}"
        ],
        tileSize: 256,
        tileRetina: 1,
        tileMaxZoom: 18,
        tileShards: "1,2,3,4,5,6",
        tileToken: [
            "6d53378dc5f7dbef8d84ffdd2b54139b", // 有可能有一个token会导致请求过多而返回失败，可以多写几个，失败时会尝试后面的token
            "69eb2fa0de3b2a668f1ef603a3f8bc73"
        ],
        tileFlipY: false,
        mapbounds: res.bounds,
        srs: epsg
    })
    map.addSource('web-tdt-source', {
        'type': 'raster',
        'tiles': [
            tileUrl
        ],
        'tileSize': 256
    });
    map.addLayer({
            'id': 'web-tdt-layer',
            'type': 'raster',
            'source': 'web-tdt-source',
            'paint': { "raster-opacity": 1 }
        }
    );
    let layers = map.getStyle().layers
    // 把这个图层放至所有图层的最下面
    map.moveLayer('web-tdt-layer', layers[0].id)
    // cad坐标与天地图坐标相互转换示例
    let webCo = await cad2webCoordinate(center, true); // cad转天地图
    let cadCo = await web2cadCoordinate(webCo, true); // 天地图转cad
    console.log(center, webCo, cadCo)
}
const removeMapLayer = ()=> {
    // 删除source及source下面的所有图层
    map.removeSourceEx(['web-gaode-source', 'web-tdt-source'])
}
// cad转web坐标，isWgs84是否为wgs84 4326坐标，如天地图；否的话为gcj02火星坐标,如高德地图
const cad2webCoordinate = async (pt, isWgs84) => {
    // 通过坐标转换把转成wgs84 4326坐标
    let res = await svc.cmdTransform(epsg,"EPSG:4326",pt); // 如果不想调服务转，也可以在前端用proj4库
    // 如果为火星坐标，还需要从4326转火星
    let webPt = res[0];// 返回的第1条结果
    if (isWgs84 === false) {
        webPt = vjmap.transform.convert(webPt, vjmap.transform.CRSTypes.EPSG4326, vjmap.transform.CRSTypes.AMap)
    }
    return webPt;
}
// web转cad坐标，isWgs84是否为wgs84 4326坐标，如天地图；否的话为gcj02火星坐标,如高德地图
const web2cadCoordinate = async (pt, isWgs84) => {
    // (上面计算过程的逆过程), 如果为火星坐标，还需要从火星转4326，再通过坐标转换把wgs84 4326转成cad图坐标
    if (isWgs84 === false) {
        pt = vjmap.transform.convert(pt, vjmap.transform.CRSTypes.AMap, vjmap.transform.CRSTypes.EPSG4326);
    }
    // 通过坐标转换把cad epsg转成wgs84 4326坐标
    let res = await svc.cmdTransform("EPSG:4326",epsg,vjmap.geoPoint(pt)); // 如果不想调服务转，也可以在前端用proj4库
    let cadPt = res[0];// 返回的第1条结果
    return cadPt
}
map.on("zoomend", async ()=> {
    let center = map.fromLngLat(map.getCenter());// 得到cad地图地理中心坐标点
    let gcj02Web = await cad2webCoordinate(center, false);// 转高德坐标
    let wgs84Web = await cad2webCoordinate(center, true);// 转天地图坐标
    let content = `当前地图中心点坐标： CAD坐标:${center.x.toFixed(4)},${center.y.toFixed(4)}; 高德坐标:${gcj02Web[0].toFixed(4)},${gcj02Web[1].toFixed(4)}; 天地图坐标:${wgs84Web[0].toFixed(4)},${wgs84Web[1].toFixed(4)}`;
    console.log({ content, key: "info", duration: 3});
})
addGaodeMap(true);