地图叠加总览
本文回答：多图 / DeckGL / L7 / Leaflet / OpenLayers / Cesium / 批注 / 比较 —— 各种叠加与融合技术的选型总览。
分类
| 类别 | 目的 | 子文件 |
|---|---|---|
| 多 vjmap 地图比较 | 同一页面放 2~N 张 vjmap，视图同步、卷帘对比 | multi-map / sync-view |
| Deck.GL 集成 | 在 vjmap 上加 Deck.GL 高级可视化（轨迹 / 弧线 / 热力） | deckgl |
| Leaflet 集成 | 在 Leaflet 里叠加 CAD WMS / GeoJSON | leaflet |
| OpenLayers 集成 | 在 OL 里叠加 CAD | openlayers |
| Cesium 3D 集成 | 2D CAD ↔ 3D Cesium 相互叠加 | cesium |
| Three.js 自定义图层 | vjmap CustomLayer + Three.js（三维需求直接用 vjmap3d） | vjmap3d skill references/advance/render2d.md |
| 图纸批注 | SVG 批注叠加在地图上 | annotation |
| 图例 / 指北针 / 比例尺 | 常见控件叠加 | legend-north-scale |
| 地图比较 | CAD 新旧图对比 | 见 multi-map（"地图比较"一节）|
选型速查
| 场景 | 推荐 |
|---|---|
| 轨迹、弧线、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 陷阱
- Deck.GL / L7 拿到 CAD 原始坐标 → 画面偏移到地图范围外。必须
map.toLngLat转换。 - Leaflet / OpenLayers 的坐标系未对齐 → 请用 WMS 叠加并指定正确 EPSG。
- Cesium 2D ↔ 3D 同步视角抖动 → Cesium 相机的 pitch/heading 和 vjmap 的 pitch/bearing 定义不同；需要转换。