Web Map Overlay

About 2 min

Web Map Overlay

Overlay internet maps (Amap / Tianditu) on CAD drawings as reference basemaps.

Concepts

The web map overlay feature renders online map layers such as Amap and Tianditu beneath CAD drawings, helping users align CAD coordinates with real geographic locations.

Two Overlay Modes

Mode	Suitable Scenario	Required Information
Automatic overlay (EPSG)	Drawing uses a national standard projected coordinate system	EPSG code (such as `4509`, `4526`)
Manual overlay (four parameters)	Drawing uses a custom / local coordinate system	At least 2 groups of CAD ↔ longitude/latitude corresponding points

Supported Map Types

Map	Coordinate System	Description
Amap imagery	GCJ02	Satellite imagery + road labels
Amap roads	GCJ02	Pure road vector map
Tianditu imagery	WGS84	National satellite imagery
Tianditu roads	WGS84	National vector road map

API Usage

Use static methods on Engine to complete overlay operations without directly manipulating the underlying pcanvas.

Enable Overlay

// Overlay Amap imagery (automatic mode, EPSG required)
Engine.enableWebMap({
    tileCrs: "gcj02",
    tileUrl: [
        "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}",
    ],
    tileShards: "1,2,3,4",
    mapbounds: "minX,minY,maxX,maxY",   // CAD drawing bounds
    srs: "EPSG:4509",                   // Drawing EPSG code
});

Manual Overlay (Four Parameters)

// Manual mode, provide four-parameter transform
Engine.enableWebMap({
    tileCrs: "gcj02",
    tileUrl: [
        "https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}",
    ],
    tileShards: "1,2,3,4",
    mapbounds: "minX,minY,maxX,maxY",
    // Four parameters: dx, dy, scale, rotation
    fourParameterBefore: "12727039.383545,3579066.6894800006,1,0",
});

Remove Overlay

Engine.disableWebMap();

Set Transparency

// Transparency range: 0 (fully transparent) ~ 1 (fully opaque)
Engine.setWebMapAlpha(0.5);

// Redraw to apply
Engine.pcanvas.redraw();

Query State

if (Engine.isWebMapEnabled()) {
    console.log("Web map overlay is enabled");
}

Command Mode (Visual Panel)

In addition to the API, you can open the visual configuration panel through the WEBMAPOVERLAY command:

await Engine.editor.executerWithOp('WEBMAPOVERLAY');

The panel provides the following features:

Map type selection — Amap imagery / roads, Tianditu imagery / roads
Automatic mode — choose coordinate system type → auto-detect EPSG → one-click overlay
Manual mode — enter corresponding points or directly enter four parameters
Transparency slider — adjust map transparency in real time
Remove overlay — clear the map layer with one click
Configuration memory — automatically save settings to localStorage

EPSG Auto Inference

The automatic mode of the panel supports inferring the EPSG code from the coordinate system type:

Coordinate System Type	EPSG Range	Inference Basis
CGCS2000 3-degree zone	4534 – 4554	Zone number prefix inferred from CAD X coordinate
CGCS2000 6-degree zone	4502 – 4512	Zone number prefix inferred from X coordinate
Xian 80 3-degree zone	2370 – 2390	Zone number prefix inferred from X coordinate
Xian 80 6-degree zone	2338 – 2348	Zone number prefix inferred from X coordinate
Beijing 54 3-degree zone	2401 – 2420	Zone number prefix inferred from X coordinate
Beijing 54 6-degree zone	21413 – 21483	Zone number prefix inferred from X coordinate
WGS84	4326	Used directly

Inference logic: read coordinates from existing entities in the CAD drawing, extract the zone prefix from the X value, then map it to the corresponding EPSG code based on the coordinate system type.

Four-Parameter Calculation

The four-parameter transformation (2D Helmert transform) is used to map CAD coordinates to Web Mercator (EPSG:3857) coordinates.

Parameter Description

Parameter	Meaning
`dx`	Translation in X direction
`dy`	Translation in Y direction
`scale`	Scale ratio
`rotation`	Rotation angle (radians)

Calculate from Corresponding Points

In the panel, enter at least 2 groups of corresponding points (CAD coordinates ↔ longitude/latitude), and the system automatically calculates the four parameters:

In the "Manual Overlay" tab, choose "Calculate from Corresponding Points"
Enter CAD point coordinates (you can click + to pick them on the drawing)
Enter the corresponding longitude/latitude coordinates
Check "No rotation" to lock the rotation angle at 0 (checked by default)
Click "Calculate Four Parameters"

Direct Input

If you already know the four-parameter values, switch to the "Direct Input" tab, fill in dx, dy, scale, and rotation, then click "Apply".

Use Cases

Planning and design — compare building / road design drawings with actual geographic locations
Survey verification — verify whether survey coordinates match map positions
Data overlay — compare GIS data imported into CAD with the basemap
On-site positioning — view the project location directly on design drawings

Online Demo

Reference example: Web Map Overlay