# Map Overlay
# Two Ways to Overlay Maps
# Merge CAD Graphics for Overlay
This method uses composeMap to merge graphics. The server composes different CAD maps into a new combined graphic based on parameters. When viewing the merged map, you see the combined result.
// --Graphic processing to compose new graphics--Process graphic list, then compose into a new graphic
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Compose into new map: process sys_world, then merge with sys_hello to generate new map file
let rsp = await svc.composeNewMap([
{
mapid: "sys_world", // Map id
// Parameters below can be set as needed for layer, bounds, coordinate transformation
//layers: ["latlon labels","COUNTRY"], // Layer name list to display
//clipbounds: [10201.981489534268, 9040.030491346213, 26501.267379, 4445.465999], // Bounds to display
//fourParameter: [0,0,2,0] // Four-parameter transformation for the map
},
{
mapid: "sys_hello"
}
])
if (!rsp.status) {
message.error(rsp.error)
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# WMS Service for Combining Graphics
Web Map Service (WMS) is the most widely used and simplest way to display GIS data on the web. It overlays different graphic tiles by coordinates. This method uses WMS to overlay maps and returns the combined tile data to the frontend.
// Overlay other graphics on base map via WMS service
// Get map metadata first for layer style
let cadMapId = "sys_world"; // Overlay map id
let style = await svc.createStyle({
backcolor: 0xFFFFFF // Light theme
}, cadMapId)
let wmsurl = svc.wmsTileUrl({
mapid: cadMapId,
version:"v1",
layers: style.stylename,
mapbounds: res.bounds,
fourParameter: "0,0,1,0" // (x offset, y offset, scale k, rotation r) Same coords as base map, so no offset/scale/rotation
})
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 }
}
);
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
# Comparison
WMS service: Fast during overlay; less efficient with many overlays; less convenient for later data queries (multiple maps involved).
Merge CAD graphics: Slower during overlay (server creates new graphic); after creation, performance is independent of number of maps; convenient for later queries.
The example below uses WMS overlay. For CAD graphic merge, see Graphic Processing.
# CAD Map Overlay by Coordinates
Related examples:
WMS overlay raster graphics—overlay two maps via WMS raster tiles (opens new window)
# CAD Map Overlay with Four-Parameter Calibration
Example
WMS graphic arrangement—arrange multiple maps via WMS (opens new window)
# Internet Map + CAD Map Overlay (Internet Map as Base)
This scenario uses an internet map as the base (internet map as coordinate system). The map uses the CAD map’s WMS service to adapt to the internet map for overlay.
If the CAD map has a geographic coordinate system (e.g. CGCS2000), it can be overlaid automatically.
If the CAD map has no coordinate system, you must specify three or more common points for calibration and compute the four-parameter (x/y offset, rotation, scale) for overlay.
See Coordinate transformation for details.
This scenario fits when most data is from the internet map and the CAD map is only for reference.
# CAD Map + Internet Map Overlay (CAD Map as Base)
This scenario uses the CAD map as the base (CAD map as coordinate system). The map uses the internet map’s WMS service to adapt to the CAD map for overlay.
If the CAD map has a geographic coordinate system (e.g. CGCS2000), it can be overlaid automatically.
If the CAD map has no coordinate system, you must specify three or more common points for calibration and compute the four-parameter (x/y offset, rotation, scale) for overlay.
See Coordinate transformation for details.
This scenario fits when most data is from the CAD map and the internet map is only for reference.
TIP
For more on internet map overlay, see Internet map.