项目简介
1. 项目定位
本项目是一套园区三维数字孪生可视化系统：以本地 3D Tiles 园区场景为空间底座，叠加 Cesium Ion 影像底图与业务图层，在浏览器中完成运营总览、设备运维、视频监控、人员轨迹与基础空间分析。
核心目标不是做成「纯 GIS 工具」，而是做成地图常驻、业务面板浮层的大屏交互产品：用户始终处于三维场景中，切换菜单只切换叠加的业务能力。
2. 技术选型与理由
| 层次 | 选型 | 说明 |
|---|---|---|
| 应用框架 | Vue 2.6 + Vue Router + Vuex | 业务面板组件化；路由按模块拆分；全局清理走 store action |
| 三维引擎 | Cesium 1.95 | 原生支持 3D Tiles、CZML、Entity、相机与量算类交互 |
| 图表 | ECharts 5 | 首页双栏统计面板 |
| 轻量 UI | Vant 2（按需） | 人员轨迹日期选择等表单控件 |
| 构建 | Vue CLI 5 + Webpack | Cesium Workers/Assets 拷贝、分包缓存 |
| 样式 | Less + 全局 CSS 变量 | 深色 GIS 面板统一视觉 |
选型上，Cesium 比 Three.js 更适合「园区级地理坐标 + 倾斜摄影/瓦片 + 轨迹回放」这类场景；Vue 负责 UI 状态与生命周期，避免把 DOM 交互全部塞进 Cesium 脚本。
3. 总体架构
┌─────────────────────────────────────────────────────────┐
│ Header（顶栏导航） + Tabbar（基础功能二级菜单） │
├─────────────────────────────────────────────────────────┤
│ router-view：业务面板（Home / Operation / Cameras …） │
│ ↕ 事件总线 / Vuex / 全局 viewer │
├─────────────────────────────────────────────────────────┤
│ MapModel：Cesium Viewer 单例、Tileset、相机、全屏 │
├─────────────────────────────────────────────────────────┤
│ public/Apps：3D Tiles、GeoJSON、CZML、GLB、图标资源 │
└─────────────────────────────────────────────────────────┘
4. 三维场景关键实现
4.1 底图与地形
- 影像：Cesium Ion
createWorldImagery（需配置 Ion Token）。 - 地形：使用椭球地形（
EllipsoidTerrain），避免世界地形与本地建筑模型冲突导致「埋地」。 - 深度：按功能开关
depthTestAgainstTerrain；量算等交互关闭半透明拾取相关风险配置。
4.2 园区模型
园区主体为本地 3D Tiles（public/Apps/3dtitle/贝尔园区场景模型/tileset.json），加载后：
- 应用首页默认相机（
homeCamera.js，可被地图标签覆盖并写入localStorage）。 - 按包围球半径设置缩放距离与俯仰角限制，防止穿模与仰天。
- 分辨率倍率限制（如
devicePixelRatio上限），控制 GPU 压力。
5. 业务模块技术要点
5.1 首页大屏
- 布局：地图全幅 + 左右半透明统计柱。
- 图表：ECharts 在面板内按需初始化，注意
resize与路由销毁时dispose。 - 告警：GeoJSON 上图 + Billboard，点击联动镜头（
cream.jsViewTab）。
5.2 智能运维 / 视频监控
- 点位：GeoJSON → Entity Billboard。
- 选中：替换图标样式、雷达高亮；视频监控弹窗挂到
document.body全屏居中，避免侧栏overflow裁切。
5.3 人员监控与历史轨迹
- 人员点位：CZML 巡检路线解析出初始坐标上图。
- 历史轨迹：点击弹窗进入轨迹模式，加载对应 CZML DataSource。
- 播放：
viewer.clock+ 底部自定义时间轴（进度、倍速）；避免持续trackedEntity，减少相机抖动闪烁。 - 返回：退出轨迹模式、移除 DataSource、重新加载人员点位，而不是跳转首页。
5.4 基础功能
| 能力 | 技术要点 |
|---|---|
| 地图标签 | 相机快照、弹窗编辑、localStorage 持久化、首页默认视角 |
| 元素查询 | scene.pick / 3DTileFeature 属性展示 |
| 空间量算 | Primitive 折线 + 测面半透明 Polygon（allowPicking: false 规避半透明拾取崩溃） |
| 路径漫游 | SampledPositionProperty + VelocityOrientationProperty，模型轴向用四元数补偿（y20：-90°） |
| 通视分析 | 起终点采样高度，绿线通视 / 红线遮挡；异步 clamp 失败时回退插值 |
6. 构建与性能优化
6.1 Webpack / Vue CLI
CopyWebpackPlugin：拷贝 CesiumWorkers、Assets、Widgets。CESIUM_BASE_URL：指向打包后的静态资源根。splitChunks：chunk-cesium、chunk-echarts、chunk-vendors分离，利于缓存。- 生产关闭
sourceMap；开发启用NODE_OPTIONS=--openssl-legacy-provider兼容新 Node。
6.2 运行时
- Tileset：
maximumScreenSpaceError、maximumMemoryUsage、skipLevelOfDetail控制精度与显存。 - 相机：俯仰与缩放钳制，减少无效渲染视角。
- UI：轨迹时间轴用节流/直接改 DOM，降低 Vue 每帧重绘。
- 资源：清理未引用的旧版
public/Apps/js与多余 GLB，缩短部署体积。
7. 交互与样式层
- 视觉：深色半透明玻璃面板、蓝色强调色，与卫星影像对比清晰。
- 顶栏：主菜单文字项 + 「基础功能」切角按钮，选中态底线指示。
- 弹窗：编辑视点、视频播放等挂到
body，使用非 scoped 样式保证离开侧栏后主题仍生效。 - 全屏：
body.map-fullscreen隐藏 Header / 面板 / 时间轴，地图独占视口。
8. 数据与扩展方式
当前演示数据以静态文件为主：
- GeoJSON：设备、监控、告警
- CZML：人员巡检轨迹
- GLB：路径漫游载具（如 y20）
- 3D Tiles：园区场景
扩展建议：
- 用后端 API 替换
$.getJSON，保持 Entity 构建逻辑不变。 - 轨迹回放可升级为服务端下发 CZML / 二进制轨迹流。
- 通视、量算结果可落库，形成「分析工单」闭环。
- Ion Token、默认相机等配置外置到环境变量或配置中心。
9. 工程结构速览
src/
main.js # 入口：Router / Vuex / ECharts / jQuery / Vant
components/MapModel.vue # Cesium 场景核心
views/ # 业务面板
js/view/ # 视角、镜头预设
js/fence/ # 电子围栏（可选启用）
store/ # clearArrAll 等全局清理
public/Apps/
3dtitle/ # 园区 3D Tiles
model/ # GeoJSON / CZML / GLB
img/ # 图标与贴图
功能清单
| 能力 | 技术要点 |
|---|---|
| 地图标签 | 相机快照、弹窗编辑、localStorage 持久化、首页默认视角 |
| 元素查询 | scene.pick / 3DTileFeature 属性展示 |
| 空间量算 | Primitive 折线 + 测面半透明 Polygon（allowPicking: false 规避半透明拾取崩溃） |
| 路径漫游 | SampledPositionProperty + VelocityOrientationProperty，模型轴向用四元数补偿（y20：-90°） |
| 通视分析 | 起终点采样高度，绿线通视 / 红线遮挡；异步 clamp 失败时回退插值 |
- GeoJSON：设备、监控、告警
- CZML：人员巡检轨迹
- GLB：路径漫游载具（如 y20）
- 3D Tiles：园区场景
