> **本文回答**：在 CAD 底图上叠加互联网地图的标注 / POI 图层。

## 一、场景

用户希望在 CAD 底图上显示："这里叫 xx 街"、"这里有地标建筑"。

方案：

- 叠一层 **天地图 `cva_w` 注记**（推荐，WGS84 无需加偏）
- 或叠高德矢量瓦片 + 关闭底图 style（只保留标注）
- 或用 vjmap 自建 Symbol 图层，基于业务 POI 数据自己渲染

## 二、仅显示天地图注记

```js
// 经 webMapUrl 代理，以 CAD 为底图
const cvaUrl = svc.webMapUrl({
  tileCrs: "wgs84",
  tileUrl: ["https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={t}"],
  tileSize: 256,
  tileMaxZoom: 18,
  tileShards: "1,2,3,4,5,6",
  tileToken: "YOUR_TK",
  mapbounds: res.bounds,
  srs: "EPSG:4548"
});

map.addSource("tdt-label", { type: "raster", tiles: [cvaUrl], tileSize: 256 });
map.addLayer({
  id: "tdt-label",
  type: "raster",
  source: "tdt-label",
  paint: { "raster-opacity": 1 }
});

// 放到 CAD 图层之上（最上层）
```

## 三、只显示 POI（隐藏背景）

百度 / 高德 / 天地图的标注瓦片本身就是透明背景的注记，天然符合"只叠标注"的需求；无需额外处理。

## 四、叠加 POI GeoJSON（业务数据）

```js
const pois = await fetchPOIs(svc, bounds);     // 自己的 API
map.addSource("pois", { type: "geojson", data: pois });
map.addLayer({
  id: "poi-icon",
  type: "symbol",
  source: "pois",
  layout: {
    "icon-image": "marker-15",
    "text-field": ["get", "name"],
    "text-font": ["Open Sans Regular"],
    "text-offset": [0, 1.2],
    "text-size": 12
  },
  paint: {
    "text-color": "#fff",
    "text-halo-color": "#000",
    "text-halo-width": 1
  }
});
```

## 五、字体与图标（glyphs & sprite）

- vjmap style 需要 `glyphs` 字段指向字体服务，`sprite` 指向图标集。
- vjmap 自带：

```js
const map = new vjmap.Map({
  style: {
    version: svc.styleVersion(),
    glyphs: svc.glyphsUrl(),
    // sprite 可选：只有图层用 icon-image 时才需要；
    // svc.spriteUrl(name) 必填名称，如 svc.spriteUrl('mysprite') → {base}sprite/mysprite
    sprite: svc.spriteUrl('mysprite'),
    sources: {...}, layers: [...]
  }
});
```

## 六、文字动态缩放

```js
layout: {
  "text-size": ["interpolate", ["linear"], ["zoom"],
    10, 8,
    16, 14,
    20, 22
  ]
}
```

## 七、避免重叠（collision）

vjmap 自动避让：

```js
layout: {
  "text-allow-overlap": false,         // 默认 false
  "icon-allow-overlap": false,
  "text-ignore-placement": false
}
```

如要强制显示所有 POI（不避让）：`"text-allow-overlap": true`。

## 八、常见坑

1. **天地图注记在 CAD 上错位** → CAD 为底图时要走 `webMapUrl` + 正确 EPSG，不要直接用天地图 URL。
2. **叠加互联网标注文字压住 CAD 文字** → 调整 layer 顺序或 `"text-allow-overlap": false`。
3. **字体缺失（黑方块）** → 没设 `glyphs`；vjmap 用 `svc.glyphsUrl()` 即可。
4. **图标找不到** → sprite 名字对应错；sprite 图标在 `"icon-image"` 指定。