> **本文回答**：多图 / DeckGL / L7 / Leaflet / OpenLayers / Cesium / 批注 / 比较 —— 各种叠加与融合技术的选型总览。

# 地图叠加总览

## 分类

| 类别 | 目的 | 子文件 |
|---|---|---|
| **多 vjmap 地图比较** | 同一页面放 2~N 张 vjmap，视图同步、卷帘对比 | [multi-map](multi-map.md) / [sync-view](sync-view.md) |
| **Deck.GL 集成** | 在 vjmap 上加 Deck.GL 高级可视化（轨迹 / 弧线 / 热力） | [deckgl](deckgl.md) |

| **Leaflet 集成** | 在 Leaflet 里叠加 CAD WMS / GeoJSON | [leaflet](leaflet.md) |
| **OpenLayers 集成** | 在 OL 里叠加 CAD | [openlayers](openlayers.md) |
| **Cesium 3D 集成** | 2D CAD ↔ 3D Cesium 相互叠加 | [cesium](cesium.md) |
| **Three.js 自定义图层** | vjmap CustomLayer + Three.js（三维需求直接用 vjmap3d） | vjmap3d skill `references/advance/render2d.md` |
| **图纸批注** | SVG 批注叠加在地图上 | [annotation](annotation.md) |
| **图例 / 指北针 / 比例尺** | 常见控件叠加 | [legend-north-scale](legend-north-scale.md) |
| **地图比较** | CAD 新旧图对比 | 见 [multi-map](multi-map.md)（"地图比较"一节）|

## 选型速查

| 场景 | 推荐 |
|---|---|
| 轨迹、弧线、3D 柱 | Deck.GL（业界最全） |
| 光柱、流动线、雷达动画 | L7 |
| 已有 Leaflet 项目 | Leaflet + `svc.wmsTileUrl` |
| 已有 OL 项目 | OpenLayers + `svc.wmsTileUrl`（传 `bbox: ""`，用 `ol/source/TileWMS` 加载）；`svc.webMapUrl` 是把互联网瓦片重投影到 CAD 瓦片网格（CAD 为底图时用） |
| 3D 地球 / 3D 建筑 / 倾斜摄影 | Cesium |
| Three.js 模型 / 车辆 | CustomLayer |
| 简单 SVG 箭头 / 批注 | vjmap 的 `DivOverlay` |
| 同一页面两张图比对 | 多 vjmap.Map + `vjmap.syncMaps(map1, map2)`；卷帘用 `new vjmap.Compare(map1, map2, container)` |

## 前提

- 多数集成方案都是在 **CAD 为底图**（`GeoProjection`）或 **互联网为底图**（`LnglatProjection`）的 vjmap 实例之上叠加。
- 集成时坐标系必须一致（把 CAD 坐标用 `map.toLngLat(...)` 转成渲染经纬度后传给其他库）。

## 主题级 Top 3 陷阱

1. **Deck.GL / L7 拿到 CAD 原始坐标** → 画面偏移到地图范围外。必须 `map.toLngLat` 转换。
2. **Leaflet / OpenLayers 的坐标系未对齐** → 请用 WMS 叠加并指定正确 EPSG。
3. **Cesium 2D ↔ 3D 同步视角抖动** → Cesium 相机的 pitch/heading 和 vjmap 的 pitch/bearing 定义不同；需要转换。