网站首页 > 技术文章正文

什么是智慧机场?（智慧机场建设指南）

nanyue 2024-10-31 13:49:49 技术文章 4 ℃

智慧机场就是运用各种信息化和通信技术手段，感测、分析、整合机场各种关键信息，实现对机场安全、服务、运营、保障等各种需求做出数字化处理、智能化响应的建设和再造过程。

效果

所有源码请查看这里

机场的发展层级

第一步: 基本机场运行

独立运营，周边少量互动

关注核心生产与安全运营

为旅客提供基本共性服务

第二步：敏捷性机场

敏捷性机场

根据外部变化为旅客服务

高效运营效率需求被动运行，

局限于出行

第三步：智慧型机场

新技术广泛应用
部门间高效协同
提供主动、个性化服务

为什么要做智慧机场

智慧机场让信息更精准。智能旅客导乘导航屏核心功能的研发，将旅客人脸与身份信息进行绑定，在经过旅客授权后，“刷脸”就能立即获取航班信息及动态，不仅缩短了旅客拖着大包小包在航显大屏让人眼花缭乱的信息中进行“人工”检索的时间，更是在提供基本航班信息的基础上增加了登机口步行时间、登机时间提醒等功能，最大程度降低了航班信息查询成本，让旅客获取信息更轻松、更精准。

如何建设智慧机场

建设智慧机场肯定是分为硬件和软件的。在当前的博客中仅仅分享在软件层面来进行项目的从0->1的完成；

智慧机场总共分为4个大模块:

全球一体化
机场管理
模拟仿真
AIOT监测

全球一体化

点击全球一体化中，可以看到整个全球的机场情况，当点击某一个地区的时候，就出现上图的情况。分析出今日航班执行的情况，人员情况和今日飞机信息等。

机场管理

在机场管理当中，管理每架飞机的情况。分析出当日飞机的起飞时间，航返客流的情况等。

模拟仿真

在模拟仿真中，可以模拟飞机的起飞的动画，分析当前飞机的实时数据等

AIOT监测

在当前模块中，统计人员管理，物流管理，现场安全等

关键代码

从前端的角度来说，在做上面这种项目中，用到最多的是echart.js.然后就是常见的html5 + css3啦！那么，在这里就来分享下如何用echart来写出好看的报表。

引入

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 引入 ECharts 文件 -->
  <script src="echarts.min.js"></script>
</head>
</html>
复制代码

容器

为Echarts放置一个具备宽高的DOM容器

<div id="main" style="width:100%; height:600px; margin:80px 0 80px 0;"></div>   
复制代码

Echarts加载数据

<script type="text/javascript"> 
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));
              // 指定图表的配置项和数据
              var option = {
                backgroundColor: '#2c343c',
      
          title: {
              text: 'Customized Pie',     
              left: 'center',     
              top: 20,    
              textStyle: {    
                  color: '#ccc'   
              }   
          },              
          tooltip : {
      
              trigger: 'item',
      
              formatter: "{a} <br/>{b} : {c} ({d}%)"  
          },                  
          visualMap: {        
              show: false,    
              min: 80,    
              max: 600,   
              inRange: {  
                  colorLightness: [0, 1]
              }
          },  
          series : [  
              {   
                  name:'访问来源',    
                  type:'pie',
                  radius : '55%', 
                  center: ['50%', '50%'], 
                  data:[  
                      {value:335, name:'直接访问'},
      
                      {value:310, name:'邮件营销'},
      
                      {value:274, name:'联盟广告'},
      
                      {value:235, name:'视频广告'},
      
                      {value:400, name:'搜索引擎'}
      
                  ].sort(function (a, b) { return a.value - b.value; }),      
                  roseType: 'radius', 
                  label: {    
                      normal: {   
                          textStyle: {    
                              color: 'rgba(255, 255, 255, 0.3)'   
                          }   
                      }       
                  },  
                  labelLine: {        
                      normal: {       
                          lineStyle: {        
                              color: 'rgba(255, 255, 255, 0.3)'       
                          },      
                          smooth: 0.2,        
                          length: 10,     
                          length2: 20     
                      }       
                  },      
                  itemStyle: {        
                      normal: {       
                          color: '#c23531',       
                          shadowBlur: 200,        
                          shadowColor: 'rgba(0, 0, 0, 0.5)'       
                      }   
                  },              
                  animationType: 'scale',     
                  animationEasing: 'elasticOut',      
                  animationDelay: function (idx) {        
                      return Math.random() * 200;
      
                  }       
              }       
          ]       
              };      
              // 使用刚指定的配置项和数据显示图表。        
              myChart.setOption(option);      
       </script>
复制代码

效果

拓展

当然，一个项目中肯定不止这么写代码，这里展示核心的前端代码。但是三维场景中里面酷炫的数据怎么来的呢？欢迎您来和我一起讨论

上一篇：网页布局技巧（网页布局技巧和方法）
下一篇： CSS3 基础语法（css的基础语法）

网站首页 > 技术文章 正文