青岛机场大屏指挥系统

项目概述

基于Vue.js + WebGIS的PC端大屏指挥系统，适配4K分辨率（3840×2160），用于青岛机场的实时监控和指挥调度。

技术栈

• 前端框架：Vue 3 + TypeScript
• 地图引擎：Leaflet
• 地图服务：SuperMap iServer
• UI框架：Element Plus
• 构建工具：Vite

分辨率适配方案

1. 基础适配方案

// 在main.js中添加
const baseWidth = 3840; // 设计稿宽度
const baseHeight = 2160; // 设计稿高度

// 计算缩放比例
const scaleX = window.innerWidth / baseWidth;
const scaleY = window.innerHeight / baseHeight;
const scale = Math.min(scaleX, scaleY);

// 应用缩放
document.documentElement.style.fontSize = `${scale * 100}px`;

2. 响应式布局

/* 使用rem作为单位 */
.map-container {
  width: 100rem;
  height: 56.25rem; /* 16:9比例 */
}

/* 媒体查询适配不同分辨率 */
@media screen and (max-width: 1920px) {
  :root {
    font-size: 50%; /* 4K分辨率下为100% */
  }
}

3. 地图适配

• 动态计算地图容器大小
• 根据屏幕比例调整地图缩放级别
• 优化地图瓦片加载策略

开发指南

环境要求

• Node.js >= 16
• npm >= 8
• Chrome >= 88

安装依赖

npm install

开发运行

npm run dev

构建部署

npm run build

性能优化建议

1. 地图优化

• 使用地图瓦片预加载
• 实现地图图层按需加载
• 优化地图渲染性能

2. 资源优化

• 图片资源使用WebP格式
• 实现资源按需加载
• 使用CDN加速静态资源

3. 代码优化

• 使用Vue 3的Composition API
• 实现组件按需加载
• 优化大数据渲染

适配注意事项

1. 字体大小

• 使用rem作为单位
• 设置基础字体大小
• 避免使用固定像素值

2. 布局设计

• 使用flex布局
• 保持16:9的显示比例
• 预留安全边距

3. 地图显示

• 动态计算地图中心点
• 优化地图旋转角度
• 调整地图缩放级别

4. 交互设计

• 增大点击区域
• 优化触摸操作
• 添加操作反馈

开发规范

1. 代码规范

• 使用ESLint进行代码检查
• 遵循Vue 3风格指南
• 使用TypeScript进行类型检查

2. 组件规范

• 组件命名使用PascalCase
• 保持组件单一职责
• 实现组件文档化

3. 注释规范

• 关键代码添加注释
• 使用JSDoc格式
• 保持注释及时更新

部署建议

1. 服务器配置

• 使用Nginx作为Web服务器
• 配置Gzip压缩
• 设置缓存策略

2. 安全配置

• 启用HTTPS
• 配置CORS
• 实现访问控制

3. 监控配置

• 添加性能监控
• 实现错误追踪
• 配置日志记录

常见问题

1. 地图加载慢

• 检查网络连接
• 优化瓦片加载策略
• 使用地图缓存

2. 界面显示异常

• 检查分辨率设置
• 验证缩放比例
• 调整布局参数

3. 性能问题

• 优化资源加载
• 减少DOM操作
• 使用虚拟列表

npm install leaflet-minimap插件来实现鹰眼功能