> **本文回答**：高德地图矢量/影像的瓦片地址、三种叠加模式、GCJ02 纠偏写法。

## 一、瓦片地址（高德 XYZ）

| 用途 | URL 模板 | style= |
|---|---|---|
| 矢量道路图 | `https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}` | 8 |
| 影像底图 | `https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}` | 6 |
| 影像 + 路网注记 | `webst0{s}` 的 style=6 打底，再叠一层 **`webst0{s}` 的 style=8** | 6+8 |

> 注记层必须取 **`webst` 域名**的 `style=8`（半透明路网，专门用来压在影像上）。
> `webrd` 域名的 `style=8` 是**不透明的矢量道路图**，叠上去会把卫星影像整个盖住——
> 表现为点"影像"时闪一下影像又变回道路图。

`{s}` 范围 1~4，可做负载均衡——但只有 `svc.webMapUrl` 的 `tileShards` 会替换 `{s}`；直接放进 vjmap raster source 的 `tiles` 时引擎**不认 `{s}`**，要写成具体域名（`webrd01`…）或展开成多个 URL。高德使用 **GCJ02（火星）坐标系**。

## 二、三种叠加模式

### 模式 1：以高德 SDK 加载 CAD WMS（CAD 做 WMS 图层）

适合已有高德 SDK 项目。CAD 图层通过 `AMap.TileLayer.WMS` 加载。

```js
const svc = new vjmap.Service(URL, TOKEN);
await svc.openMap({ mapid: "sys_cadcesium", mapopenway: vjmap.MapOpenWay.GeomRender });

const wmsUrl = svc.wmsTileUrl({
  mapid: "sys_cadcesium",
  layers: "默认图层名",
  bbox: "",                         // ⚠️ 必传空串：默认 "{bbox-epsg-3857}" 只有 vjmap 引擎会填，BBOX 由 AMap WMS 图层追加
  srs: "EPSG:3857",
  crs: "EPSG:4544",                // CAD 图 EPSG
  webMapType: "GCJ02"              // 关键：告诉后端底图是 GCJ02
});

const wms = new AMap.TileLayer.WMS({
  url: wmsUrl.slice(0, wmsUrl.indexOf("?")),
  tileSize: 256,
  blend: true,
  params: getQueryStringArgs(wmsUrl)    // 自己写个 kv 解析
});
wms.setMap(aMapInstance);
```

**缺点**：高德 SDK zoom 上限有限，大图放大不够。

### 模式 2：在 vjmap 里以高德为底图，叠 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(),
    glyphs: svc.glyphsUrl(),
    sources: {
      gaode: {
        type: "raster",
        tileSize: 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 mapId = "sys_cadcesium";
const res = await svc.openMap({ mapid: mapId, mapopenway: vjmap.MapOpenWay.GeomRender, style: vjmap.openMapLightStyle() });
const wmsUrl = svc.wmsTileUrl({
  mapid: mapId,
  layers: res.layer,
  srs: "EPSG:3857",
  crs: "EPSG:4544",
  webMapType: "GCJ02"       // ⭐ 必填
});
map.addSource("wms", { type: "raster", tiles: [wmsUrl], tileSize: 256 });
map.addLayer({ id: "wms", type: "raster", source: "wms" });
```

### 模式 3：CAD 为底图，叠高德瓦片（通过后台 WMS 代理）

当业务全是 CAD 数据时选此模式。

```js
// 先开 CAD 图并建 GeoProjection——clipbounds = 2^initZoom 与下面 zoom: initZoom 必须配对（官方示例 web/04webcadmap.js）
const initZoom = 8;
const res = await svc.openMap({
  mapid: "sys_cad2000",
  mapopenway: vjmap.MapOpenWay.GeomRender,
  style: { backcolor: 0, clipbounds: Math.pow(2, initZoom) }   // 把图范围放大 2^initZoom 倍，让 CAD zoom 与互联网 zoom 对齐
});
const mapExtent = vjmap.GeoBounds.fromString(res.bounds);
const prj = new vjmap.GeoProjection(mapExtent);
const map = new vjmap.Map({
  container: "map",
  style: svc.rasterStyle(),
  center: prj.toLngLat(mapExtent.center()),
  zoom: initZoom,                   // 与 clipbounds 配对
  renderWorldCopies: false
});
map.attach(svc, prj);
await map.onLoad();

// 叠高德 —— 走后端 webMapUrl
const tileUrl = svc.webMapUrl({
  tileCrs: "gcj02",
  tileUrl: [
    "https://webrd0{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",
  mapbounds: res.bounds,
  srs: "EPSG:4527",                   // CAD EPSG
  fourParameterBefore: "39000000,0,1,0" // 若 CAD X 只有 6 位，补带系偏移
});

map.addSource("web-gaode", { type: "raster", tiles: [tileUrl], tileSize: 256 });
map.addLayer({ id: "web-gaode", type: "raster", source: "web-gaode" });
map.moveLayer("web-gaode", map.getStyle().layers[0].id);   // 放到最底
```

## 三、CAD 与高德坐标互转

```js
// CAD → 高德
async function cad2gaode(pt, epsg) {
  const r = await svc.cmdTransform(epsg, "EPSG:4326", pt);    // CAD → WGS84
  return vjmap.transform.convert(r[0], vjmap.transform.CRSTypes.EPSG4326, vjmap.transform.CRSTypes.AMap);
}

// 高德 → CAD
async function gaode2cad(pt, epsg) {
  const wgs = vjmap.transform.convert(pt, vjmap.transform.CRSTypes.AMap, vjmap.transform.CRSTypes.EPSG4326);
  const r = await svc.cmdTransform("EPSG:4326", epsg, vjmap.geoPoint(wgs));
  return r[0];
}
```

`CRSTypes.AMap` = GCJ02。

## 四、常见坑

1. **`webMapType` 漏填** → CAD WMS 整体向东北偏移几百米。
2. **`style=8` 返红色道路图**：是正确行为；想灰色选 style=7 (旧)。
3. **大图分级不够**：高德瓦片 maxZoom=18；CAD 图更大的话，切换到模式 3（CAD 为底）即可突破。
4. **商业 API 要 key**：`lbs.amap.com` 商用要申请 key；本示例 URL 走的是高德前端的瓦片域名，公网可访问但不合规。