项目概述：随着低空经济的蓬勃发展与数字孪生城市治理的深入推进，针对城市楼顶私自加盖、违规占用绿地及人工地面巡查死角多、立体体积取证难的痛点，本项目研发了一套基于 Vue 3.4 + Pinia + Tailwind CSS + ECharts 5 + Spring Boot 3.2 + WebGL 实景三维 的一体化【城市无人机智能巡检与违章建筑三维实景识别系统】。深度融合“无人值守自动机巢超视距常态化巡航 + 倾斜摄影三维实景网格 (3D Tiles) 时空布尔差分 + YOLOv8 遥感目标检测 + 城管执法电子证据链上链”，构建“PC端低空作战大屏 + Admin端全域监管总控 + 手机移动端外业随身端”空地一体化智能闭环！
一、 系统业务拓扑与低空协同架构
系统围绕“外业巡检飞手/执法队员、低空空域调度员、城管综合执法中队长、智慧城市调度指挥长”四类核心角色，构建了高效协同的低空数字化治理中枢：
- 🛸 PC 电脑端（城市低空巡检与违建三维实景作战大屏）：城市低空空域态势大屏、WebGL三维实景倾斜摄影与违建体积推演沙盘、智能自主飞行航线自适应规划、违建多期影像时相差分审计、低空飞控指挥与执法联动VIP中心；
- 🛡️ 运营管理总控台 (Admin 端)：全市无人机巡检与违建网格监管总控台、机器视觉YOLO违建特征与分类规则库、违建AI疑似工单人工仲裁与执法派单、飞手CAAC执照资质与自动机巢设备池、空域申报与无人机航行遥测链路审计；
- 📱 手机移动端与巡检外业随身端 (Mobile 端)：外业执法飞手随身工作台、机载双光4K云台画面一键悬停拍照与自主返航、AR实景投射违建识别与红外测温、现场执法勘验与限期拆除告知书电子送达、飞行日志里程存折。
二、 三端全保真系统界面与高清全景运行展示
1. PC 电脑端（城市低空巡检与违建三维实景作战大屏）
(1) 城市低空空域与无人机巡检作战大屏 (StationDeskView)
实时监控 380.5 km² 低空空域、在空 8 架巡检无人机与 12 座自动机巢在线态势，支持无人机航迹一键穿透与机巢自动弹射起飞调度。
(2) WebGL 三维实景倾斜摄影与违建体积推演沙盘 (RecommendSandboxView)
高精度 3D 实景网格时空差分运算，直观呈现楼顶私自加盖立体边界，毫秒级测算出面积 84.5 ㎡、体积 236.6 m³ 与结构荷载超标率。
(3) 智能自主飞行航线与网格化空域规划中心 (CurriculumBooksView)
自适应生成贴体倾斜摄影航点，预先计算航向 80% 与旁向 75% 重叠率，自动绕行城市禁飞区与高压线微电网。
(4) 违章建筑AI智能识别与多期影像比对审计 (GradingInspectionView)
近 6 个月各行政区航拍识别违建柱状态势分析、YOLOv8 遥感目标检测分类（彩钢瓦阳光房、侵占绿地、外拓基坑）与闭环整改率看板。
(5) 低空飞控指挥与城管综合执法联动 VIP 中心 (BookVipView)
民航空域适航报备电子通行证、司法级倾斜摄影区块链防篡改证据链存证与不动产产权冻结联合惩戒会商。
2. 运营管理总控台 (Admin 端)
(1) 全市无人机巡检与违建网格监管总控台 (AdminDashboardView)
全市 8 个行政片区低空航行安全时数监控、网格化巡检架次分布与机载边缘计算 16.8ms 低延迟性能指标。
(2) 机器视觉 YOLO 违建特征与分类规则库 (IsbnLibraryView)
楼顶彩钢瓦加盖、红线绿地圈建、超规划地下室开挖等空间形态视觉规则与置信度过滤门限集中维护。
(3) 违建AI疑似工单人工仲裁与城管执法派单 (AuditNotesView)
执法中队长在线快速核验证据链，一键剔除合法施工误报，秒级指派现场执法队员定点勘验立案。
(4) 飞手执照资质与自动机巢设备池 (CreditScoreView)
民航局 CAAC 商业无人机执照认证、自动充电舱机械臂与电池循环寿命健康度（98.6%）全生命周期审计。
(5) 空域申报与无人机航行遥测链路审计 (SystemLogsView)
民航空管 ADS-B 广播遥测报文解析、机载 5G 专网加密心跳与 4K 倾斜摄影数字指纹上链日志追踪。
3. 手机移动端与巡检外业随身端 (Mobile 端)
(1) 飞手巡检工作台 (MobileHomeView)
机载4K变焦与红外双光画面、目标锁定与一键自主返航。
(2) AR实景透视违建识别 (MobileIsbnScanView)
相机贴合城市白模、红外温差透视与现场三维体积几何算量。
(3) 现场执法取证与告知书 (MobileNotesDetailView)
自动生成限期拆除告知书、区块链存证编号与电子文书送达。
(4) 飞行日志存折与工单 (MobileMyOrdersView)
飞手1840km巡检里程存折与违建限期拆除整改看板。
三、 核心三维网格布尔差分与遥测处理后端代码实战
// Spring Boot 3.2 城市低空无人机智能巡检与倾斜摄影实景三维差分中枢
@RestController
@RequestMapping("/api/v1/uav-patrol")
@Tag(name = "UavInspectionController", description = "无人机空地一体化自动巡查与违建三维识别中枢")
public class UavInspectionController {
@Autowired
private DroneTelemetryService telemetryService;
@Autowired
private SpatialMeshDifferenceService meshService;
@Autowired
private LawEnforcementTicketService ticketService;
@PostMapping("/telemetry/ads-b")
@Operation(summary = "接收无人机机载5G专网高精RTK航迹与姿态遥测")
public ResponseEntity<ApiResponse> processFlightTelemetry(
@Valid @RequestBody DroneTelemetryDTO dto) {
// 1. 验证空域申报合规性与三维电子围栏
boolean inCorridor = telemetryService.validateAirspaceFence(
dto.getDroneId(), dto.getLongitude(), dto.getLatitude(), dto.getAltitude()
);
// 2. 更新飞行动态遥测状态
FlightStatusVO status = telemetryService.updateTelemetry(dto);
return ResponseEntity.ok(ApiResponse.success(status));
}
@PostMapping("/mesh/difference-detect")
@Operation(summary = "触发倾斜摄影3D实景网格时空布尔差分与体积算量")
public ResponseEntity<ApiResponse> detect3dViolation(
@RequestParam String buildingCode,
@RequestParam String newMeshTileUrl,
@RequestParam String basePlanningModelUrl) {
// 3D Tiles 网格布尔差分运算
MeshDiffResult diff = meshService.computeBooleanDifference(newMeshTileUrl, basePlanningModelUrl);
if (diff.getExtrudedVolumeCum() > 10.0 && diff.getConfidence() > 0.90) {
// 自动立案生成城管综合行政执法现场勘验工单
ViolationTicket ticket = ticketService.createAutoTicket(buildingCode, diff);
return ResponseEntity.ok(ApiResponse.alarm("ALERT_VIOLATION_3D_EXTRUDED", ticket));
}
return ResponseEntity.ok(ApiResponse.success(new ViolationDetectionResult("NO_SIGNIFICANT_CHANGE")));
}
}四、 常见问题解答 (FAQ)
Q1: WebGL 实景三维差分相比二维正射影像有哪些核心优势？
A: 传统二维遥感正射仅能识别屋顶纹理或阴影变化，无法获取立体高程；而 WebGL 实景三维差分算法基于倾斜摄影生成的 3D Tiles 连续网格模型，能精准计算加盖建筑物的垂直净空高度、外立面悬挑距离与三维总体积（m³），为城市综合行政执法提供了法医级精准数字依据！
Q2: 前端工程如何启动与二次开发？
A: 本项目基于现代化 Vue 3.4 + Pinia + Vite 5 技术栈开发，源码解压后在根目录下执行 npm install 与 npm run dev 即可毫秒级启动。内置完备的低空遥测与三维网格差分 Mock 数据源及全套 15 张 4K 原生高清运行截图，开箱即用！
