> **本文回答**：互联网地图（天地图 / 高德 / 百度 / OSM / 国际底图）在 vjmap 中的叠加方式总览与选型速查。

# 互联网地图叠加总览

## 两种场景

| 场景 | 以谁为坐标系 | 典型用途 | 子文件 |
|---|---|---|---|
| **互联网底图为底**（上叠 CAD WMS） | 互联网（经纬度） | 业务用 GIS 数据为主，CAD 只是参考 | [gaode](gaode.md) / [tianditu.md](tianditu.md) / [baidu](baidu.md) |
| **CAD 为底**（上叠互联网 WMS） | CAD 图坐标 | 业务全是 CAD 数据，互联网地图做视觉参考 | 同上 + [zoom-level-map](zoom-level-map.md) |

选哪一种决定了：你用 `LnglatProjection` 还是 `GeoProjection`、以及 `center` 传什么值。

## 坐标系基础 1 张图

```
  天地图      → WGS84        → EPSG:3857（只能用 `_w` 球面墨卡托瓦片；`_c` 经纬度直投瓦片引擎加载不了）
  OSM        → WGS84        → EPSG:3857（Web 墨卡托）
  国际底图   → WGS84        → EPSG:3857
  高德       → GCJ02        → EPSG:3857 经 GCJ02 加偏
  腾讯       → GCJ02        → EPSG:3857 经 GCJ02 加偏
  百度       → BD09         → EPSG:3857 经 GCJ02 + 百度二次加偏
  CAD        → EPSG:4xxx（北京54 / 西安80 / CGCS2000）
```

**规则**：

1. 天地图是唯一"不需要加偏"的国产底图；如果你的业务坐标是 WGS84（GPS），它直接显示。
2. 高德 / 腾讯（GCJ02）叠加 CAD 时必须告诉后端 `webMapType: "GCJ02"`，否则偏移几百米；百度不填（在百度 JSAPI 里叠加，加偏由 JSAPI 处理，见 [baidu](baidu.md)），天地图 / OSM 默认 WGS84 也不填。
3. 不同 CAD 图的 EPSG 码可通过 X 前两位推（`getEpsgParam`）。

## 子项索引

| 子文件 | 回答什么 |
|---|---|
| [tianditu](tianditu.md) | 天地图矢量/影像/注记/Token/WMTS 地址 |
| [gaode](gaode.md) | 高德栅格/矢量/影像/GCJ02 加偏的三种模式 |
| [baidu](baidu.md) | 百度特殊坐标系 BD09 + WMS 透明色坑 |
| [tencent](tencent.md) | 腾讯地图 XYZ 地址 + 降级到高德 |
| [osm-overseas](osm-overseas.md) | OSM / ArcGIS 等国外底图 |
| [raster-tile](raster-tile.md) | 通用 XYZ / WMTS 瓦片叠加（支持任意厂家） |
| [vector-tile](vector-tile.md) | 矢量瓦片（MVT）叠加 |
| [label-overlay](label-overlay.md) | 标注/POI 叠加到 CAD 底图 |
| [zoom-level-map](zoom-level-map.md) | CAD 与互联网地图 zoom 对齐（初始 zoom = 8） |

## 最短代码样本（以高德为底，叠 CAD WMS）

```js
const svc = new vjmap.Service(URL, TOKEN);
const prj = new vjmap.LnglatProjection();
const map = new vjmap.Map({
  container: "map",
  style: {
    version: svc.styleVersion(),
    sources: {
      gaode: {
        type: "raster",
        tileSize: 256,     // 高德是 256 瓦片；不写按引擎默认 512 处理，取低一级瓦片放大显示而发糊
        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,
  renderWorldCopies: false
});
map.attach(svc, prj);
await map.onLoad();

const cadMapId = "sys_cadcesium";
const res = await svc.openMap({ mapid: cadMapId, mapopenway: vjmap.MapOpenWay.GeomRender, style: vjmap.openMapLightStyle() });
const wmsUrl = svc.wmsTileUrl({
  mapid: cadMapId,
  layers: res.layer,
  srs: "EPSG:3857",       // 默认 bbox "{bbox-epsg-3857}" 由 vjmap 引擎填充，这里无需传 bbox
  crs: "EPSG:4544",       // CAD 图 epsg
  webMapType: "GCJ02"     // 高德底图 → GCJ02
});
map.addSource("wms-cad", { type: "raster", tiles: [wmsUrl], tileSize: 256 });
map.addLayer({ id: "wms-cad", type: "raster", source: "wms-cad" });
```

## 主题级 Top 3 陷阱

1. **`webMapType` 漏填或填错** → CAD WMS 叠到高德 / 腾讯上整体偏移几百米（百度不填）。
2. **CAD 图没有坐标系却没校四参数** → 叠加后 CAD 出现在错误位置（例如南极或海里）。
3. **互联网地图 tile 直连国产厂家域名** → 被 CORS / 频率限制阻挡；应通过 `svc.webMapUrl()` 走后台代理。

## 底图瓦片来源合规性

- 天地图 / 高德 / 百度 的瓦片地址属于其服务，商业应用请申请各自的 key 和 License。
- 公网示例 URL 里的 `tk=...` 仅供开发测试，请勿用于生产。
- 企业自有瓦片（WMTS）直接作为 raster source 即可。