项目名称：智慧航班

功能介绍：

地球自转：

下图为成果展示图，点击可实现地球自转。

实现步骤：

1. 使用inject函数注入依赖，获取地图对象和场景对象并分别赋值给变量。

2. 从map对象中获取当前中心点坐标，将地图中心点的经度减少1度。

3. 使用easeTo的方法以线性平滑的方法均匀移动到新的中心点。

4. 使用map.off方法从地图对象上移除moveend事件监听器。

主页面插件、鹰眼控件

1. 时间戳：

在子组件中通过setInterval函数实现时间的变化，利用Date()获取当前时间，利用toLocalDateString函数获取当前时间的年月日和时分秒。

效果图：

代码：

2. 更换地图style、全屏控件

根据select的change事件，获取当前选择的style，并利用setStyle函数将值赋给map

3. 首页跳转：

在Bottom子组件中添加一个按钮，使用 window.location.href 跳转到指定的 URL，实现跳转到地图首页的功能。

4. 切换投影方式

在select下拉框通过v-model双向绑定实现响应式数据，@change方法实现地图投影方式的改变。

右为首页和切换投影插件展示=>

鹰眼控件

1. 安装@aesqe/mapboxgl-minimap插件，初始化配置，并添加控件；卸载时移除控件。

鹰眼控件展示图

控制中心

在老师的代码基础上增加了雷达图展示：将雷达图代码封装在js文件中，与其他图不同，雷达图使用render函数展现图层

城市视角

1. 呈现结果

2. 获取长江武汉段数据获取

城市扫光

1. 城市场景实现

范围事故点查询与信息匹配

建立el表格，设置查询结果的表格格式，通过height属性确定表格定长以达到表格的滚动条效果，并利用el-card绑定点击事件（toDraw）开始进行拉框查询

建立toDraw方法，初始化画框及地图内容，绘制一个初始的矩形，即为查询区域。

利用toSearch方法判断时间是否在矩形框内，若在则利用push方法将方法的具体信息传入列表内，并最后利用列表的长度判断是否有点在矩形框内。若有点在矩形框内，则将列表内信息传入el表内。

利用el表绑定的点击事件，通过点击行内信息，利用flyTo方法将地图中心点显示至点对象处。

下图即为展示效果，点击拉框查询则可以进行范围查询，并得到框内结果，点击则可以跳转。

地图测量

1. 添加路由及视图基本实现画线、矩形、多边形、圆的功能

功能基本实现示例

2. 解决功能冲突问题，完善代码，如下图

发现功能冲突的问题

天气预报

1. 首先根据openlayer天气项目提供的网址，创建自己的key

2. 然后在网址后加上输入框输入的地址以及key值获取邮编和经纬度信息

3. 进一步根据邮编获取该地的天气状况，并利用MyMarker函数将天气状况以及经纬度等状况传递出去

4. 根据传出去的经纬度设置marker以及popup，并用if限制条件，对marker进行销毁，防止连续输入多个城市后，多个marker同时出现的情况

5. 最后利用flyTo实现地图的移动

6. 下图为成果展示图，可搜索国内任意省份和地区的天气状况

加载三维模型

1. 初始化模型配置

2. 利用loadObjModels.js文件进行模型的加载和移除

3. 三维模型展示图

地图导航

1. 安装threebox-plugin插件，初始化car、soldier、bicycle三维模型

2. 安装@mapbox/mapbox-gl-directions插件，初始化导航控件，根据不同的交通方式加载不同的模型进行漫游

地图导航展示图:

3. 卸载时移除模型和导航控件

全国风力图

1. 在子组件ChinaWind.vue中获取到全局变量

const { map, scene } = inject("$scene_map");

2. 拿到全国季风的json数据后进行数据请求，将后端数据渲染到页面上

3. 渲染到页面上之后设置图层的样式

4. 在组件注销时删除季风图层

飞行航线查询

飞行航线查询(视图)