label-overlay

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

一、场景

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

方案：

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

二、仅显示天地图注记

// 经 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（业务数据）

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 自带：

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: [...]
  }
});

六、文字动态缩放

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

七、避免重叠（collision）

vjmap 自动避让：

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" 指定。