gaode

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

一、瓦片地址（高德 XYZ）

注记层必须取 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 加载。

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

最常用。

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 数据时选此模式。

// 先开 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 与高德坐标互转

// 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 走的是高德前端的瓦片域名，公网可访问但不合规。